/* ============================================================
   Q.M.P — SPACE THEME v2 (additive layer)
   A futuristic redesign skin over the untouched site styles:
   every page is a world, the hero is a glowing portal, services
   are portal windows, buttons are light-rimmed capsules.
   Brand thread stays navy + gold (#d4af37). Original text,
   links and prices are never altered by this file.
   ============================================================ */

/* ---------- Per-world palettes, scenery & dark scheme ---------- */
html.world-mars         { --navy:#33150a; --navy-2:#57230f; --navy-deep:#1f0d06; --w-glow:#ff9a56; --w-img:url("space/mars.jpg");
  --paper:#150905; --paper-2:#221006; --line:#57331a; }
html.world-nebula       { --navy:#1c0f3d; --navy-2:#2e1a5e; --navy-deep:#120826; --w-glow:#a58bff; --w-img:url("space/nebula.jpg");
  --paper:#0b0618; --paper-2:#160c2c; --line:#37256b; }
html.world-station      { --navy:#0d2440; --navy-2:#173d66; --navy-deep:#081627; --w-glow:#6fc3ff; --w-img:url("space/station.jpg");
  --paper:#040d19; --paper-2:#081a30; --line:#274a75; }
html.world-aurora       { --navy:#07301f; --navy-2:#0c4a30; --navy-deep:#04190f; --w-glow:#3fe0a8; --w-img:url("space/aurora.jpg");
  --paper:#02100a; --paper-2:#052117; --line:#14513c; }
html.world-asteroids    { --navy:#2b1e0c; --navy-2:#4a3413; --navy-deep:#1a1206; --w-glow:#ffb84d; --w-img:url("space/asteroids.jpg");
  --paper:#100a03; --paper-2:#1d1206; --line:#4f3a16; }
html.world-solar        { --navy:#3d0d12; --navy-2:#61161c; --navy-deep:#26060a; --w-glow:#ff7847; --w-img:url("space/solar.jpg");
  --paper:#150405; --paper-2:#24070b; --line:#5e2126; }
html.world-constellation{ --navy:#131f4d; --navy-2:#21337a; --navy-deep:#0a1030; --w-glow:#8fb0ff; --w-img:url("space/constellation.jpg");
  --paper:#050922; --paper-2:#0a1334; --line:#2b3f85; }
html.world-earth        { --navy:#0a2e3a; --navy-2:#11495c; --navy-deep:#06222b; --w-glow:#39d0c4; --w-img:url("space/earth.jpg");
  --paper:#031318; --paper-2:#06222c; --line:#175263; }
html.world-earthrise    { --navy:#2a1e24; --navy-2:#45303a; --navy-deep:#191016; --w-glow:#ffc98a; --w-img:url("space/earthrise.jpg");
  --paper:#110a0e; --paper-2:#1e1219; --line:#52393f; }
html.world-deepfield    { --navy:#0c1730; --navy-2:#16264d; --navy-deep:#05070f; --w-glow:#7f9cc9; --w-img:url("space/deepfield.jpg");
  --paper:#03050c; --paper-2:#070e1e; --line:#22355c; }
html.world-dock         { --navy:#0c2b2e; --navy-2:#17464c; --navy-deep:#071a1c; --w-glow:#4fd8c8; --w-img:url("space/dock.jpg");
  --paper:#031112; --paper-2:#061e20; --line:#1b4b50; }
html.world-hq           { --navy:#12283f; --navy-2:#1f4066; --navy-deep:#0b1727; --w-glow:#ffd98a; --w-img:url("space/hq.jpg");
  --paper:#050e18; --paper-2:#0a1a2e; --line:#2a4a6b; }
html.world-satellite    { --navy:#1a1440; --navy-2:#2c2169; --navy-deep:#0d0a24; --w-glow:#59e0ff; --w-img:url("space/satellite.jpg");
  --paper:#07051a; --paper-2:#0f0a2f; --line:#372b75; }

/* Legal pages: deep-space starfield world */
html.world-legal { --navy:#0d1f42; --navy-2:#12294f; --navy-deep:#050b1a; --w-glow:#8fb0ff; --w-img:none;
  --paper:#070d1f; --paper-2:#0b1526; --ink:#e8edf7; --ink-soft:#aebadd; --line:#26355c;
  --shadow:0 14px 34px rgba(0,0,0,.55); }

/* Shared dark-scheme ink for every world */
html[class*="world-"]{
  --ink:#edf1fa; --ink-soft:#a9b6cf;
  --shadow:0 14px 34px rgba(0,0,0,.5);
}
html.world-legal{ --ink:#e8edf7; --ink-soft:#aebadd; }

::selection{ background:var(--gold); color:#221a02; }

/* ---------- Ambient page background: star dust + drifting world glow ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 22px 34px, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 130px 90px, rgba(255,255,255,.45) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 210px 160px, rgba(212,175,55,.65) 50%, transparent 52%),
    radial-gradient(1px 1px at 300px 40px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 70px 190px, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(55% 38% at 82% 0%, rgba(212,175,55,.06), transparent 70%);
  background-size:340px 240px, 340px 240px, 340px 240px, 340px 240px, 340px 240px, 100% 100%;
}
body::after{
  content:""; position:fixed; inset:-6%; z-index:-1; pointer-events:none; opacity:.09; will-change:transform;
  background:
    radial-gradient(52% 38% at 80% 6%, var(--w-glow), transparent 70%),
    radial-gradient(44% 34% at 10% 94%, var(--w-glow), transparent 70%);
  animation:qmpDrift 19s ease-in-out infinite alternate;
}
@keyframes qmpDrift{ from{ transform:translate3d(-1.5%, -1%, 0) scale(1); } to{ transform:translate3d(1.5%, 1.5%, 0) scale(1.05); } }

/* ---------- Headings & text accents on the dark scheme ---------- */
.sec-head h2, .detail-main h3, form h3, .confirm h4, .about-card h3{ color:var(--gold); }
.strip-referral .t{ color:var(--gold); }
.motto{ color:var(--gold); }
.back-link{ color:var(--gold); }
.detail-main a, .about-card a{ color:var(--gold); }
.sec-head p{ color:var(--ink-soft); }
.gal-item figcaption{ color:var(--ink-soft); }

/* ---------- Glass panels ---------- */
.about-card, form, .strip-referral, .confirm{
  background:linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
input, select, textarea{
  background:rgba(255,255,255,.05); border-color:var(--line); color:var(--ink);
}
input::placeholder, textarea::placeholder{ color:rgba(200,212,235,.45); }
select option{ background:#0b1526; color:#edf1fa; }

/* Search + FAQ chat widget: dark glass to match */
.search-results{ background:rgba(9,16,34,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); }
.search-results a{ color:var(--ink); }
.search-results a:hover{ background:rgba(212,175,55,.12); }
.chat-panel{ background:rgba(8,14,30,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(212,175,55,.5); color:var(--ink); }
.chat-msgs .m.bot{ background:rgba(255,255,255,.07); border-color:var(--line); color:var(--ink); }
.chat-chips button{ background:rgba(212,175,55,.08); color:var(--gold); border-color:rgba(212,175,55,.65); }
.chat-input input{ background:rgba(255,255,255,.06); color:var(--ink); }

/* ---------- Nav & footer: glass chrome with star dust ---------- */
.topnav{
  background-color:rgba(4,8,18,.85);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(212,175,55,.55);
  box-shadow:0 6px 28px rgba(0,0,0,.5), 0 1px 18px -6px rgba(212,175,55,.45);
  background-image:
    radial-gradient(1.2px 1.2px at 18px 10px, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 120px 22px, rgba(255,255,255,.45) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 240px 8px, rgba(212,175,55,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 330px 18px, rgba(255,255,255,.5) 50%, transparent 52%);
  background-size:380px 30px;
}
footer{
  border-top:1px solid rgba(212,175,55,.4);
  box-shadow:0 -1px 22px -8px rgba(212,175,55,.35);
  background-image:
    radial-gradient(1.2px 1.2px at 30px 26px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 170px 60px, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 300px 20px, rgba(212,175,55,.65) 50%, transparent 52%),
    radial-gradient(1px 1px at 90px 110px, rgba(255,255,255,.35) 50%, transparent 52%);
  background-size:360px 150px;
}

/* ---------- CAPSULE BUTTONS (sitewide) ---------- */
.btn{
  border-radius:999px; letter-spacing:.02em; position:relative;
  border:1.5px solid rgba(255,233,168,.9);
  box-shadow:0 0 0 1px rgba(212,175,55,.28), 0 8px 24px rgba(0,0,0,.5),
    0 0 18px -6px rgba(212,175,55,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, filter .25s ease;
}
.btn-gold{
  background:linear-gradient(165deg, #f2da8a 0%, var(--gold) 52%, #b28c27 100%);
  color:#1a1202; border-color:#ffe9a8;
}
.btn-gold:hover{
  background:linear-gradient(165deg, #f7e29b 0%, #e3c458 52%, #bd982f 100%);
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(212,175,55,.45), 0 14px 30px rgba(0,0,0,.55),
    0 0 30px -4px rgba(212,175,55,.8), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-outline, .btn-navy{
  background:linear-gradient(165deg, rgba(20,34,66,.72), rgba(7,13,30,.78));
  color:#fff; border-color:rgba(212,175,55,.85);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn-outline:hover, .btn-navy:hover{
  background:linear-gradient(165deg, rgba(30,50,95,.82), rgba(10,19,42,.88));
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(212,175,55,.5), 0 14px 30px rgba(0,0,0,.55),
    0 0 30px -4px var(--w-glow), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn:active{ transform:translateY(0) scale(.98); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.nav-links a.nav-book{
  background:linear-gradient(165deg, rgba(20,34,66,.7), rgba(7,13,30,.8));
  color:var(--gold); border:1.5px solid rgba(212,175,55,.85); border-radius:999px;
  box-shadow:0 0 16px -6px rgba(212,175,55,.7), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.nav-links a.nav-book:hover{
  background:linear-gradient(165deg, #f2da8a, var(--gold) 60%, #b28c27); color:#1a1202;
  transform:translateY(-1px); box-shadow:0 0 26px -4px rgba(212,175,55,.85);
}
.day-badge{
  background:linear-gradient(165deg, rgba(20,34,66,.72), rgba(7,13,30,.8));
  color:var(--gold); border:1.5px solid rgba(212,175,55,.8); border-radius:999px;
  box-shadow:0 0 18px -6px var(--w-glow), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* "More about …" links become mini portal capsules */
.svc-more{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  padding:8px 18px; border-radius:999px; text-decoration:none;
  border:1.5px solid rgba(212,175,55,.8); color:var(--gold);
  background:rgba(212,175,55,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 14px -8px var(--w-glow);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.svc-more:hover{
  background:rgba(212,175,55,.16); transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 22px -6px var(--w-glow);
}

/* Slim capsule divider bars */
.gold-rule{
  width:88px; height:5px; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--gold) 22%, #ffe9a8 50%, var(--gold) 78%, transparent);
  box-shadow:0 0 14px -2px rgba(212,175,55,.7);
}

/* ============================================================
   PORTAL HERO (home)
   JS wraps the hero content in .portal-rim > .portal; without
   JS the v1-style full-bleed hero background still applies.
   ============================================================ */
.hero{
  position:relative; overflow:hidden; isolation:isolate; perspective:1200px;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(170deg, #05070f 0%, var(--navy-deep) 55%, #04060d 100%);
  padding:clamp(26px, 5vw, 54px) 14px clamp(44px, 6vw, 66px);
}
.hero::before{
  content:""; position:absolute; inset:-16% 0; z-index:0;
  background-image:linear-gradient(180deg, rgba(5,6,14,.25) 0%, rgba(5,6,14,.06) 42%, rgba(5,6,14,.45) 100%), var(--w-img);
  background-size:cover; background-position:center 38%;
  transform:translate3d(0, var(--py, 0px), 0) scale(1.04);
  will-change:transform;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 24px 30px, rgba(255,255,255,.95) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 110px 80px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 190px 20px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 260px 110px, rgba(212,175,55,.85) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 60px 150px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 320px 60px, rgba(255,255,255,.7) 50%, transparent 52%);
  background-size:340px 190px;
  animation:qmpTwinkle 4.6s ease-in-out infinite alternate;
}
@keyframes qmpTwinkle{ from{ opacity:.45; } to{ opacity:1; } }
.hero > *{ position:relative; z-index:2; }
.hero h1, .hero .tagline, .hero .subtag{ text-shadow:0 2px 20px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.7); }
.hero .logo-mark img{ filter:drop-shadow(0 6px 22px rgba(0,0,0,.55)); }
.hero.has-portal::before{ display:none; }

/* The glowing rim — an irregular rounded frame, gold light edge */
.portal-rim{
  max-width:1060px; margin:0 auto; position:relative; z-index:2;
  padding:clamp(6px, 1.1vw, 11px);
  border-radius:172px 248px 196px 288px / 138px 178px 228px 158px;
  background:linear-gradient(145deg, #ffedb5 0%, var(--gold) 26%, #6e5511 52%, var(--gold) 78%, #ffe9a8 100%);
  box-shadow:
    0 0 64px -10px rgba(212,175,55,.55),
    0 0 130px -30px var(--w-glow),
    0 34px 80px rgba(0,0,0,.65),
    inset 0 2px 3px rgba(255,255,255,.65),
    inset 0 -3px 6px rgba(0,0,0,.45);
  transform:rotateX(calc(var(--my, 0) * -1.7deg)) rotateY(calc(var(--mx, 0) * 1.7deg))
    scale(calc(1 - var(--py2, 0) * .028));
  transform-style:preserve-3d;
  will-change:transform;
}
.portal{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:164px 240px 188px 280px / 130px 170px 220px 150px;
  background:#070b18;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -40px 80px rgba(0,0,0,.5);
}
/* Layered scene inside the portal — true parallax depths */
.pl{ position:absolute; pointer-events:none; will-change:transform; }
.pl-sky{
  inset:-9% -6%; z-index:0;
  background:url("space/hero-sky.jpg") center 32% / cover no-repeat;
  transform:translate3d(calc(var(--mx, 0) * -7px), calc(var(--py2, 0) * 12px), 0) scale(1.06);
}
.pl-land{
  inset:-9% -6%; z-index:1;
  background:url("space/hero-mars.jpg") center 58% / cover no-repeat;
  transform:translate3d(calc(var(--mx, 0) * -14px), calc(var(--py2, 0) * 26px), 0) scale(1.09);
}
.pl-stars{
  inset:0; z-index:2;
  background-image:
    radial-gradient(1.6px 1.6px at 24px 30px, rgba(255,255,255,.95) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 110px 80px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 190px 20px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 260px 110px, rgba(255,233,168,.9) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 60px 150px, rgba(255,255,255,.55) 50%, transparent 52%);
  background-size:340px 190px;
  animation:qmpTwinkle 5.2s ease-in-out infinite alternate;
}
.pl-ridge{
  left:-7%; right:-7%; bottom:-4%; height:44%; z-index:3;
  background:url("space/hero-ridge.jpg") center 68% / cover no-repeat;
  filter:brightness(.82) saturate(1.12);
  -webkit-mask-image:linear-gradient(to top, #000 42%, transparent 97%);
  mask-image:linear-gradient(to top, #000 42%, transparent 97%);
  transform:translate3d(calc(var(--mx, 0) * -22px), calc(var(--py2, 0) * 40px), 0) scale(1.1);
}
.pl-shade{
  inset:0; z-index:4;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(3,5,12,.42) 100%),
    linear-gradient(180deg, rgba(4,6,16,.42) 0%, rgba(4,6,16,.05) 32%, rgba(4,6,16,.10) 60%, rgba(4,6,16,.58) 100%);
}
.portal-content{
  position:relative; z-index:5; text-align:center;
  padding:clamp(30px, 5.5vw, 56px) clamp(18px, 5vw, 54px) clamp(52px, 8vw, 84px);
  transform:translate3d(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 4px), 0);
  will-change:transform;
}

/* ---------- Skyline band (home): Martian terrain ---------- */
.skyline{ background:var(--navy-deep); }
.skyline img{ opacity:0; }
.skyline::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(180deg, rgba(31,13,6,.35), rgba(31,13,6,0) 40%), var(--w-img);
  background-size:cover; background-position:center 88%;
}
.skyline-cap{ z-index:2; }

/* ============================================================
   GATEWAYS (service & info pages): a portal into the page's world
   JS injects .gateway at the top of each .page-view.
   ============================================================ */
.gateway{
  position:relative; margin:4px 0 22px; padding:clamp(4px, .7vw, 7px);
  border-radius:96px 132px 96px 132px / 62px 78px 62px 78px;
  background:linear-gradient(145deg, #ffedb5 0%, var(--gold) 26%, #6e5511 52%, var(--gold) 78%, #ffe9a8 100%);
  box-shadow:0 0 44px -10px var(--w-glow), 0 22px 48px rgba(0,0,0,.55),
    inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.4);
}
.gw-in{
  position:relative; overflow:hidden; isolation:isolate;
  height:clamp(210px, 36vw, 360px);
  border-radius:90px 126px 90px 126px / 56px 72px 56px 72px;
  background:#070b18;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 -34px 64px rgba(0,0,0,.5);
}
.gw-scene{
  position:absolute; inset:-13% 0; z-index:0;
  background-image:linear-gradient(180deg, rgba(4,6,14,.10), rgba(4,6,14,.30)), var(--w-img);
  background-size:cover; background-position:center 50%;
  will-change:transform;
}
.gw-in::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(3,5,12,.38) 100%),
    radial-gradient(1.4px 1.4px at 30px 26px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 150px 66px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 262px 22px, rgba(255,233,168,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 330px 74px, rgba(255,255,255,.55) 50%, transparent 52%);
  background-size:100% 100%, 360px 110px, 360px 110px, 360px 110px, 360px 110px;
}
.gateway.gw-legal .gw-in{ height:118px; }
.gateway.gw-legal .gw-scene{
  background-image:
    radial-gradient(1.5px 1.5px at 26px 30px, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(1px 1px at 140px 70px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 250px 24px, rgba(212,175,55,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 330px 84px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(60% 90% at 50% 0%, rgba(143,176,255,.20), transparent 70%);
  background-size:360px 120px, 360px 120px, 360px 120px, 360px 120px, 100% 100%;
  background-color:#050b1a;
}

/* ============================================================
   SERVICES AS PORTALS
   ============================================================ */
.svc{
  position:relative;
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 55%), linear-gradient(160deg, var(--navy-2), var(--navy) 72%);
  border:1.5px solid rgba(212,175,55,.75);
  box-shadow:0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
  transform-style:preserve-3d;
  transition:box-shadow .4s ease, transform .45s cubic-bezier(.22,.7,.3,1), border-color .4s ease;
  will-change:transform;
}
.svc:hover, .svc:focus-within, .svc.tilt-on{
  border-color:rgba(255,233,168,.95);
  box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 1px var(--w-glow), 0 0 38px -8px var(--w-glow),
    inset 0 1px 0 rgba(255,255,255,.16);
}
/* The portal window at the top of each service card */
.svc-portal{
  margin:-14px -16px 20px; padding:4px;
  border-radius:74px 96px 74px 96px / 48px 58px 48px 58px;
  background:linear-gradient(145deg, #ffedb5 0%, var(--gold) 30%, #6e5511 55%, var(--gold) 82%, #ffe9a8 100%);
  box-shadow:0 0 26px -8px var(--w-glow), 0 14px 30px rgba(0,0,0,.5),
    inset 0 1px 2px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.4);
  transform:translateZ(28px);
}
.svc-portal-in{
  position:relative; overflow:hidden; height:158px;
  border-radius:70px 92px 70px 92px / 44px 54px 44px 54px;
  background-color:#070b18; background-size:cover; background-position:center 50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 -26px 44px rgba(0,0,0,.5);
}
.svc-portal-in::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 95% at 50% 40%, transparent 56%, rgba(3,5,12,.40) 100%),
    linear-gradient(180deg, rgba(4,6,14,.05), rgba(4,6,14,.26));
  transition:opacity .4s ease;
}
.svc-portal-in{ transition:transform .5s cubic-bezier(.22,.7,.3,1); }
.svc:hover .svc-portal-in, .svc.tilt-on .svc-portal-in{ transform:scale(1.045); }

/* Keep the tooltip "world peek" — restyled as a glass capsule card */
.svc-tip{
  position:absolute; top:-18px; right:12px; z-index:30; width:236px; max-width:74vw;
  border:1.5px solid rgba(255,233,168,.9); border-radius:22px; overflow:hidden;
  background:rgba(7,12,26,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 50px rgba(0,0,0,.6), 0 0 26px -8px var(--w-glow);
  opacity:0; transform:translateY(12px) scale(.94); transform-origin:top right;
  pointer-events:none; transition:opacity .34s ease, transform .34s cubic-bezier(.22,.7,.3,1);
}
.svc-tip img{ display:block; width:100%; height:118px; object-fit:cover; }
.svc-tip span{
  display:block; padding:10px 14px; color:#f4f6fb; font-size:.8rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.svc-tip span i{ display:block; font-style:normal; color:var(--gold); font-size:.68rem; letter-spacing:.22em; margin-bottom:2px; }
.svc:hover .svc-tip, .svc:focus-within .svc-tip, .svc.tip-open .svc-tip{
  opacity:1; transform:translateY(0) scale(1);
}

/* Trust cards + detail side panels join the glow family */
#trust .tcard, .detail-side{
  box-shadow:0 16px 38px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transition:box-shadow .35s ease, transform .35s ease;
}
#trust .tcard:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 46px rgba(0,0,0,.55), 0 0 0 1px var(--w-glow), 0 0 26px -8px var(--w-glow);
}
.gal-item button, .svc-vid{ transition:box-shadow .35s ease; }
.gal-item button:hover, .svc-vid:hover{ box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 26px -8px var(--w-glow); }
.badge{ box-shadow:var(--shadow), 0 0 44px -12px rgba(212,175,55,.65); }

/* ============================================================
   STEP-THROUGH SCROLL REVEALS
   Content is never hidden without JS (html.qmp-js gates this).
   ============================================================ */
html.qmp-js .rv{
  opacity:0; transform:translateY(34px) scale(.965); filter:blur(6px);
  transition:opacity .85s cubic-bezier(.22,.7,.3,1), transform .85s cubic-bezier(.22,.7,.3,1), filter .85s cubic-bezier(.22,.7,.3,1);
  transition-delay:var(--rvd, 0s);
}
html.qmp-js .rv[data-flat]{ filter:none; }
html.qmp-js .rv.in{ opacity:1; transform:none; filter:none; }

/* ---------- Small screens ---------- */
@media (max-width:720px){
  .portal-rim{ border-radius:104px 138px 112px 152px / 84px 104px 128px 96px; }
  .portal{ border-radius:98px 132px 106px 146px / 78px 98px 122px 90px; }
  .portal-content{ padding-bottom:58px; }
  .pl-ridge{ height:38%; }
  .gateway{ border-radius:56px 72px 56px 72px / 40px 48px 40px 48px; }
  .gw-in{ height:clamp(170px, 52vw, 230px); border-radius:52px 68px 52px 68px / 36px 44px 36px 44px; }
  .gateway.gw-legal .gw-in{ height:88px; }
  .svc-portal{ margin:-10px -10px 16px; border-radius:52px 66px 52px 66px / 36px 42px 36px 42px; }
  .svc-portal-in{ height:132px; border-radius:48px 62px 48px 62px / 32px 38px 32px 38px; }
  .svc-tip{ width:206px; top:-12px; right:8px; }
  .svc-tip img{ height:100px; }
}

/* ============================================================
   v3 — IMMERSIVE WORLDS, FORTUNE-500 TYPE, PACKAGES & DEALS
   The landscape is no longer framed and finished at the hero:
   each page's world scene is its living full-page backdrop,
   portals are openings in that same world, and content floats
   over it on glass. Type upgrades to Space Grotesk + Inter.
   ============================================================ */

/* ---------- Typography: corporate display + body pairing ---------- */
body{ font-family:'Inter','Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; letter-spacing:.008em; }
h1, h2, h3{ font-family:'Space Grotesk','Playfair Display',Georgia,sans-serif; letter-spacing:.012em; }
.hero h1{ letter-spacing:.03em; }
.sec-head h2{
  font-size:clamp(1.75rem, 4.6vw, 2.55rem); letter-spacing:.018em;
  text-shadow:0 0 30px rgba(212,175,55,.30);
}
.btn, .svc-more, .nav-links a{ font-family:'Space Grotesk','Poppins',sans-serif; letter-spacing:.045em; }
.detail-side .amt{ font-family:'Space Grotesk','Playfair Display',sans-serif; letter-spacing:.01em; }
.pkg-price{ font-family:'Space Grotesk','Playfair Display',sans-serif; }

/* ---------- The living world backdrop (JS injects .world-bg) ---------- */
.world-bg{
  position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none;
  background:var(--navy-deep);
}
.wb-drift{
  position:absolute; inset:-4%; will-change:transform;
  animation:qmpDrift 26s ease-in-out infinite alternate;
}
.wb-scene{
  position:absolute; inset:-7%;
  background-image:var(--w-img);
  background-size:cover; background-position:center 42%;
  filter:saturate(1.32) contrast(1.07) brightness(.96);
  transform:translate3d(0, calc(var(--depth, 0) * -38px), 0) scale(1.13);
  will-change:transform;
}
/* Grade: world glow up top, deep veil below, cinematic vignette */
.world-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 92% at 50% 44%, transparent 52%, rgba(2,4,10,.50) 100%),
    radial-gradient(58% 34% at 84% -4%, var(--w-glow), transparent 70%),
    linear-gradient(180deg, rgba(3,6,14,.46) 0%, rgba(3,6,14,.34) 30%, rgba(3,6,14,.38) 68%, rgba(2,4,10,.74) 100%);
  opacity:.92;
}
/* Legal worlds keep the conservative starfield — just a touch deeper */
html.world-legal .wb-scene{
  background-color:#050b1a;
  background-image:
    radial-gradient(1.5px 1.5px at 26px 30px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 140px 70px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 250px 24px, rgba(212,175,55,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 330px 84px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 80px 150px, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(70% 46% at 50% 0%, rgba(143,176,255,.14), transparent 70%);
  background-size:360px 200px, 360px 200px, 360px 200px, 360px 200px, 360px 200px, 100% 100%;
  filter:none;
}

/* Twinkling star dust on every page (opacity-only pulse) */
body::before{ animation:qmpStarPulse 5.4s ease-in-out infinite alternate; }
@keyframes qmpStarPulse{ from{ opacity:.72; } to{ opacity:1; } }
/* A little more of the world's colour in the ambient glow */
body::after{ opacity:.13; }

/* ---------- Readability veils over the living world ---------- */
.page-view p, .page-view li,
.sec-head p, .skyline-cap, .gal-item figcaption{
  text-shadow:0 1px 12px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.45);
}
.detail-main{
  background:linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px, 3.4vw, 32px);
  backdrop-filter:blur(10px) saturate(1.25); -webkit-backdrop-filter:blur(10px) saturate(1.25);
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Footer becomes the landscape's ground, not a flat block */
footer{ background-color:rgba(3,6,14,.66); }

/* ---------- Scene pop inside portals & gateways ---------- */
.gw-scene{ filter:saturate(1.26) contrast(1.05); }
.svc-portal-in{ filter:saturate(1.18) contrast(1.04); }

/* ============================================================
   PACKAGES & DEALS
   ============================================================ */
.pkg-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  max-width:1060px; margin:10px auto 0; align-items:stretch;
}
.detail-main .pkg-grid{ grid-template-columns:1fr; max-width:560px; margin:6px 0 18px; }
.pkg-card{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 55%), linear-gradient(160deg, var(--navy-2), var(--navy) 72%);
  border:1.5px solid rgba(212,175,55,.65); border-radius:20px;
  padding:28px 26px 26px; color:var(--card-text);
  box-shadow:0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .35s cubic-bezier(.22,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.pkg-card:hover{
  transform:translateY(-4px); border-color:rgba(255,233,168,.95);
  box-shadow:0 28px 56px rgba(0,0,0,.6), 0 0 34px -8px var(--w-glow), inset 0 1px 0 rgba(255,255,255,.16);
}
.pkg-card.pkg-featured{
  border:2px solid rgba(255,233,168,.95);
  box-shadow:0 22px 50px rgba(0,0,0,.55), 0 0 40px -8px rgba(212,175,55,.65), inset 0 1px 0 rgba(255,255,255,.16);
}
.pkg-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  padding:6px 16px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(165deg, #f2da8a, var(--gold) 60%, #b28c27);
  color:#1a1202; font-family:'Space Grotesk',sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  box-shadow:0 8px 20px rgba(0,0,0,.45), 0 0 18px -4px rgba(212,175,55,.8);
}
.pkg-tag{
  color:var(--w-glow); font-size:.74rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; margin-bottom:6px;
}
.pkg-card h3{ color:var(--gold); font-size:1.32rem; margin:0 0 8px; letter-spacing:.02em; }
.pkg-price{ font-size:2.1rem; font-weight:700; color:#fff; line-height:1.15; margin:2px 0 14px; }
.pkg-price .pkg-from{
  font-size:.82rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--card-sub); vertical-align:.55em;
}
.pkg-price.pkg-quote{ font-size:1.45rem; padding-top:.45em; }
.pkg-price.pkg-quote span{ display:block; font-size:.95rem; font-weight:500; color:var(--card-sub); letter-spacing:.02em; margin-top:2px; }
.pkg-card .ticks{ margin:0 0 20px; }
.pkg-card .ticks li{ color:var(--card-text); font-size:1rem; }
.pkg-card .ticks li::before{ border-color:var(--gold); }
.pkg-btn{ margin-top:auto; justify-content:center; text-align:center; }
.pkg-deals{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  max-width:1060px; margin:26px auto 6px;
}
.detail-main .pkg-deals{ justify-content:flex-start; margin:0 0 20px; }
.pkg-deal{
  padding:9px 20px; border-radius:999px;
  border:1.5px solid rgba(212,175,55,.8); color:var(--gold);
  background:rgba(212,175,55,.08);
  font-family:'Space Grotesk',sans-serif; font-size:.86rem; font-weight:600; letter-spacing:.06em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 16px -8px var(--w-glow);
}
@media (max-width:860px){
  .pkg-grid{ grid-template-columns:1fr; max-width:520px; }
  .pkg-card.pkg-featured{ margin-top:10px; }
}

/* ---------- v3 reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .wb-drift{ animation:none; }
  .wb-scene{ transform:none; }
  body::before{ animation:none; }
  .pkg-card{ transition:none; }
  .pkg-card:hover{ transform:none; }
}

/* ---------- Reduced motion: everything settles, nothing hides ---------- */
@media (prefers-reduced-motion: reduce){
  .hero::before, .pl-sky, .pl-land, .pl-ridge, .portal-content, .portal-rim{ transform:none; }
  .hero::after, .pl-stars, body::after{ animation:none; }
  html.qmp-js .rv{ opacity:1; transform:none; filter:none; transition:none; }
  .svc-tip, .svc, .svc-portal-in, .btn{ transition:none; }
  .svc:hover .svc-portal-in{ transform:none; }
}