:root{--bg:#080808;--panel:#121212;--panel2:#181818;--gold:#d8aa3d;--gold2:#f1cd6c;--text:#f7f2e7;--muted:#aaa39a;--line:#332b1b;--red:#b64d52;--teal:#68aaa6}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 0,rgba(104,170,166,.08),transparent 28rem),radial-gradient(circle at 90% 0,rgba(182,77,82,.08),transparent 25rem),var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}.shell{max-width:1100px;margin:auto;padding:18px 18px 80px}header{display:grid;grid-template-columns:88px 1fr 150px;gap:16px;align-items:center;padding:8px 0 18px;border-bottom:1px solid var(--line)}.logo{width:105px;height:150px;object-fit:contain}h1,h2,h3,p{margin-top:0}h1{color:var(--gold2);margin-bottom:5px;font-size:clamp(1.6rem,4vw,2.8rem)}header p{color:var(--muted);margin:0}.kicker{color:var(--gold);font-size:.72rem;letter-spacing:.17em;font-weight:800;margin-bottom:7px}#lang{width:48px;height:48px;border:1px solid var(--gold);border-radius:50%;background:transparent;color:var(--gold2);font-weight:800}.welcome{margin:18px 0;padding:22px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(216,170,61,.09),rgba(255,255,255,.015));display:flex;justify-content:space-between;gap:18px;align-items:center}.welcome h2{margin-bottom:7px}.welcome p{color:var(--muted);margin:0}.resident,.pill{border:1px solid var(--gold);color:var(--gold2);padding:8px 11px;border-radius:999px;font-size:.68rem;letter-spacing:.11em;font-weight:800;white-space:nowrap}.tabs{display:flex;gap:8px;margin-bottom:18px}.tabs button{border:1px solid #292929;background:#111;color:var(--muted);padding:11px 18px;border-radius:999px;font-weight:800}.tabs button.active{border-color:var(--gold);color:var(--gold2);background:#211c10}.panel{display:none}.panel.active{display:block}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.card{min-height:145px;text-align:left;padding:20px;border-radius:18px;border:1px solid #282828;background:var(--panel);color:var(--text)}.card b{display:block;color:var(--gold2);margin-bottom:10px}.card span{color:var(--muted);line-height:1.45}.section-title{display:flex;justify-content:space-between;align-items:center;margin:12px 0 16px}.section-title h2{margin:0}.passport-layout,.token-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;align-items:start}.reference{width:100%;border-radius:18px;border:1px solid #332b1b}.passport-data,.wallet{background:var(--panel);border:1px solid #292929;border-radius:18px;padding:20px}.passport-data label{display:block;color:var(--muted);font-size:.78rem;margin:12px 0}.passport-data input{display:block;width:100%;margin-top:6px;background:#090909;border:1px solid #333;color:#fff;padding:12px;border-radius:10px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gold,.secondary,.token-actions button{border-radius:10px;padding:11px 14px;font-weight:800}.gold{background:var(--gold);border:0;color:#111;width:100%}.secondary{width:100%;background:transparent;border:1px solid #444;color:#ddd}.saved{color:var(--teal);margin:10px 0 0}.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stamp{aspect-ratio:1;border:1px dashed #5b4a27;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;color:#8c8376;background:#0d0d0d;font-size:.72rem;font-weight:800}.stamp.collected{border-style:solid;border-color:var(--gold);color:var(--gold2);background:#211c10}.wallet-label{text-align:center;color:var(--muted);font-size:.72rem;letter-spacing:.15em}.balance{text-align:center;color:var(--gold2);font-size:4rem;font-weight:900;margin:12px 0}.balance small{display:block;font-size:.8rem;letter-spacing:.2em}.wallet p{color:var(--muted);line-height:1.55}.token-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:16px 0}.token-actions button{border:1px solid var(--gold);background:#1e190e;color:var(--gold2)}
@media(max-width:760px){.shell{padding:12px 12px 55px}header{grid-template-columns:100px 1fr 45px}.logo{width:90px;height:90px}.welcome{display:block}.resident{display:inline-block;margin-top:15px}.cards{grid-template-columns:repeat(2,1fr)}.passport-layout,.token-layout{grid-template-columns:1fr}.stamps{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:1fr}.section-title{align-items:flex-start;gap:10px}.pill{white-space:normal;text-align:center}}
.intro{color:var(--muted);margin:-5px 0 18px}.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.filter{border:1px solid #333;background:#111;color:var(--muted);padding:9px 13px;border-radius:999px;font-weight:800}.filter.active{border-color:var(--gold);color:var(--gold2);background:#211c10}.places{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.place{background:var(--panel);border:1px solid #292929;border-radius:18px;padding:18px;min-height:180px;display:flex;flex-direction:column}.place .type{font-size:.67rem;letter-spacing:.13em;color:var(--gold);font-weight:800;text-transform:uppercase}.place h3{margin:9px 0 7px}.place p{color:var(--muted);font-size:.86rem;line-height:1.45;flex:1}.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.badge{font-size:.62rem;border:1px solid #3a3427;border-radius:999px;padding:5px 7px;color:#c7b98f}.place button{margin-top:13px;border:1px solid var(--gold);background:#1e190e;color:var(--gold2);border-radius:10px;padding:9px;font-weight:800}.place-detail{padding:2px}.place-detail h3{color:var(--gold2)}.detail-box{border:1px solid #2b2b2b;background:#101010;border-radius:14px;padding:14px;margin:10px 0}.detail-box b{color:var(--gold2)}
@media(max-width:760px){.places{grid-template-columns:repeat(2,1fr)}}@media(max-width:470px){.places{grid-template-columns:1fr}}
.inside{font-size:.72rem;line-height:1.5;color:#c7b98f;border-top:1px solid #292929;padding-top:10px;margin-top:4px}.inside b{color:var(--gold2)}

/* V15 - Guest App install card */
.install-app-card{margin:0 0 18px;padding:18px;border:1px solid var(--gold);border-radius:18px;background:linear-gradient(135deg,rgba(216,170,61,.10),rgba(255,255,255,.02));display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}.install-app-card h3{color:var(--gold2);margin:0 0 7px}.install-app-card p{color:var(--muted);line-height:1.5;margin:0}.install-app-button{width:auto;min-width:145px}.install-app-help{grid-column:1/-1;color:#c7b98f;line-height:1.55;font-size:.86rem}.install-app-help:empty{display:none}@media(max-width:600px){.install-app-card{grid-template-columns:1fr}.install-app-button{width:100%}.install-app-help{grid-column:1}}

/* =========================================================
   V16 - DISCO 1985 EDITION
   Visual-only facelift. Existing app behaviour/data unchanged.
   ========================================================= */
:root{
  --bg:#020817;
  --panel:#06152a;
  --panel2:#081d38;
  --gold:#ffb84d;
  --gold2:#ffd36b;
  --text:#f5fbff;
  --muted:#9db5c9;
  --line:#153e67;
  --red:#ff4fb8;
  --teal:#22d3ee;
  --cyan:#20d9ff;
  --blue:#2684ff;
  --pink:#ff3ed1;
  --purple:#8b5cf6;
  --green:#57f7a2;
}
html{background:#020817}
body.disco-1985{
  min-height:100vh;
  background:
    radial-gradient(circle at 80% -10%,rgba(255,62,209,.20),transparent 30rem),
    radial-gradient(circle at 12% 8%,rgba(32,217,255,.16),transparent 28rem),
    linear-gradient(180deg,#020817 0%,#04102c 48%,#020817 100%);
  color:var(--text);
  overflow-x:hidden;
}
body.disco-1985::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background-image:
    radial-gradient(circle at 14% 15%,rgba(255,255,255,.7) 0 1px,transparent 1.6px),
    radial-gradient(circle at 73% 9%,rgba(255,255,255,.6) 0 1px,transparent 1.5px),
    radial-gradient(circle at 48% 30%,rgba(34,211,238,.7) 0 1px,transparent 1.5px);
  background-size:130px 130px,190px 190px,230px 230px;opacity:.35;
}
body.disco-1985::after{
  content:"";position:fixed;left:-10vw;right:-10vw;bottom:-18vh;height:44vh;pointer-events:none;z-index:-1;
  background:
    linear-gradient(rgba(255,62,209,.30) 1px,transparent 1px),
    linear-gradient(90deg,rgba(32,217,255,.30) 1px,transparent 1px);
  background-size:44px 30px;transform:perspective(380px) rotateX(62deg);transform-origin:bottom;
  mask-image:linear-gradient(to top,#000,transparent 86%);opacity:.55;
}
.shell{max-width:1180px;padding:18px 18px 90px;position:relative}
header{
  grid-template-columns:150px 1fr 72px;gap:22px;padding:14px 8px 22px;
  border-bottom:1px solid rgba(32,217,255,.28);
  position:relative;
}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),transparent);box-shadow:0 0 16px var(--cyan)}
.logo{width:145px;height:110px;filter:drop-shadow(0 0 14px rgba(255,62,209,.32)) drop-shadow(0 0 20px rgba(32,217,255,.18))}
.brand-copy h1{
  margin:2px 0 2px;color:#f7fbff;font-size:clamp(1.9rem,4.8vw,3.25rem);letter-spacing:.025em;
  text-shadow:0 0 5px #fff,0 0 15px rgba(32,217,255,.65),0 0 28px rgba(255,62,209,.45);
}
.neon-script{margin:0!important;color:var(--pink)!important;font-style:italic;font-weight:800;font-size:clamp(1rem,2.4vw,1.55rem);letter-spacing:.04em;text-shadow:0 0 10px rgba(255,62,209,.85)}
.kicker{color:var(--cyan)!important;text-shadow:0 0 10px rgba(32,217,255,.45)}
#lang{border-color:var(--cyan);color:#fff;background:rgba(5,20,45,.72);box-shadow:0 0 0 1px rgba(32,217,255,.12),0 0 20px rgba(32,217,255,.35)}
#lang:hover{border-color:var(--pink);box-shadow:0 0 22px rgba(255,62,209,.4)}
.welcome{
  margin:22px 0;padding:28px;border:1px solid rgba(32,217,255,.68);border-radius:24px;
  background:linear-gradient(135deg,rgba(6,21,42,.90),rgba(11,22,58,.82) 60%,rgba(55,12,67,.45));
  box-shadow:0 0 0 1px rgba(139,92,246,.12),0 0 28px rgba(32,217,255,.12),inset 0 0 38px rgba(255,62,209,.04);
  position:relative;overflow:hidden;
}
.welcome::before{content:"";position:absolute;right:-80px;top:-140px;width:340px;height:340px;border-radius:50%;background:repeating-linear-gradient(to bottom,#ffbd55 0 10px,#ff6a96 10px 20px,#ff3ed1 20px 30px);opacity:.15;filter:blur(.2px)}
.welcome>*{position:relative;z-index:1}
.welcome h2{font-size:clamp(1.6rem,4vw,2.55rem);color:#ffe2a1;text-shadow:0 0 14px rgba(255,184,77,.42)}
.welcome p{color:#c9d7e5!important;font-size:1.02rem}
.resident,.pill{border-color:var(--gold);color:#ffe39b;background:rgba(35,22,8,.45);box-shadow:0 0 18px rgba(255,184,77,.16)}
.tabs{gap:12px;margin:0 0 22px;display:grid;grid-template-columns:repeat(4,1fr)}
.tabs button{
  position:relative;border:1px solid rgba(38,132,255,.82);background:linear-gradient(180deg,rgba(8,29,56,.92),rgba(3,13,35,.96));
  color:#d9ecff;padding:14px 16px;border-radius:18px;box-shadow:inset 0 0 18px rgba(32,217,255,.035);transition:.18s ease;
}
.tabs button::before{display:block;font-size:1.05rem;margin-bottom:4px;color:var(--cyan);text-shadow:0 0 10px currentColor}
.tabs button[data-tab="home"]::before{content:"⌂"}.tabs button[data-tab="passport"]::before{content:"▣"}.tabs button[data-tab="tokens"]::before{content:"◎"}.tabs button[data-tab="explore"]::before{content:"◇"}
.tabs button:hover{transform:translateY(-1px);border-color:var(--cyan);box-shadow:0 0 18px rgba(32,217,255,.22)}
.tabs button.active{border-color:var(--pink);color:#fff;background:linear-gradient(180deg,rgba(83,12,100,.70),rgba(31,8,62,.86));box-shadow:0 0 22px rgba(255,62,209,.33),inset 0 0 20px rgba(255,62,209,.08)}
.tabs button.active::before{color:var(--pink)}
.panel.active{animation:btFade .22s ease}@keyframes btFade{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
.cards{gap:14px}
.card,.passport-data,.wallet,.place,.detail-box,.install-app-card{
  border-color:rgba(32,217,255,.32)!important;
  background:linear-gradient(145deg,rgba(6,24,50,.92),rgba(4,14,36,.94))!important;
  box-shadow:0 0 0 1px rgba(139,92,246,.07),0 0 18px rgba(32,217,255,.06),inset 0 0 22px rgba(255,62,209,.025);
}
.card{min-height:150px;position:relative;overflow:hidden;transition:.18s ease}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--pink),var(--cyan));opacity:.75}
.card:hover{transform:translateY(-2px);border-color:var(--pink)!important;box-shadow:0 0 24px rgba(255,62,209,.16),0 0 18px rgba(32,217,255,.12)}
.card b,.passport-data h3,.place h3,.detail-box b{color:#fff!important;text-shadow:0 0 10px rgba(32,217,255,.10)}
.card span,.passport-data p,.wallet p,.place p,.intro{color:var(--muted)!important}
.section-title h2{font-size:clamp(1.55rem,3vw,2.15rem);text-shadow:0 0 12px rgba(32,217,255,.18)}
.reference{border-color:rgba(255,62,209,.45);box-shadow:0 0 25px rgba(255,62,209,.10)}
.passport-data input,.passport-data select,input,select{background:#020b19!important;border-color:#195575!important;color:#fff!important;box-shadow:inset 0 0 12px rgba(32,217,255,.03)}
.passport-data input:focus,.passport-data select:focus,input:focus,select:focus{border-color:var(--cyan)!important;outline:none;box-shadow:0 0 0 3px rgba(32,217,255,.10)!important}
.gold,.secondary,.token-actions button,.place button,.filter{
  transition:.18s ease;border-radius:12px!important;font-weight:900!important;
}
.gold{background:linear-gradient(90deg,#f5a742,#ff5e8e)!important;color:#07111e!important;box-shadow:0 0 18px rgba(255,94,142,.20)}
.secondary{border-color:#24699c!important;background:rgba(4,19,42,.8)!important;color:#dff8ff!important}
.token-actions button,.place button{border-color:var(--cyan)!important;background:linear-gradient(180deg,#082a4c,#061a33)!important;color:#eafcff!important;box-shadow:0 0 12px rgba(32,217,255,.08)}
.token-actions button:hover,.place button:hover,.secondary:hover{border-color:var(--pink)!important;box-shadow:0 0 18px rgba(255,62,209,.20)}
.wallet-label{color:var(--cyan)!important}.balance{color:#fff!important;text-shadow:0 0 8px #fff,0 0 24px rgba(32,217,255,.65),0 0 38px rgba(255,62,209,.28)}
.stamp{border-color:#244f78;background:rgba(4,16,34,.92);color:#8daac0}.stamp.collected{border-color:var(--pink);color:#fff;background:linear-gradient(145deg,rgba(83,12,100,.55),rgba(7,31,62,.92));box-shadow:0 0 16px rgba(255,62,209,.18)}
.filters{gap:9px}.filter{border-color:#234b71!important;background:#06152a!important;color:#abc4d8!important}.filter.active{border-color:var(--pink)!important;color:#fff!important;background:#40104f!important;box-shadow:0 0 15px rgba(255,62,209,.20)}
.place .type,.inside,.badge{color:#8feaff!important}.badge{border-color:#285b7a!important;background:rgba(6,21,42,.7)}
.install-app-card{border-color:rgba(255,62,209,.65)!important;box-shadow:0 0 24px rgba(255,62,209,.10),0 0 18px rgba(32,217,255,.08)}
.install-app-card h3{color:#fff!important;font-size:1.35rem}.install-app-button{background:linear-gradient(90deg,#7928ca,#ff3ed1,#2684ff)!important;color:#fff!important;box-shadow:0 0 22px rgba(255,62,209,.28)!important}
#guestLiveSyncBanner{border-color:rgba(32,217,255,.62)!important;background:linear-gradient(135deg,rgba(6,24,50,.92),rgba(7,25,55,.92))!important;box-shadow:0 0 22px rgba(32,217,255,.10)}
#stampProgress,#tokenUse{border-color:rgba(255,62,209,.42)!important;background:rgba(18,9,35,.42)!important;color:#ffd9f5!important}
a[href="tel:112"]{border-color:#ff5d7a!important;background:#341019!important;color:#ffd3db!important;box-shadow:0 0 18px rgba(255,93,122,.15)}
@media(max-width:760px){
  .shell{padding:10px 11px 60px}
  header{grid-template-columns:98px 1fr 46px;gap:10px;padding-top:8px}
  .logo{width:96px;height:90px}
  .brand-copy h1{font-size:clamp(1.35rem,7vw,2.05rem);line-height:1.02}
  .neon-script{font-size:.92rem}
  .welcome{padding:21px 18px;border-radius:22px}.welcome h2{font-size:clamp(1.6rem,8vw,2.2rem)}
  .tabs{gap:7px}.tabs button{padding:12px 7px;font-size:.82rem;border-radius:16px}
  .tabs button::before{font-size:1.15rem}
  .cards{grid-template-columns:1fr 1fr}.card{min-height:130px;padding:16px}
  .passport-layout,.token-layout{grid-template-columns:1fr}.stamps{grid-template-columns:repeat(2,1fr)}
  .section-title{flex-direction:column}.pill{align-self:flex-start}
  .places{grid-template-columns:1fr 1fr}
}
@media(max-width:470px){
  header{grid-template-columns:82px 1fr 44px}.logo{width:80px;height:78px}
  .brand-copy .kicker{font-size:.58rem}.brand-copy h1{font-size:1.42rem}.neon-script{font-size:.78rem}
  .welcome{margin-top:15px}.resident{font-size:.60rem}
  .tabs{position:sticky;top:0;z-index:20;background:rgba(2,8,23,.88);backdrop-filter:blur(14px);padding:8px 0}
  .tabs button{font-size:.72rem;padding:10px 5px}.cards{grid-template-columns:1fr 1fr;gap:9px}.card{min-height:122px;padding:14px}
  .places{grid-template-columns:1fr}.stamps{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* =========================================================
   V17 - SECOND VISUAL PASS
   Stronger disco/neon presentation + new Passport/Tokens assets.
   App behaviour and live sync remain unchanged.
   ========================================================= */
body.disco-1985{
  background:
    radial-gradient(circle at 78% 2%,rgba(255,66,196,.28),transparent 24rem),
    radial-gradient(circle at 22% 8%,rgba(0,210,255,.20),transparent 25rem),
    radial-gradient(circle at 50% 38%,rgba(109,40,217,.15),transparent 34rem),
    linear-gradient(180deg,#010515 0%,#06112d 47%,#020516 100%);
}
.shell::before{
  content:"";position:absolute;inset:0 -34px auto;height:340px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 80% 34%,rgba(255,187,70,.85) 0 74px,rgba(255,83,175,.58) 75px 108px,transparent 109px),
    linear-gradient(115deg,transparent 18%,rgba(32,217,255,.045) 45%,rgba(255,62,209,.08) 73%,transparent 92%);
  opacity:.34;filter:saturate(1.35);
  mask-image:linear-gradient(to bottom,#000 30%,transparent 100%);
}
header{
  min-height:138px;
  background:linear-gradient(90deg,rgba(2,8,23,.20),rgba(7,19,49,.48),rgba(36,5,51,.22));
  border-radius:24px 24px 0 0;
  padding-left:14px;padding-right:14px;
}
.logo{filter:drop-shadow(0 0 9px rgba(255,62,209,.62)) drop-shadow(0 0 18px rgba(32,217,255,.32));}
.brand-copy h1{
  background:linear-gradient(180deg,#ffffff 8%,#7beaff 40%,#bd8cff 68%,#ff55c9 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 18px rgba(32,217,255,.22),0 0 30px rgba(255,62,209,.20);
}
.neon-script{font-weight:900!important;text-shadow:0 0 5px #ff3ed1,0 0 15px rgba(255,62,209,.72),0 0 32px rgba(255,62,209,.45)!important;}
.welcome{
  border:1px solid rgba(43,221,255,.88);
  background:
    linear-gradient(125deg,rgba(5,18,43,.94),rgba(7,25,62,.91) 55%,rgba(64,10,74,.60)),
    radial-gradient(circle at 87% 10%,rgba(255,62,209,.22),transparent 14rem);
  box-shadow:0 0 0 1px rgba(255,62,209,.20),0 0 30px rgba(32,217,255,.17),0 0 48px rgba(255,62,209,.08),inset 0 0 45px rgba(24,145,255,.06);
}
.welcome::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),var(--gold),transparent);
  box-shadow:0 0 16px var(--pink);
}
.tabs button{border-width:1px;box-shadow:inset 0 0 24px rgba(23,92,173,.10),0 0 10px rgba(32,217,255,.06)}
.tabs button.active{box-shadow:0 0 10px rgba(255,62,209,.52),0 0 28px rgba(255,62,209,.26),inset 0 0 25px rgba(255,62,209,.13)}
.card,.passport-data,.wallet,.place,.detail-box,.install-app-card{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-color:rgba(31,194,255,.45)!important;
  box-shadow:0 0 0 1px rgba(141,76,255,.12),0 0 24px rgba(32,217,255,.08),0 0 34px rgba(255,62,209,.035),inset 0 0 28px rgba(255,255,255,.015);
}
.card:hover,.place:hover{border-color:rgba(255,62,209,.74)!important;box-shadow:0 0 24px rgba(255,62,209,.24),0 0 30px rgba(32,217,255,.13)}
.reference{
  background:#020817;
  border:1px solid rgba(255,184,77,.55);
  box-shadow:0 0 0 1px rgba(255,62,209,.12),0 0 34px rgba(255,62,209,.16),0 0 30px rgba(32,217,255,.09);
  object-fit:cover;
}
#passport .reference,#tokens .reference{max-height:620px;object-fit:contain;background:linear-gradient(145deg,#060815,#110818)}
#passport .section-title h2,#tokens .section-title h2{color:#fff;text-shadow:0 0 16px rgba(255,62,209,.25),0 0 20px rgba(32,217,255,.18)}
#tokens .wallet::before{content:"1 TOKEN = €1";display:block;text-align:center;color:#ffd36b;font-weight:900;letter-spacing:.12em;font-size:.72rem;margin:0 0 14px;text-shadow:0 0 12px rgba(255,184,77,.38)}
.balance{font-size:clamp(3.8rem,8vw,5.3rem)!important;}
.install-app-card{border-color:rgba(255,62,209,.82)!important;background:linear-gradient(120deg,rgba(22,6,48,.90),rgba(5,31,61,.92))!important;}
.install-app-button{border:1px solid rgba(255,255,255,.50)!important;box-shadow:0 0 14px rgba(255,62,209,.48),0 0 30px rgba(38,132,255,.30)!important}
#guestLiveSyncBanner{border-color:rgba(30,224,255,.80)!important;box-shadow:0 0 22px rgba(32,217,255,.16),0 0 32px rgba(255,62,209,.05)!important}
@media(max-width:760px){
  .shell::before{height:260px;inset:0 -12px auto;background:radial-gradient(circle at 80% 25%,rgba(255,187,70,.70) 0 52px,rgba(255,83,175,.46) 53px 76px,transparent 77px);opacity:.28}
  header{min-height:112px;border-radius:18px 18px 0 0}
  .welcome{box-shadow:0 0 22px rgba(32,217,255,.14),0 0 28px rgba(255,62,209,.07)}
  #passport .reference,#tokens .reference{max-height:none;object-fit:contain}
}
@media(max-width:470px){
  body.disco-1985{background:radial-gradient(circle at 83% 0%,rgba(255,62,209,.22),transparent 18rem),radial-gradient(circle at 10% 12%,rgba(32,217,255,.14),transparent 18rem),linear-gradient(180deg,#010515,#06122f 48%,#020516)}
  .welcome h2{color:#ffe0a1;text-shadow:0 0 12px rgba(255,184,77,.46)}
  .reference{border-radius:16px}
}

/* =========================================================
   V18 - WEBSITE STYLE SYNC
   Visual-only upgrade. Existing Guest App logic stays intact.
   ========================================================= */
:root{
  --v18-navy:#020817;--v18-navy2:#07162f;--v18-cyan:#29e7ff;
  --v18-blue:#2498ff;--v18-pink:#ff43d6;--v18-purple:#9b5cff;
  --v18-gold:#ffd276;--v18-cream:#fff0c9;--v18-panel:rgba(4,16,37,.84);
}
body.disco-1985{
  background:
    radial-gradient(circle at 82% 0%,rgba(255,67,214,.22),transparent 28rem),
    radial-gradient(circle at 12% 18%,rgba(41,231,255,.15),transparent 26rem),
    linear-gradient(180deg,#020817 0%,#071a39 42%,#030818 100%);
  min-height:100vh;
}
.shell{position:relative;max-width:1240px;padding-top:18px;overflow:hidden}
.shell:after{content:"";position:absolute;inset:0 0 auto 0;height:620px;z-index:-2;background:
  linear-gradient(180deg,rgba(2,8,23,.18) 0%,rgba(2,8,23,.42) 42%,rgba(2,8,23,.98) 100%),
  url('assets/resort-neon-bg.jpg') center/cover no-repeat;opacity:.72}
.shell:before{height:590px!important;opacity:.22!important}
header{border:1px solid rgba(41,231,255,.20);border-bottom-color:rgba(255,67,214,.32);background:rgba(2,8,23,.55)!important;backdrop-filter:blur(14px);border-radius:24px;padding:10px 16px;box-shadow:0 10px 40px rgba(0,0,0,.16)}
.logo{width:118px!important;height:112px!important;filter:drop-shadow(0 0 12px rgba(41,231,255,.30)) drop-shadow(0 0 16px rgba(255,67,214,.28))!important}
.brand-copy h1{font-family:Arial Black,Arial,sans-serif!important;letter-spacing:.01em;font-size:clamp(2rem,5.4vw,4.1rem)!important;line-height:.95!important;background:linear-gradient(180deg,#fff 0%,#f6fbff 38%,#73e7ff 62%,#e55cff 86%,#ff54d4 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;text-shadow:0 0 24px rgba(41,231,255,.14)!important}
.kicker{color:var(--v18-cyan)!important;letter-spacing:.2em!important;text-shadow:0 0 12px rgba(41,231,255,.28)}
.neon-script{font-size:clamp(1rem,2vw,1.35rem)!important;color:#ff73df!important;font-style:italic;text-shadow:0 0 9px rgba(255,67,214,.9),0 0 20px rgba(255,67,214,.4)!important}
#lang{border-color:var(--v18-cyan)!important;color:white!important;background:rgba(3,14,34,.68)!important;box-shadow:0 0 15px rgba(41,231,255,.18),0 0 18px rgba(255,67,214,.12)}
.welcome{position:relative;margin-top:18px;padding:28px 30px!important;border:1px solid rgba(41,231,255,.62)!important;background:linear-gradient(115deg,rgba(3,13,32,.90),rgba(5,22,52,.84) 50%,rgba(69,9,79,.50))!important;box-shadow:0 0 25px rgba(41,231,255,.11),0 0 32px rgba(255,67,214,.07),inset 0 0 40px rgba(32,130,255,.04)!important}
.welcome h2{font-size:clamp(2rem,5vw,3.6rem)!important;color:var(--v18-cream)!important;text-shadow:0 0 14px rgba(255,210,118,.20)}
.welcome p{color:#eef7ff!important;font-size:1rem}
.resident,.pill{border-color:#f0b75d!important;color:#ffe0a1!important;background:rgba(18,12,34,.55);box-shadow:0 0 13px rgba(240,183,93,.15)}
.tabs{display:grid!important;grid-template-columns:repeat(4,1fr);gap:12px!important;margin:22px 0!important}
.tabs button{min-height:76px;border:1px solid rgba(41,231,255,.65)!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(6,24,54,.92),rgba(3,14,34,.92))!important;color:#f5fbff!important;font-size:.94rem!important;box-shadow:inset 0 0 28px rgba(41,231,255,.05),0 0 15px rgba(41,231,255,.05)!important}
.tabs button:before{display:block;font-size:1.35rem;margin-bottom:6px;color:var(--v18-cyan);text-shadow:0 0 12px rgba(41,231,255,.55)}
.tabs button[data-tab="home"]:before{content:"⌂"}.tabs button[data-tab="passport"]:before{content:"▣"}.tabs button[data-tab="tokens"]:before{content:"◉"}.tabs button[data-tab="explore"]:before{content:"⌖"}
.tabs button.active{border-color:var(--v18-pink)!important;background:linear-gradient(180deg,rgba(63,12,77,.92),rgba(21,10,49,.96))!important;box-shadow:0 0 12px rgba(255,67,214,.45),0 0 28px rgba(255,67,214,.23),inset 0 0 32px rgba(255,67,214,.11)!important}
.tabs button.active:before{color:#ff8fe8;text-shadow:0 0 13px var(--v18-pink)}
.home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}
.stat-card{min-height:116px;padding:17px 18px;border:1px solid rgba(41,231,255,.48);border-radius:18px;background:linear-gradient(155deg,rgba(6,26,58,.92),rgba(3,13,32,.92));display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:12px;box-shadow:0 0 18px rgba(41,231,255,.05)}
.stat-icon{grid-row:1/3;font-size:2rem;color:var(--v18-pink);text-shadow:0 0 16px rgba(255,67,214,.55)}
.stat-card:nth-child(2) .stat-icon,.stat-card:nth-child(3) .stat-icon{color:var(--v18-cyan);text-shadow:0 0 16px rgba(41,231,255,.55)}
.stat-card:nth-child(4) .stat-icon{color:var(--v18-gold);text-shadow:0 0 14px rgba(255,210,118,.38)}
.stat-card strong{font-size:1.8rem;color:var(--v18-cream);line-height:1}.stat-card small{font-size:.7rem;letter-spacing:.11em;color:#b9ccea;font-weight:800}
.cards{grid-template-columns:repeat(2,1fr)!important;gap:16px!important}
.card{min-height:190px!important;border-color:rgba(41,231,255,.45)!important;background:linear-gradient(145deg,rgba(5,20,46,.94),rgba(4,11,29,.95))!important;border-radius:20px!important;box-shadow:0 0 20px rgba(41,231,255,.06),inset 0 0 35px rgba(255,255,255,.012)!important}
.card b{font-size:1.05rem;color:var(--v18-cream)!important}.card span{color:#cad8ec!important}
.feature-card{min-height:330px!important;padding:24px!important;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover!important;background-position:center!important;isolation:isolate}
.feature-card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,8,23,.08) 10%,rgba(2,8,23,.45) 56%,rgba(2,8,23,.97) 100%)}
.passport-feature{background-image:url('assets/village-passport.png')!important}.token-feature{background-image:url('assets/village-tokens.png')!important}
.feature-card b{font-size:1.55rem!important}.feature-card span{font-size:.96rem;max-width:75%}
.section-title{padding:14px 2px}.section-title h2{font-family:Arial Black,Arial,sans-serif!important;font-size:clamp(2rem,4.5vw,3.5rem)!important;color:white!important}
#passport .section-title h2{background:linear-gradient(90deg,#fff,#72e8ff,#ff6edb);-webkit-background-clip:text;background-clip:text;color:transparent!important}
#tokens .section-title h2{background:linear-gradient(90deg,#fff,#ffd37a,#ff62d6);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.passport-layout,.token-layout{gap:20px!important}.reference{border-radius:22px!important;border:1px solid rgba(41,231,255,.55)!important;box-shadow:0 0 25px rgba(41,231,255,.10),0 0 28px rgba(255,67,214,.08)!important}
.passport-data,.wallet{border-radius:22px!important;border:1px solid rgba(41,231,255,.45)!important;background:linear-gradient(145deg,rgba(5,22,50,.95),rgba(4,12,31,.96))!important;box-shadow:0 0 24px rgba(41,231,255,.08)!important}
.passport-data label{color:#8defff!important}.passport-data input{border-color:rgba(41,231,255,.30)!important;background:rgba(2,10,25,.86)!important}
.gold{background:linear-gradient(90deg,#ff43d6,#9b5cff,#29e7ff)!important;color:white!important;border:1px solid rgba(255,255,255,.35)!important;border-radius:999px!important;box-shadow:0 0 20px rgba(255,67,214,.25)!important}
.stamps{grid-template-columns:repeat(6,1fr)!important;gap:10px!important;padding:18px;border:1px solid rgba(41,231,255,.35);border-radius:22px;background:rgba(3,13,32,.72)}
.stamp{aspect-ratio:1!important;border-radius:14px!important;border-style:solid!important;border-color:#315579!important;background:rgba(4,14,34,.90)!important;color:#8299b5!important}
.stamp.collected{border-color:var(--v18-pink)!important;color:#fff!important;background:radial-gradient(circle,rgba(255,67,214,.28),rgba(11,20,51,.96))!important;box-shadow:0 0 16px rgba(255,67,214,.32)!important}
.wallet-label{color:var(--v18-cyan)!important}.balance{color:var(--v18-cream)!important;text-shadow:0 0 18px rgba(255,210,118,.24)!important}.token-actions button{border-color:rgba(255,67,214,.62)!important;background:linear-gradient(180deg,rgba(65,10,74,.88),rgba(11,25,53,.92))!important;box-shadow:0 0 12px rgba(255,67,214,.10)!important}
#tokenHistory,#tokenUse{border-radius:20px!important;border-color:rgba(41,231,255,.38)!important;background:linear-gradient(145deg,rgba(5,21,48,.94),rgba(4,12,30,.95))!important}
.filters{gap:10px!important}.filter{border:1px solid rgba(41,231,255,.42)!important;background:rgba(4,17,39,.86)!important;color:#c8dded!important;border-radius:999px!important}.filter.active{border-color:var(--v18-pink)!important;background:rgba(67,11,78,.82)!important;color:#fff!important;box-shadow:0 0 15px rgba(255,67,214,.18)!important}
.places{grid-template-columns:repeat(3,1fr)!important;gap:14px!important}.place{border-radius:20px!important;border-color:rgba(41,231,255,.42)!important;background:linear-gradient(145deg,rgba(5,22,50,.94),rgba(4,13,32,.95))!important;box-shadow:0 0 18px rgba(41,231,255,.05)!important}.place .type{color:var(--v18-cyan)!important}.place h3{color:var(--v18-cream)!important}
.install-app-card,#guestLiveSyncBanner{border-radius:20px!important;background:linear-gradient(125deg,rgba(19,7,45,.94),rgba(4,28,57,.94))!important;border:1px solid rgba(255,67,214,.55)!important;box-shadow:0 0 22px rgba(255,67,214,.10),0 0 20px rgba(41,231,255,.07)!important}
.install-app-button{border-radius:999px!important;background:linear-gradient(90deg,#ff43d6,#7b52ff,#29e7ff)!important}
@media(max-width:760px){
  .shell{padding:10px 10px 70px!important}.shell:after{height:620px;opacity:.76;background-position:center top}
  header{grid-template-columns:98px 1fr 48px!important;min-height:120px!important}.logo{width:92px!important;height:88px!important}.brand-copy h1{font-size:clamp(1.48rem,7vw,2.35rem)!important}.brand-copy .kicker{font-size:.58rem!important}
  .welcome{padding:20px!important}.welcome h2{font-size:clamp(1.8rem,7.5vw,2.55rem)!important}.resident{margin-top:12px}
  .home-stats{grid-template-columns:1fr 1fr}.stat-card{min-height:104px}.stat-card strong{font-size:1.45rem}
  .cards{grid-template-columns:1fr 1fr!important}.feature-card{min-height:290px!important}
  .stamps{grid-template-columns:repeat(3,1fr)!important}.places{grid-template-columns:1fr 1fr!important}
}
@media(max-width:470px){
  header{grid-template-columns:82px 1fr 44px!important;padding:8px!important}.logo{width:78px!important;height:76px!important}.brand-copy h1{font-size:1.36rem!important}.neon-script{font-size:.76rem!important}
  .welcome{padding:17px!important}.tabs{position:sticky!important;top:0;z-index:50;padding:8px 0;background:rgba(2,8,23,.86);backdrop-filter:blur(14px)}.tabs button{min-height:68px;font-size:.72rem!important;padding:8px 4px!important}
  .home-stats{gap:8px}.stat-card{padding:12px;grid-template-columns:34px 1fr;column-gap:8px}.stat-icon{font-size:1.55rem}.stat-card strong{font-size:1.2rem}.stat-card small{font-size:.58rem}
  .cards{grid-template-columns:1fr!important}.feature-card{min-height:300px!important}.card:not(.feature-card){min-height:115px!important}
  .stamps{grid-template-columns:repeat(3,1fr)!important;padding:12px;gap:7px}.places{grid-template-columns:1fr!important}
}

/* =========================================================
   V20 - Unified Hero Fix
   Merge brand + welcome into one single hero area.
   Functional app behaviour unchanged.
   ========================================================= */
.hero-v21{
  position:relative;
  overflow:hidden;
  margin:0 0 18px;
  border:1px solid rgba(41,231,255,.55);
  border-radius:24px;
  background:
    linear-gradient(90deg,rgba(2,8,23,.95) 0%,rgba(2,8,23,.84) 48%,rgba(2,8,23,.34) 100%),
    url('assets/resort-neon-bg.jpg') center 46%/cover no-repeat;
  box-shadow:0 0 28px rgba(41,231,255,.12),0 0 36px rgba(255,67,214,.08),inset 0 0 55px rgba(31,108,255,.06);
}
.hero-v21:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,#29e7ff 24%,#9b5cff 58%,#ff43d6 82%,transparent);
  box-shadow:0 0 14px rgba(41,231,255,.45),0 0 20px rgba(255,67,214,.28);
}
.hero-v21 header{
  position:relative;
  z-index:1;
  min-height:390px!important;
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr) 58px!important;
  grid-template-rows:auto 1fr auto;
  column-gap:22px!important;
  align-items:start!important;
  padding:28px 30px 26px!important;
  border:0!important;
  background:transparent!important;
}
.hero-v21 .logo{
  width:106px!important;
  height:100px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 10px rgba(41,231,255,.25)) drop-shadow(0 0 14px rgba(255,67,214,.22))!important;
}
.hero-v21 .brand-copy{
  max-width:760px;
  align-self:center;
  padding-top:4px;
}
.hero-v21 .brand-copy h1{
  margin:0 0 7px!important;
  font-size:clamp(2.15rem,5vw,4.15rem)!important;
  line-height:.94!important;
}
.hero-v21 .neon-script{margin:0 0 30px!important}
.hero-welcome{margin-top:0}
.hero-welcome h2{
  margin:0 0 8px!important;
  color:var(--v18-cream)!important;
  font-size:clamp(1.85rem,3.5vw,3rem)!important;
  line-height:1.05!important;
  text-shadow:0 0 14px rgba(255,210,118,.18);
}
.hero-welcome p{
  margin:0!important;
  color:#eef7ff!important;
  font-size:1rem!important;
  text-shadow:0 1px 7px rgba(0,0,0,.65);
}
.hero-v21 #lang{justify-self:end}
.hero-resident{
  grid-column:2/4;
  justify-self:end;
  align-self:end;
  margin-top:18px;
}
/* Old split welcome card is intentionally removed in V20. */
.welcome{display:none!important}

@media(min-width:900px){
  .hero-welcome h2{white-space:nowrap}
}
@media(max-width:760px){
  .hero-v21{border-radius:20px;background-position:62% center}
  .hero-v21 header{
    min-height:370px!important;
    grid-template-columns:86px minmax(0,1fr) 46px!important;
    column-gap:12px!important;
    padding:20px 18px 20px!important;
  }
  .hero-v21 .logo{width:80px!important;height:78px!important}
  .hero-v21 .brand-copy h1{font-size:clamp(1.72rem,7.2vw,2.65rem)!important}
  .hero-v21 .neon-script{margin-bottom:22px!important}
  .hero-welcome h2{font-size:clamp(1.55rem,6.5vw,2.35rem)!important}
  .hero-welcome p{font-size:.9rem!important;max-width:520px}
  .hero-resident{grid-column:2/4;margin-top:14px}
}
@media(max-width:470px){
  .hero-v21{
    background:
      linear-gradient(180deg,rgba(2,8,23,.86) 0%,rgba(2,8,23,.80) 55%,rgba(2,8,23,.62) 100%),
      url('assets/resort-neon-bg.jpg') 68% center/cover no-repeat;
  }
  .hero-v21 header{
    min-height:430px!important;
    grid-template-columns:72px minmax(0,1fr) 42px!important;
    gap:9px!important;
    padding:17px 14px 18px!important;
  }
  .hero-v21 .logo{width:68px!important;height:68px!important}
  .hero-v21 .brand-copy{align-self:start;padding-top:2px}
  .hero-v21 .brand-copy h1{font-size:clamp(1.45rem,8vw,2.05rem)!important;line-height:.98!important}
  .hero-v21 .brand-copy .kicker{font-size:.55rem!important;letter-spacing:.16em!important}
  .hero-v21 .neon-script{font-size:.86rem!important;margin-bottom:28px!important}
  .hero-welcome{grid-column:1/-1;margin-left:-78px;padding-top:82px}
  .hero-welcome h2{font-size:clamp(1.65rem,8.2vw,2.25rem)!important;line-height:1.08!important}
  .hero-welcome p{font-size:.86rem!important;line-height:1.4}
  .hero-resident{grid-column:1/-1;justify-self:start;margin:18px 0 0 0;font-size:.58rem!important}
}

/* =========================================================
   V21 - CLEAN HERO BACKGROUND FIX
   Remove duplicated/ghosted website artwork and glass overlay.
   Keep a single sharp resort background behind the unified hero.
   ========================================================= */
.shell::before,
.shell::after{
  display:none!important;
  content:none!important;
}
.hero-v21{
  background-image:url('assets/resort-clean-bg.jpg')!important;
  background-size:cover!important;
  background-position:center 46%!important;
  background-repeat:no-repeat!important;
  box-shadow:0 0 28px rgba(41,231,255,.12),0 0 36px rgba(255,67,214,.08)!important;
}
.hero-v21 header{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}
.hero-v21:before{display:none!important;content:none!important}
.hero-v21 .brand-copy,
.hero-welcome,
.hero-resident{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.hero-v21 .brand-copy h1,
.hero-v21 .neon-script,
.hero-welcome h2,
.hero-welcome p{
  text-shadow:0 2px 7px rgba(0,0,0,.78),0 0 12px rgba(0,0,0,.30)!important;
}
@media(max-width:760px){
  .hero-v21{background-position:64% center!important}
}
@media(max-width:470px){
  .hero-v21{background-image:url('assets/resort-clean-bg.jpg')!important;background-position:68% center!important}
}

/* =========================================================
   PRIOR HERO BALANCE FIX
   No new artwork. CSS/layout correction only.
   One unified hero: clean navy copy area + sharp resort image.
   ========================================================= */
.hero-v21{
  min-height:0!important;
  background-color:#030a1c!important;
  background-image:url('assets/resort-clean-bg.jpg')!important;
  background-repeat:no-repeat!important;
  background-size:58% 100%!important;
  background-position:right center!important;
  border-color:rgba(41,231,255,.48)!important;
  box-shadow:0 0 24px rgba(41,231,255,.10),0 0 30px rgba(255,67,214,.07)!important;
}
.hero-v21 header{
  min-height:330px!important;
  grid-template-columns:104px minmax(0,1fr) 58px!important;
  grid-template-rows:1fr auto!important;
  column-gap:18px!important;
  padding:24px 28px 22px!important;
}
.hero-v21 .logo{
  width:96px!important;
  height:92px!important;
  align-self:start!important;
}
.hero-v21 .brand-copy{
  max-width:610px!important;
  align-self:center!important;
  padding:0!important;
}
.hero-v21 .brand-copy .kicker{
  color:#49eaff!important;
  text-shadow:0 0 12px rgba(41,231,255,.35)!important;
}
.hero-v21 .brand-copy h1{
  margin:4px 0 8px!important;
  max-width:580px!important;
  font-size:clamp(2.35rem,4.6vw,4rem)!important;
  line-height:.93!important;
  color:#fff!important;
  background:linear-gradient(180deg,#ffffff 0%,#f6fbff 45%,#74e8ff 72%,#e774ff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.38));
}
.hero-v21 .neon-script{
  margin:0 0 20px!important;
  color:#ff77dc!important;
  font-size:clamp(1.08rem,2vw,1.55rem)!important;
  text-shadow:0 0 12px rgba(255,67,214,.38)!important;
}
.hero-welcome{
  margin:0!important;
  padding:0!important;
  max-width:600px!important;
}
.hero-welcome h2{
  margin:0 0 7px!important;
  max-width:600px!important;
  font-size:clamp(1.75rem,3.15vw,2.75rem)!important;
  line-height:1.02!important;
  color:#fff0cf!important;
  text-shadow:0 2px 8px rgba(0,0,0,.88)!important;
}
.hero-welcome p{
  color:#f1f7ff!important;
  font-size:.96rem!important;
  text-shadow:0 2px 7px rgba(0,0,0,.95)!important;
}
.hero-v21 #lang{
  align-self:start!important;
  justify-self:end!important;
  background:rgba(2,8,23,.88)!important;
  border-color:rgba(41,231,255,.70)!important;
  color:#fff!important;
}
.hero-resident{
  grid-column:2/4!important;
  grid-row:2!important;
  justify-self:end!important;
  align-self:end!important;
  margin:0!important;
  background:#071029!important;
  border-color:#d8aa3d!important;
  color:#f4d58c!important;
  box-shadow:0 0 14px rgba(216,170,61,.10)!important;
}
.hero-v21:before{display:none!important;content:none!important}
.hero-v21 header,
.hero-v21 .brand-copy,
.hero-welcome{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

.tabs{margin-top:14px!important}

@media(max-width:900px){
  .hero-v21{
    background-size:54% 100%!important;
    background-position:right center!important;
  }
  .hero-v21 header{
    min-height:310px!important;
    grid-template-columns:88px minmax(0,1fr) 48px!important;
    padding:20px!important;
  }
  .hero-v21 .logo{width:82px!important;height:78px!important}
  .hero-v21 .brand-copy h1{font-size:clamp(2rem,6vw,3.2rem)!important}
}

@media(max-width:620px){
  .hero-v21{
    background-color:#030a1c!important;
    background-image:none!important;
  }
  .hero-v21 header{
    min-height:0!important;
    grid-template-columns:72px minmax(0,1fr) 44px!important;
    grid-template-rows:auto auto!important;
    padding:16px 14px 16px!important;
  }
  .hero-v21 .logo{width:66px!important;height:64px!important}
  .hero-v21 .brand-copy{align-self:start!important}
  .hero-v21 .brand-copy h1{font-size:clamp(1.55rem,8vw,2.15rem)!important;line-height:.96!important}
  .hero-v21 .neon-script{margin-bottom:18px!important;font-size:.9rem!important}
  .hero-welcome{grid-column:auto!important;margin:0!important;padding:0!important}
  .hero-welcome h2{font-size:clamp(1.45rem,7.7vw,2rem)!important;white-space:normal!important}
  .hero-welcome p{font-size:.82rem!important}
  .hero-resident{grid-column:1/-1!important;justify-self:start!important;margin-top:14px!important}
}

/* =========================================================
   PREVIOUS HERO OVERRIDES
   CSS/layout correction only. No new artwork.
   Full-width resort photo + soft left dark gradient.
   Removes the hard 50/50 split from the prior build.
   ========================================================= */
.hero-v21{
  position:relative!important;
  overflow:hidden!important;
  min-height:0!important;
  background-color:#030a1c!important;
  background-image:url('assets/resort-clean-bg.jpg')!important;
  background-size:cover!important;
  background-position:center 58%!important;
  background-repeat:no-repeat!important;
  border-color:rgba(41,231,255,.48)!important;
  box-shadow:0 0 24px rgba(41,231,255,.10),0 0 30px rgba(255,67,214,.07)!important;
}
.hero-v21::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(2,8,23,.98) 0%,
    rgba(2,8,23,.96) 25%,
    rgba(2,8,23,.88) 42%,
    rgba(2,8,23,.66) 57%,
    rgba(2,8,23,.28) 72%,
    rgba(2,8,23,.06) 100%)!important;
}
.hero-v21 header{
  position:relative!important;
  z-index:1!important;
  min-height:330px!important;
  grid-template-columns:104px minmax(0,560px) 1fr!important;
  grid-template-rows:1fr auto!important;
  column-gap:18px!important;
  padding:24px 28px 22px!important;
  background:transparent!important;
}
.hero-v21 .brand-copy{
  max-width:560px!important;
  min-width:0!important;
  align-self:center!important;
  padding:0!important;
}
.hero-v21 .brand-copy h1{
  max-width:550px!important;
  font-size:clamp(2.2rem,4.25vw,3.75rem)!important;
  line-height:.94!important;
}
.hero-welcome{
  max-width:540px!important;
}
.hero-welcome h2{
  max-width:540px!important;
  font-size:clamp(1.65rem,2.75vw,2.45rem)!important;
  line-height:1.04!important;
  white-space:nowrap!important;
}
.hero-welcome p{
  max-width:520px!important;
}
.hero-v21 #lang{
  position:absolute!important;
  top:20px!important;
  right:22px!important;
  z-index:2!important;
}
.hero-resident{
  position:absolute!important;
  right:22px!important;
  bottom:20px!important;
  z-index:2!important;
  margin:0!important;
}

@media(max-width:900px){
  .hero-v21{background-position:58% 58%!important}
  .hero-v21::before{
    background:linear-gradient(90deg,
      rgba(2,8,23,.99) 0%,
      rgba(2,8,23,.96) 33%,
      rgba(2,8,23,.80) 55%,
      rgba(2,8,23,.34) 76%,
      rgba(2,8,23,.08) 100%)!important;
  }
  .hero-v21 header{
    min-height:315px!important;
    grid-template-columns:86px minmax(0,500px) 1fr!important;
    padding:20px!important;
  }
  .hero-v21 .brand-copy h1{font-size:clamp(1.95rem,5.4vw,3.05rem)!important}
  .hero-welcome h2{font-size:clamp(1.55rem,3.6vw,2.1rem)!important}
}

@media(max-width:620px){
  .hero-v21{
    background-image:url('assets/resort-clean-bg.jpg')!important;
    background-size:cover!important;
    background-position:66% center!important;
  }
  .hero-v21::before{
    background:linear-gradient(90deg,
      rgba(2,8,23,.98) 0%,
      rgba(2,8,23,.94) 48%,
      rgba(2,8,23,.70) 72%,
      rgba(2,8,23,.36) 100%)!important;
  }
  .hero-v21 header{
    min-height:360px!important;
    grid-template-columns:68px minmax(0,1fr) 40px!important;
    grid-template-rows:auto auto!important;
    gap:10px!important;
    padding:16px 14px 18px!important;
  }
  .hero-v21 .logo{width:64px!important;height:62px!important}
  .hero-v21 .brand-copy{max-width:none!important;padding-right:2px!important}
  .hero-v21 .brand-copy h1{font-size:clamp(1.48rem,7.4vw,2rem)!important;line-height:.96!important}
  .hero-v21 .neon-script{font-size:.86rem!important;margin-bottom:18px!important}
  .hero-welcome{max-width:none!important}
  .hero-welcome h2{font-size:clamp(1.35rem,6.9vw,1.85rem)!important;white-space:normal!important;max-width:95%!important}
  .hero-welcome p{font-size:.80rem!important;max-width:92%!important}
  .hero-v21 #lang{top:13px!important;right:12px!important}
  .hero-resident{right:12px!important;bottom:14px!important;font-size:.55rem!important}
}

/* =========================================================
   V24 - CLEAN TWO-PART HERO
   Code/CSS correction only. No new artwork.
   Left: clean branded copy panel. Right: clean resort image.
   No text over the photo, no blur, no translucent overlay.
   ========================================================= */
.hero-v21{
  position:relative!important;
  overflow:hidden!important;
  min-height:340px!important;
  background:#020a1d!important;
  background-image:none!important;
  border:1px solid rgba(41,231,255,.42)!important;
  box-shadow:0 0 24px rgba(41,231,255,.08),0 0 28px rgba(255,67,214,.05)!important;
}
.hero-v21::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:52%!important;
  z-index:0!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,#020a1d 0%,#03112a 82%,#061936 100%)!important;
}
.hero-v21::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;right:0!important;bottom:0!important;
  width:52%!important;
  z-index:0!important;
  pointer-events:none!important;
  background:url('assets/resort-clean-bg.jpg') 61% center/cover no-repeat!important;
  border-left:1px solid rgba(41,231,255,.20)!important;
}
.hero-v21 header{
  position:relative!important;
  z-index:2!important;
  min-height:340px!important;
  display:grid!important;
  grid-template-columns:86px minmax(0,520px) 1fr!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:18px!important;
  padding:26px 28px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.hero-v21 .logo{
  width:78px!important;height:78px!important;
  align-self:start!important;margin-top:6px!important;
}
.hero-v21 .brand-copy{
  width:100%!important;max-width:510px!important;min-width:0!important;
  align-self:center!important;padding:0!important;
}
.hero-v21 .brand-copy .kicker{margin-bottom:10px!important}
.hero-v21 .brand-copy h1{
  max-width:500px!important;
  font-size:clamp(2.25rem,4.1vw,3.65rem)!important;
  line-height:.94!important;
  margin:0 0 8px!important;
}
.hero-v21 .neon-script{
  margin:0 0 30px!important;
  font-size:clamp(1rem,1.7vw,1.35rem)!important;
}
.hero-welcome{
  width:100%!important;max-width:500px!important;
  margin:0!important;padding:0!important;
}
.hero-welcome h2{
  max-width:500px!important;
  margin:0 0 7px!important;
  font-size:clamp(1.65rem,2.7vw,2.35rem)!important;
  line-height:1.05!important;
  white-space:normal!important;
}
.hero-welcome p{
  max-width:470px!important;margin:0!important;
  font-size:.96rem!important;line-height:1.35!important;
}
.hero-v21 #lang{
  position:absolute!important;top:18px!important;right:20px!important;z-index:4!important;
}
.hero-resident{
  position:absolute!important;right:20px!important;bottom:18px!important;z-index:4!important;
  margin:0!important;background:rgba(2,8,23,.82)!important;
}

@media(max-width:900px){
  .hero-v21{min-height:320px!important}
  .hero-v21::before{width:55%!important}
  .hero-v21::after{width:47%!important;background-position:64% center!important}
  .hero-v21 header{
    min-height:320px!important;
    grid-template-columns:72px minmax(0,460px) 1fr!important;
    padding:22px 20px!important;
  }
  .hero-v21 .brand-copy h1{font-size:clamp(1.9rem,5vw,3rem)!important}
  .hero-welcome h2{font-size:clamp(1.45rem,3.3vw,2rem)!important}
}

@media(max-width:620px){
  .hero-v21{min-height:0!important;padding:0!important}
  .hero-v21::before{width:100%!important;height:62%!important;bottom:auto!important;background:linear-gradient(180deg,#020a1d 0%,#03142d 100%)!important}
  .hero-v21::after{
    top:auto!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:38%!important;
    background-position:center 58%!important;
    border-left:0!important;border-top:1px solid rgba(41,231,255,.22)!important;
  }
  .hero-v21 header{
    min-height:440px!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr) 38px!important;
    grid-template-rows:auto 1fr!important;
    align-items:start!important;
    gap:8px!important;
    padding:14px 12px 150px!important;
  }
  .hero-v21 .logo{width:54px!important;height:54px!important;margin-top:0!important}
  .hero-v21 .brand-copy{max-width:none!important;padding-right:4px!important}
  .hero-v21 .brand-copy .kicker{font-size:.55rem!important;letter-spacing:.15em!important;margin-bottom:7px!important}
  .hero-v21 .brand-copy h1{font-size:clamp(1.45rem,7vw,2rem)!important;line-height:.96!important;margin-bottom:6px!important}
  .hero-v21 .neon-script{font-size:.82rem!important;margin-bottom:18px!important}
  .hero-welcome{max-width:none!important}
  .hero-welcome h2{font-size:clamp(1.25rem,6.2vw,1.72rem)!important;max-width:100%!important}
  .hero-welcome p{font-size:.77rem!important;max-width:100%!important}
  .hero-v21 #lang{top:12px!important;right:10px!important}
  .hero-resident{right:10px!important;bottom:12px!important;font-size:.53rem!important;background:rgba(2,8,23,.86)!important}
}

/* =========================================================
   V25 - REMOVE FRONT HERO IMAGE/LAYER
   Keep only the page/background behind the hero.
   No hero image, no split panel, no overlay, no blur.
   ========================================================= */
.hero-v21{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
.hero-v21::before,
.hero-v21::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
}
.hero-v21 header{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}
@media(max-width:900px){
  .hero-v21::before,.hero-v21::after{content:none!important;display:none!important}
}
@media(max-width:620px){
  .hero-v21::before,.hero-v21::after{content:none!important;display:none!important}
  .hero-v21 header{padding-bottom:24px!important;min-height:0!important}
}

/* =========================================================
   V26 - RESTORE THE REAR HERO BACKGROUND ONLY
   Remove all front/pseudo hero layers. Keep the real resort
   background directly on the hero itself.
   ========================================================= */
.hero-v21{
  background-image:url('assets/resort-clean-bg.jpg')!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center 56%!important;
  background-color:#020a1d!important;
  box-shadow:0 0 24px rgba(41,231,255,.08)!important;
}
.hero-v21::before,
.hero-v21::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
}
.hero-v21 header{
  background:transparent!important;
  background-image:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}
.hero-v21 .brand-copy,
.hero-welcome{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.hero-v21 .brand-copy h1,
.hero-v21 .neon-script,
.hero-welcome h2,
.hero-welcome p{
  text-shadow:0 2px 6px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.45)!important;
}
@media(max-width:900px){
  .hero-v21{background-position:center 56%!important}
}
@media(max-width:620px){
  .hero-v21{background-position:62% center!important}
  .hero-v21 header{padding-bottom:24px!important;min-height:0!important}
}

/* =========================================================
   V28 - SHARP SOURCE ASSETS + BRIGHT NEON TITLE
   CSS-only correction. No new artwork.
   ========================================================= */
.hero-v21{
  background-image:url('assets/resort-clean-bg.jpg')!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:100% auto!important;
  background-color:#020817!important;
  filter:none!important;
}
.hero-v21,
.hero-v21 header,
.hero-v21 .brand-copy,
.hero-welcome{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.hero-v21::before,
.hero-v21::after{
  content:none!important;
  display:none!important;
  filter:none!important;
}
.hero-v21 .brand-copy h1{
  background:linear-gradient(180deg,
    #ffffff 0%,
    #f8fdff 24%,
    #82efff 50%,
    #61d9ff 64%,
    #b877ff 80%,
    #ff58d6 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 0 8px rgba(255,255,255,.22),0 0 16px rgba(41,231,255,.34),0 0 22px rgba(255,67,214,.24)!important;
  filter:none!important;
  opacity:1!important;
}
.hero-v21 .neon-script{
  color:#ff72df!important;
  text-shadow:0 0 8px rgba(255,67,214,.65),0 0 16px rgba(255,67,214,.32)!important;
  opacity:1!important;
}
.hero-v21 .brand-copy .kicker{
  color:#35eaff!important;
  text-shadow:0 0 9px rgba(41,231,255,.42)!important;
}
.hero-welcome h2{
  color:#fff0c9!important;
  text-shadow:0 1px 3px rgba(0,0,0,.70)!important;
}
.hero-welcome p{
  color:#ffffff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.72)!important;
}
@media(max-width:900px){
  .hero-v21{background-size:auto 100%!important;background-position:center center!important}
}
@media(max-width:620px){
  .hero-v21{background-size:auto 100%!important;background-position:62% center!important}
}

/* ============================================================
   V28 - sharp source assets + clear brand title
   No generated image layers, no blur, no overlays.
   ============================================================ */
.hero-v21{
  background-image:url('assets/resort-clean-bg.jpg')!important;
  background-size:cover!important;
  background-position:center 54%!important;
  background-repeat:no-repeat!important;
  filter:none!important;
  -webkit-filter:none!important;
}
.hero-v21::before,.hero-v21::after{content:none!important;display:none!important;background:none!important;filter:none!important;backdrop-filter:none!important}
.hero-v21 header,.hero-v21 .brand-copy,.hero-welcome{filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;opacity:1!important}
.hero-v21 .logo{
  width:132px!important;
  height:104px!important;
  object-fit:contain!important;
  opacity:1!important;
  filter:drop-shadow(0 0 5px rgba(0,229,255,.9)) drop-shadow(0 0 8px rgba(255,54,207,.72))!important;
}
.hero-v21 .brand-copy h1{
  color:#fff!important;
  background:linear-gradient(90deg,#ffffff 0%,#eafcff 30%,#5eeaff 58%,#bd7dff 79%,#ff67c8 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  opacity:1!important;
  text-shadow:0 0 2px rgba(255,255,255,.9),0 0 8px rgba(54,221,255,.38),0 0 12px rgba(255,65,202,.22)!important;
  filter:none!important;
  font-weight:900!important;
}
.hero-v21 .brand-copy .kicker{color:#49eaff!important;text-shadow:0 0 7px rgba(73,234,255,.42)!important;opacity:1!important}
.hero-v21 .neon-script{color:#ff79d2!important;text-shadow:0 0 8px rgba(255,89,211,.35)!important;opacity:1!important}
.hero-welcome h2{color:#fff0d2!important;text-shadow:0 1px 2px rgba(0,0,0,.75),0 0 5px rgba(255,229,181,.18)!important;opacity:1!important}
.hero-welcome p{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.8)!important;opacity:.96!important}
@media(max-width:760px){
  .hero-v21{background-size:cover!important;background-position:61% center!important}
  .hero-v21 .logo{width:76px!important;height:70px!important}
}

/* =========================================================
   V29 — EXACT WEBSITE HERO ASSET
   Uses the approved V19 website hero crop directly.
   No duplicate logo, no HTML title over photo, no blur/overlay.
   ========================================================= */
.hero-v21.hero-v29{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0 0 14px!important;
  border:1px solid rgba(41,231,255,.42)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:none!important;
  box-shadow:0 0 22px rgba(41,231,255,.08),0 0 18px rgba(255,67,214,.06)!important;
}
.hero-v21.hero-v29::before,
.hero-v21.hero-v29::after{display:none!important;content:none!important}
.hero-v29 .hero-website-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  image-rendering:auto!important;
}
@media(max-width:760px){
  .hero-v21.hero-v29{border-radius:16px!important;margin-bottom:10px!important}
  .hero-v29 .hero-website-image{width:100%!important;height:auto!important}
}


/* =========================================================
   V30 — EXACT USER-SUPPLIED WEBSITE HERO
   Uses a lossless PNG crop from the user's homepage-v19 asset.
   No duplicate HTML logo/title, no overlays, no blur, no filters.
   ========================================================= */
.hero-v21.hero-v30{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0 0 14px!important;
  border:1px solid rgba(41,231,255,.42)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:none!important;
  box-shadow:0 0 22px rgba(41,231,255,.08),0 0 18px rgba(255,67,214,.06)!important;
}
.hero-v21.hero-v30::before,
.hero-v21.hero-v30::after{display:none!important;content:none!important}
.hero-v30 .hero-website-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center top!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  image-rendering:auto!important;
}
@media(max-width:760px){
  .hero-v21.hero-v30{border-radius:16px!important;margin-bottom:10px!important}
  .hero-v30 .hero-website-image{width:100%!important;height:auto!important}
}


/* =========================================================
   V31 — CLEAN WEBSITE HERO CROP
   Removes the baked-in website navigation row and CTA buttons.
   Keeps the approved hero artwork only. No new design.
   ========================================================= */
.hero-v21.hero-v31{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0 0 14px!important;
  border:1px solid rgba(41,231,255,.42)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:none!important;
  box-shadow:0 0 22px rgba(41,231,255,.08),0 0 18px rgba(255,67,214,.06)!important;
}
.hero-v21.hero-v31::before,.hero-v21.hero-v31::after{display:none!important;content:none!important}
.hero-v31 .hero-website-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center top!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  image-rendering:auto!important;
}
@media(max-width:760px){
  .hero-v21.hero-v31{border-radius:16px!important;margin-bottom:10px!important}
  .hero-v31 .hero-website-image{width:100%!important;height:auto!important}
}

/* =========================================================
   V33 — VERIFIED HERO RENDER FIX
   Exact V32 crop asset; fixes malformed CSS that allowed an old
   background image to remain visible underneath the hero image.
   ========================================================= */
.hero-v21.hero-v33{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0 0 14px!important;
  border:1px solid rgba(41,231,255,.42)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:none!important;
  background-image:none!important;
  box-shadow:0 0 22px rgba(41,231,255,.08),0 0 18px rgba(255,67,214,.06)!important;
}
.hero-v21.hero-v33::before,
.hero-v21.hero-v33::after{
  display:none!important;
  content:none!important;
  background:none!important;
}
.hero-v33 .hero-website-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  image-rendering:auto!important;
}
@media(max-width:760px){
  .hero-v21.hero-v33{border-radius:16px!important;margin-bottom:10px!important}
  .hero-v33 .hero-website-image{width:100%!important;height:auto!important}
}


/* =========================================================
   V34 — APPROVED SINGLE HERO IMAGE
   Uses only the user-approved 1536x864 image as the hero.
   No extra logo, text, overlay, background image, crop or blur.
   ========================================================= */
.hero-v21.hero-v34{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0 0 14px!important;
  border:1px solid rgba(41,231,255,.42)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:none!important;
  background-image:none!important;
  box-shadow:0 0 22px rgba(41,231,255,.08),0 0 18px rgba(255,67,214,.06)!important;
}
.hero-v21.hero-v34::before,
.hero-v21.hero-v34::after{
  display:none!important;
  content:none!important;
  background:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}
.hero-v34 .hero-website-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  image-rendering:auto!important;
}
@media(max-width:760px){
  .hero-v21.hero-v34{border-radius:16px!important;margin-bottom:10px!important}
  .hero-v34 .hero-website-image{width:100%!important;height:auto!important}
}


/* =========================================================
   V35 — SIZED APPROVED HERO IMAGE
   Same approved image, no crop, no redesign.
   Desktop hero is constrained to a banner-sized frame.
   ========================================================= */
.hero-v21.hero-v35{
  position:relative!important;
  width:min(100%, 760px)!important;
  max-width:760px!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0 auto 14px!important;
  border:1px solid rgba(41,231,255,.42)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:#020817!important;
  background-image:none!important;
  box-shadow:0 0 22px rgba(41,231,255,.08),0 0 18px rgba(255,67,214,.06)!important;
}
.hero-v21.hero-v35::before,
.hero-v21.hero-v35::after{
  display:none!important;
  content:none!important;
}
.hero-v35 .hero-website-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:428px!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
}
@media (max-width: 900px){
  .hero-v21.hero-v35{
    width:min(100%, 720px)!important;
    max-width:720px!important;
  }
}
@media (max-width: 760px){
  .hero-v21.hero-v35{
    width:100%!important;
    max-width:100%!important;
    border-radius:16px!important;
    margin:0 auto 10px!important;
  }
  .hero-v35 .hero-website-image{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
  }
}


/* =========================================================
   V36 — FULL-WIDTH BANNER HERO
   Exact approved image; fill the app container edge-to-edge.
   Desktop uses a controlled 500px banner height so the hero
   aligns with the full-width tabs/cards without taking the
   whole screen. No distortion: object-fit: cover.
   ========================================================= */
.hero-v21.hero-v36{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  height:500px!important;
  min-height:0!important;
  padding:0!important;
  margin:0 0 14px!important;
  border:1px solid rgba(41,231,255,.42)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:#020817!important;
  box-shadow:0 0 22px rgba(41,231,255,.08),0 0 18px rgba(255,67,214,.06)!important;
}
.hero-v21.hero-v36::before,
.hero-v21.hero-v36::after{display:none!important;content:none!important}
.hero-v36 .hero-website-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  image-rendering:auto!important;
}
@media (max-width:1000px){
  .hero-v21.hero-v36{height:440px!important}
}
@media (max-width:760px){
  .hero-v21.hero-v36{
    height:auto!important;
    aspect-ratio:16/9!important;
    border-radius:16px!important;
    margin-bottom:10px!important;
  }
  .hero-v36 .hero-website-image{
    width:100%!important;height:100%!important;object-fit:contain!important;background:#020817!important
  }
}


/* V37 informational labels for non-opening home cards */
.card small{display:block;margin-top:14px;font-size:.72rem;letter-spacing:.08em;font-weight:800;color:#8fe9ff;opacity:.9}