.visual-preview{
  --bg:#070813;
  --panel:#121426;
  --line:#30334d;
  --a1:#8f5cff;
  --a2:#ff4fa3;
  --a3:#39dfff;
}

.visual-preview .nav{
  background:linear-gradient(90deg,rgba(7,8,19,.96),rgba(29,13,52,.92),rgba(7,20,32,.94));
  border-bottom-color:rgba(115,104,201,.38);
}

.visual-preview .hero{
  min-height:720px;
  align-items:flex-end;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(5,6,15,.34),rgba(7,8,19,.12) 50%,rgba(7,8,19,.28)),
    linear-gradient(0deg,rgba(7,8,19,.48),rgba(7,8,19,.04) 55%,rgba(7,8,19,.12)),
    url("preview/resort-court-sunset.jpeg") center 66%/123% auto no-repeat;
}

.visual-preview .hero::before{
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 16% 38%,rgba(143,92,255,.38),transparent 30%),
    radial-gradient(circle at 68% 74%,rgba(57,223,255,.16),transparent 27%);
  filter:blur(18px);
}

.visual-preview .hero::after{
  content:"";
  position:absolute;
  right:28px;
  bottom:24px;
  z-index:2;
  width:172px;
  height:58px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(5,6,15,.62) url("brand/borealis-logo-original.jpg") center 52%/176% auto no-repeat;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:.82;
  pointer-events:none;
}

.visual-preview .hero .wrap{
  position:absolute;
  left:50%;
  bottom:0;
  padding-top:24px;
  padding-bottom:82px;
  text-align:left;
  transform:translateX(-50%);
}
.visual-preview .hero h1{
  max-width:none;
  margin:0 0 10px;
  text-align:center;
  font-size:clamp(46px,4.7vw,64px);
  letter-spacing:-.035em;
  white-space:nowrap;
  text-shadow:0 8px 36px rgba(0,0,0,.76);
}
.hero-topline{
  position:absolute;
  top:12px;
  left:50%;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:18px;
  width:min(var(--max),calc(100% - 48px));
  transform:translateX(-50%);
}
.visual-preview .hero .hero-topline h1{
  position:absolute;
  top:272px;
  left:0;
  width:100%;
  margin:0;
  font-size:clamp(42px,5.2vw,68px);
  line-height:1.08;
  text-align:center;
  white-space:nowrap;
}
.visual-preview .hero .lead{
  max-width:680px;
  margin-left:0;
  margin-right:0;
  font-size:18px;
  line-height:1.42;
  color:#f5f6fb;
  text-shadow:0 3px 18px rgba(0,0,0,.86);
}
.visual-preview .hero .ctas{justify-content:flex-start}
.visual-preview .hero .ctas{margin-top:14px}
.visual-preview .hero .concept-note{margin-top:9px}

.preview-label{
  display:inline-flex;
  margin-bottom:24px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:999px;
  background:rgba(8,9,18,.52);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}

.hero-kicker{
  display:inline-flex;
  position:absolute;
  top:220px;
  right:32px;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  line-height:1.28;
  text-shadow:0 2px 10px rgba(0,0,0,.92);
  backdrop-filter:none;
}
.hero-kicker span:last-child{color:#67e4ff}

.concept-note{
  margin:18px 0 0;
  color:#d7dbea;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.visual-preview main>section:nth-of-type(2){
  background:linear-gradient(145deg,rgba(143,92,255,.12),rgba(7,8,19,0) 56%,rgba(255,79,163,.07));
}

.visual-preview .g5 .card{position:relative;overflow:hidden}
.visual-preview .g5 .card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--a1),var(--a2));
}
.visual-preview .g5 .card:nth-child(2)::before{background:linear-gradient(90deg,var(--a3),var(--a1))}
.visual-preview .g5 .card:nth-child(3)::before{background:linear-gradient(90deg,var(--a2),#ff9d5c)}
.visual-preview .g5 .card:nth-child(4)::before{background:linear-gradient(90deg,#695cff,var(--a3))}
.visual-preview .g5 .card:nth-child(5)::before{background:linear-gradient(90deg,var(--a2),var(--a1))}

.showcase-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 18%,rgba(57,223,255,.15),transparent 30%),
    linear-gradient(135deg,rgba(143,92,255,.15),rgba(7,8,19,.94) 52%,rgba(255,79,163,.09));
}

.detail-showcase{
  background:
    radial-gradient(circle at 13% 30%,rgba(255,79,163,.15),transparent 31%),
    linear-gradient(145deg,rgba(20,9,42,.92),rgba(7,8,19,.98) 60%,rgba(57,223,255,.08));
}

.showcase-grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:center;
  gap:54px;
}
.showcase-grid.reverse{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.showcase-copy{padding:24px 0}
.showcase-media{
  position:relative;
  margin:0;
  border:1px solid rgba(180,170,255,.32);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.44),0 0 42px rgba(120,77,255,.12);
}
.showcase-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.resort-showcase .showcase-media img{
  transform:scale(1.12);
  transform-origin:52% 58%;
}
.showcase-media::after{
  content:"";
  position:absolute;
  right:16px;
  bottom:16px;
  width:146px;
  height:50px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:10px;
  background:rgba(5,6,15,.64) url("brand/borealis-logo-original.jpg") center 52%/176% auto no-repeat;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  opacity:.82;
  pointer-events:none;
}

.visual-preview .band{
  background:
    radial-gradient(circle at 80% 50%,rgba(57,223,255,.12),transparent 32%),
    linear-gradient(135deg,rgba(143,92,255,.17),rgba(255,79,163,.08));
}
.visual-preview .feature:nth-child(3n+1){border-color:rgba(143,92,255,.45)}
.visual-preview .feature:nth-child(3n+2){border-color:rgba(57,223,255,.42)}
.visual-preview .feature:nth-child(3n){border-color:rgba(255,79,163,.42)}

.footer-brand-logo{
  display:block;
  width:220px;
  height:70px;
  overflow:hidden;
  border-radius:8px;
}
.footer-brand-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
  transform:scale(1.72);
}

@media(max-width:900px){
  .visual-preview .hero{
    min-height:680px;
    background:
      linear-gradient(90deg,rgba(5,6,15,.42),rgba(7,8,19,.20)),
      linear-gradient(0deg,rgba(7,8,19,.68),rgba(7,8,19,.02) 64%),
      url("preview/resort-court-sunset.jpeg") 58% 66%/auto 126% no-repeat;
  }
  .showcase-grid,.showcase-grid.reverse{grid-template-columns:1fr;gap:30px}
  .showcase-grid.reverse .showcase-media{order:2}
}

@media(max-width:700px){
  .visual-preview .hero{min-height:700px;align-items:flex-end}
  .visual-preview .hero .wrap{transform:translateX(-50%)}
  .visual-preview .hero h1{font-size:48px;white-space:normal}
  .visual-preview .hero h1 span{display:block}
  .hero-topline{top:24px;width:calc(100% - 28px);gap:10px}
  .visual-preview .hero .wrap{padding-bottom:68px}
  .visual-preview .hero .hero-topline h1{top:257px;font-size:36px;white-space:nowrap}
  .visual-preview .hero .hero-topline h1 span{display:inline}
  .hero-kicker{top:210px;right:28px;padding:0;font-size:9px}
  .visual-preview .hero .lead{font-size:18px}
  .showcase-section{padding:72px 0}
  .showcase-media{border-radius:20px}
  .footer-brand-logo{width:190px;height:60px}
  .visual-preview .hero::after{right:12px;bottom:12px;width:128px;height:44px}
  .showcase-media::after{right:10px;bottom:10px;width:118px;height:40px}
}

@media(max-width:520px){
  .visual-preview .hero h1{font-size:36px}
  .hero-topline{top:18px;gap:7px}
  .visual-preview .hero .hero-topline h1{top:230px;font-size:24px}
  .hero-kicker{top:190px;right:20px;padding:0;font-size:7px;letter-spacing:.10em}
}