:root{
 --v47-bg:#04080c;
 --v47-surface:#081119;
 --v47-line:rgba(148,202,232,.17);
 --v47-text:#f5f8fa;
 --v47-muted:#788d99;
 --v47-teal:#74ddd1;
 --v47-blue:#8bd8ff;
 --v47-gold:#d3ae68;
}


/* ==========================================================================
   DISTRICT ATMOSPHERE
   ========================================================================== */

body[class*="omnia-district-"]{
 position:relative;
 background-attachment:fixed!important;
}

body[class*="omnia-district-"]:before{
 content:"";
 pointer-events:none;
 position:fixed;
 inset:74px 0 0 0;
 z-index:-2;
 opacity:.66;
}

body[class*="omnia-district-"]:after{
 content:"";
 pointer-events:none;
 position:fixed;
 left:0;
 right:0;
 bottom:0;
 height:42vh;
 z-index:-1;
 opacity:.33;
 background:
  linear-gradient(
   90deg,
   transparent 0 3%,
   rgba(126,195,227,.17) 3% 5%,
   transparent 5% 9%,
   rgba(126,195,227,.11) 9% 14%,
   transparent 14% 20%,
   rgba(126,195,227,.18) 20% 24%,
   transparent 24% 32%,
   rgba(126,195,227,.1) 32% 38%,
   transparent 38% 45%,
   rgba(126,195,227,.17) 45% 50%,
   transparent 50% 58%,
   rgba(126,195,227,.12) 58% 63%,
   transparent 63% 69%,
   rgba(126,195,227,.2) 69% 74%,
   transparent 74% 82%,
   rgba(126,195,227,.12) 82% 87%,
   transparent 87%
  );
 mask-image:
  linear-gradient(
   180deg,
   transparent,
   #000 45%
  );
}


/* CORE */

body.omnia-district-core:before{
 background:
  radial-gradient(
   circle at 50% 19%,
   rgba(155,215,245,.14),
   transparent 27%
  ),
  linear-gradient(
   180deg,
   #07131c,
   #03070a 72%
  );
}


/* WEALTH */

body.omnia-district-wealth:before{
 background:
  radial-gradient(
   circle at 72% 18%,
   rgba(101,214,199,.13),
   transparent 28%
  ),
  radial-gradient(
   circle at 26% 30%,
   rgba(212,173,100,.06),
   transparent 26%
  ),
  linear-gradient(
   180deg,
   #07141a,
   #030708 75%
  );
}


/* FINANCIAL */

body.omnia-district-financial:before{
 background:
  repeating-linear-gradient(
   90deg,
   transparent 0 92px,
   rgba(94,181,226,.018) 92px 93px
  ),
  radial-gradient(
   circle at 70% 13%,
   rgba(66,169,226,.18),
   transparent 26%
  ),
  linear-gradient(
   180deg,
   #06131e,
   #02070b 75%
  );
}


/* MANTLE */

body.omnia-district-mantle:before{
 background:
  radial-gradient(
   circle at 42% 10%,
   rgba(157,197,221,.12),
   transparent 24%
  ),
  linear-gradient(
   180deg,
   #0a131a,
   #04080b 75%
  );
}


/* STUDIOS */

body.omnia-district-studios:before{
 background:
  radial-gradient(
   circle at 76% 19%,
   rgba(210,171,100,.13),
   transparent 24%
  ),
  radial-gradient(
   circle at 20% 31%,
   rgba(178,79,137,.055),
   transparent 20%
  ),
  linear-gradient(
   180deg,
   #111014,
   #05080a 76%
  );
}


/* SOLUTIONS */

body.omnia-district-solutions:before{
 background:
  radial-gradient(
   circle at 60% 16%,
   rgba(135,212,246,.11),
   transparent 25%
  ),
  linear-gradient(
   180deg,
   #08141b,
   #04080b 72%
  );
}


/* OPPORTUNITIES */

body.omnia-district-opportunities:before{
 background:
  radial-gradient(
   circle at 67% 20%,
   rgba(87,210,170,.11),
   transparent 25%
  ),
  linear-gradient(
   180deg,
   #071611,
   #030806 74%
  );
}


/* PROVIDERS */

body.omnia-district-providers:before{
 background:
  radial-gradient(
   circle at 50% 17%,
   rgba(146,197,223,.1),
   transparent 26%
  ),
  linear-gradient(
   180deg,
   #0a1318,
   #040709 74%
  );
}


/* ==========================================================================
   DISTRICT IDENTIFIER
   ========================================================================== */

#omniaDistrictIdentity{
 position:fixed;
 left:18px;
 bottom:18px;
 z-index:999990;
 max-width:260px;
 padding:10px 12px;
 border:1px solid rgba(146,202,232,.16);
 border-radius:11px;
 background:rgba(5,10,15,.8);
 backdrop-filter:blur(14px);
 color:#8094a0;
 font:720 9px Inter,system-ui,sans-serif;
 pointer-events:none;
}

#omniaDistrictIdentity strong{
 display:block;
 margin-bottom:3px;
 color:#dce8ed;
 font-size:10px;
 letter-spacing:.04em;
}


/* ==========================================================================
   RESIDENCE
   ========================================================================== */

#omniaResidence{
 width:min(1440px,calc(100% - 28px));
 margin:18px auto 32px;
 position:relative;
 z-index:30;
 color:var(--v47-text);
 font-family:Inter,system-ui,sans-serif;
}

.residence-arrival{
 min-height:360px;
 position:relative;
 overflow:hidden;
 border:1px solid var(--v47-line);
 border-radius:18px;
 background:
  radial-gradient(
   circle at 76% 26%,
   rgba(102,208,197,.13),
   transparent 27%
  ),
  linear-gradient(
   140deg,
   rgba(10,23,30,.97),
   rgba(5,11,15,.97)
  );
}

.residence-city-view{
 position:absolute;
 inset:0;
 opacity:.28;
 background:
  repeating-linear-gradient(
   90deg,
   transparent 0 58px,
   rgba(117,201,237,.13) 58px 60px,
   transparent 60px 92px
  );
 mask-image:
  linear-gradient(
   180deg,
   transparent 5%,
   #000 65%
  );
}

.residence-copy{
 position:absolute;
 z-index:3;
 left:5%;
 top:17%;
 width:min(620px,74%);
}

.residence-kicker{
 color:#75dcd1;
 font-size:9px;
 font-weight:850;
 letter-spacing:.2em;
}

.residence-title{
 margin-top:8px;
 font-size:clamp(38px,6vw,68px);
 line-height:.95;
 font-weight:900;
 letter-spacing:-.035em;
}

.residence-subtitle{
 max-width:560px;
 margin-top:13px;
 color:#80939f;
 font-size:11px;
 line-height:1.6;
}

.residence-address{
 margin-top:18px;
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:8px 11px;
 border:1px solid rgba(122,219,209,.2);
 border-radius:999px;
 color:#95aaa5;
 font-size:9px;
 font-weight:800;
}

.residence-address:before{
 content:"";
 width:7px;
 height:7px;
 border-radius:50%;
 background:#73ddd1;
 box-shadow:0 0 12px #73ddd1;
}

.residence-rooms{
 margin-top:10px;
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:8px;
}

.residence-room{
 min-height:128px;
 position:relative;
 padding:14px;
 overflow:hidden;
 border:1px solid var(--v47-line);
 border-radius:13px;
 background:
  linear-gradient(
   180deg,
   rgba(11,21,28,.95),
   rgba(7,14,19,.97)
  );
 cursor:pointer;
 transition:.18s ease;
}

.residence-room:hover{
 transform:translateY(-2px);
 border-color:rgba(142,216,247,.3);
}

.residence-room.active{
 border-color:rgba(116,221,209,.4);
 background:
  linear-gradient(
   180deg,
   rgba(11,28,32,.97),
   rgba(7,16,20,.98)
  );
}

.residence-room-number{
 color:#5f7785;
 font-size:8px;
 font-weight:850;
 letter-spacing:.12em;
}

.residence-room-name{
 margin-top:7px;
 color:#eef7fa;
 font-size:14px;
 font-weight:900;
}

.residence-room-function{
 margin-top:5px;
 color:#718794;
 font-size:9px;
 line-height:1.45;
}

.residence-room-arrow{
 position:absolute;
 right:12px;
 bottom:10px;
 color:#70d8cd;
 font-size:12px;
}

#residenceRoomContext{
 margin-top:8px;
 padding:14px 16px;
 border:1px solid var(--v47-line);
 border-radius:12px;
 background:#081118;
 color:#7d919d;
 font-size:10px;
 line-height:1.55;
}


/* ==========================================================================
   RESIDENCE HOLOGRAM
   ========================================================================== */

.residence-hologram{
 position:absolute;
 right:5%;
 top:11%;
 width:250px;
 height:310px;
 opacity:.8;
}

.res-holo-glow{
 position:absolute;
 inset:20px;
 border-radius:50%;
 background:
  radial-gradient(
   circle,
   rgba(89,201,214,.16),
   transparent 65%
  );
}

.res-holo-head{
 position:absolute;
 top:32px;
 left:97px;
 width:58px;
 height:70px;
 border:1px solid rgba(130,222,225,.48);
 border-radius:47%;
}

.res-holo-torso{
 position:absolute;
 top:110px;
 left:75px;
 width:100px;
 height:145px;
 border:1px solid rgba(130,222,225,.38);
 border-radius:45% 45% 30% 30%;
}

.res-holo-line{
 position:absolute;
 left:50%;
 top:100px;
 width:1px;
 height:160px;
 background:
  linear-gradient(
   180deg,
   #71ddd1,
   transparent
  );
 box-shadow:0 0 13px #71ddd1;
}


/* ==========================================================================
   RARI v2
   ========================================================================== */

#omniaRariArrival.v47-rari .rari-form{
 width:150px;
 height:430px;
}

#omniaRariArrival.v47-rari .rari-head{
 left:40px;
 width:68px;
 height:81px;
 border-color:rgba(143,227,226,.62);
 background:
  radial-gradient(
   circle at 48% 34%,
   rgba(145,225,225,.11),
   transparent 55%
  );
}

#omniaRariArrival.v47-rari .rari-body{
 top:88px;
 left:26px;
 width:98px;
 height:180px;
 border-color:rgba(143,227,226,.5);
 background:
  linear-gradient(
   180deg,
   rgba(66,144,153,.06),
   rgba(16,49,54,.02)
  );
}

#omniaRariArrival.v47-rari .rari-title:after{
 content:" Rari.";
 color:#78ddd1;
}

#omniaRariArrival.v47-rari .rari-status{
 max-width:520px;
}


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

@media(max-width:820px){

 .residence-rooms{
  grid-template-columns:1fr 1fr;
 }

 .residence-hologram{
  opacity:.36;
  right:-34px;
 }

 #omniaDistrictIdentity{
  display:none;
 }
}

@media(max-width:600px){

 .residence-arrival{
  min-height:420px;
 }

 .residence-copy{
  width:84%;
 }

 .residence-hologram{
  top:135px;
  right:-60px;
  opacity:.3;
 }

 .residence-rooms{
  grid-template-columns:1fr;
 }

 .residence-room{
  min-height:106px;
 }
}

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

 .residence-room{
  transition:none!important;
 }

 .residence-room:hover{
  transform:none!important;
 }
}