/* DDSP LUXE demo layer — presentation only. Loaded after the unchanged production styles.
   Adds: champagne-gold accents, cinematic hero media, GCC Knowledge Centre, demo dock + ribbon. */
:root{
  --gold:#D9BC84; --gold2:#F3E2BC; --gold3:#B8904F; --sim:#FFB547;
  --glow:rgba(217,188,132,.30);
}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* typography & accents */
.lux{background:linear-gradient(100deg,#fffaf0 0%,var(--gold2) 30%,var(--gold) 62%,#9fd8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.label::before{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.label{color:var(--gold)}
.btn-primary{background:linear-gradient(120deg,#F6E7C4 0%,#D9BC84 45%,#B8904F 100%);color:#1a1205;box-shadow:0 0 0 1px rgba(243,226,188,.45),0 14px 44px -10px rgba(217,188,132,.55)}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(243,226,188,.8),0 18px 54px -10px rgba(217,188,132,.75)}
.nav.solid{background:rgba(3,6,13,.66);backdrop-filter:blur(18px) saturate(1.4)}
.progress{background:linear-gradient(90deg,var(--gold3),var(--gold2));box-shadow:0 0 10px var(--gold)}
.phase::before{border-color:var(--gold);box-shadow:0 0 14px var(--glow)}
.phases .bar{background:linear-gradient(90deg,var(--gold3),var(--gold2));box-shadow:0 0 12px var(--gold)}
.quote::before,.quote::after{color:var(--gold)}
.panel{box-shadow:0 30px 80px -50px rgba(0,0,0,.9)}

/* cinematic hero media (still image + generated camera move + light FX) */
.hero{isolation:isolate}
.lx-hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.lx-hero-img{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;object-position:68% 50%;opacity:.62;animation:lxCam 40s ease-in-out infinite alternate;will-change:transform}
@keyframes lxCam{0%{transform:scale(1.02) translate3d(0,0,0)}50%{transform:scale(1.1) translate3d(-1.6%,-1%,0)}100%{transform:scale(1.16) translate3d(-3%,.6%,0)}}
.lx-hero-fx{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
.lx-hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(3,6,13,.94) 0%,rgba(3,6,13,.62) 42%,rgba(3,6,13,.25) 75%,rgba(3,6,13,.5) 100%),
  linear-gradient(0deg,var(--bg) 0%,rgba(3,6,13,0) 40%),
  linear-gradient(180deg,rgba(3,6,13,.7) 0%,rgba(3,6,13,0) 22%)}
.lx-media-note{position:absolute;right:24px;bottom:14px;z-index:2;margin:0;font:500 10.5px/1.4 var(--mono);letter-spacing:.04em;color:rgba(170,185,210,.7);max-width:46ch;text-align:right}

/* ---------- real-footage band: seven emirates + 230+ sectors ---------- */
.lx-band{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 150px;overflow:hidden;isolation:isolate;background:#02040A}
.lx-band-media{position:absolute;inset:0;z-index:-1}
#lxReel{display:block;width:100%;height:100%}
.lx-band-copy{max-width:var(--max)}
.lx-band-copy>*{max-width:560px}
.lx-band-stats{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.lx-band-stats b{display:block;font:600 40px/1 var(--head);background:linear-gradient(180deg,#fff,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lx-band-stats span{font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#c3cde0}
.lx-band .lx-media-note{top:18px;bottom:auto}

/* ---------- GCC Knowledge Centre ---------- */
.kc{padding:130px 0 90px;overflow:hidden;isolation:isolate}
.kc-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.kc-bg img{width:100%;height:100%;max-width:none;object-fit:cover;opacity:.22;filter:saturate(.8)}
.kc-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(11,24,52,.35),var(--bg) 72%),linear-gradient(180deg,var(--bg),rgba(3,6,13,.2) 30%,rgba(3,6,13,.2) 70%,var(--bg))}
.kc .lead{max-width:760px}
.kc-sim{color:var(--sim);font-weight:600}
.kc-sel{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 34px}
.kc-sel button{display:inline-flex;align-items:center;gap:9px;font:500 13px/1 var(--mono);letter-spacing:.06em;color:#cfdaee;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:999px;padding:9px 16px 9px 10px;cursor:pointer;transition:all .35s cubic-bezier(.2,.7,.1,1)}
.kc-sel button img{width:22px;height:14px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.kc-sel button:hover{border-color:rgba(243,226,188,.5);color:#fff}
.kc-sel button[aria-selected="true"]{background:linear-gradient(135deg,rgba(243,226,188,.16),rgba(184,144,79,.1));border-color:var(--gold);color:var(--gold2);box-shadow:0 0 24px -6px var(--glow)}
.kc-sel button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.kc-room{position:relative;margin:36px 0 56px;border-block:1px solid rgba(243,226,188,.16);background:#020409;box-shadow:0 0 120px -40px rgba(46,108,223,.45)}
#kcRoom{display:block;width:100%;height:min(calc(100vw * 9 / 16),88vh);min-height:420px}
.kc-room-ui{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:18px 24px;background:linear-gradient(0deg,rgba(2,4,9,.85),rgba(2,4,9,0))}
.kc-cams{display:flex;flex-wrap:wrap;gap:6px}
.kc-cams button{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#d6e0f2;background:rgba(5,10,22,.7);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:999px;padding:9px 14px;cursor:pointer;transition:all .3s}
.kc-cams button:hover{border-color:rgba(243,226,188,.5);color:#fff}
.kc-cams button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold2);background:rgba(243,226,188,.1)}
.kc-cams button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.kc-room-note{margin:0;font:500 11px/1.4 var(--mono);color:rgba(255,194,102,.85);letter-spacing:.04em}
.kc-sub{color:var(--muted);font-size:15px;margin:-10px 0 22px}
.kc-stage{perspective:1900px;padding:0 24px;max-width:1520px;margin:0 auto}
.kc-wall{transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.2,.7,.1,1);transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,0deg))}
.kc-bezel{position:relative;border-radius:20px;padding:10px;background:linear-gradient(160deg,#1C2438,#070B15 40%,#141B2D);box-shadow:0 0 0 1px rgba(243,226,188,.14),0 70px 150px -40px rgba(46,108,223,.5),0 30px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
#kcScreen{display:block;width:100%;border-radius:11px;background:#03060E}
.kc-glare{position:absolute;inset:10px;border-radius:11px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 72%,rgba(217,188,132,.05) 100%)}
.kc-floor{height:90px;margin:0 6%;background:radial-gradient(ellipse at 50% 0%,rgba(217,188,132,.22),rgba(46,108,223,.12) 40%,transparent 70%);filter:blur(12px);transform:translateY(-12px)}
.kc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.kc-facts>div{border-top:1px solid var(--line2);padding-top:16px}
.kc-facts p{font-size:14px;color:#aeb9cf;margin-top:8px}
.kc-facts a{color:#9fd8ff;text-decoration:underline;text-underline-offset:3px}
.kc-k{font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.kc-k.ok{color:var(--ok)} .kc-k.gold{color:var(--gold)} .kc-k.sim{color:var(--sim)}

/* ---------- production 5-layer stack: real footage inside the layers + live functions ---------- */
.lx-live-layer{overflow:hidden;cursor:pointer}
.lx-layer-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;opacity:.42;filter:saturate(1.1) contrast(1.05);pointer-events:none}
.layer.on .lx-layer-vid{opacity:.7}
.lx-l4-live{position:absolute!important;left:16px;top:14px;font:600 10px/1 var(--mono);letter-spacing:.06em;color:var(--ok);background:rgba(3,10,20,.75);border:1px solid rgba(61,255,168,.5);border-radius:6px;padding:5px 7px}
.lx-l4-live.bad{color:#ff8ba3;border-color:rgba(255,90,120,.5)}
.lx-role{cursor:pointer;pointer-events:auto}
.lx-role:hover{border-color:var(--gold)!important;color:#fff!important}
.verify{cursor:pointer}

/* ---------- real footage behind production sections ---------- */
.lx-has-bg{isolation:isolate}
.lx-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.lx-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lx-bg-portrait video{left:auto;right:0;width:46%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.lx-bg-shade{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(3,6,13,.35) 18%,rgba(3,6,13,.45) 82%,var(--bg) 100%),linear-gradient(90deg,rgba(3,6,13,.75),rgba(3,6,13,.15) 70%)}
.lx-bg-credit{position:absolute;right:20px;bottom:12px;margin:0;font:500 10.5px/1.3 var(--mono);color:rgba(170,185,210,.6);letter-spacing:.04em;z-index:2}
.diagram .core{overflow:hidden;isolation:isolate}
.lx-core-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;opacity:.55;z-index:-1;mix-blend-mode:screen}
@media (max-width:720px){.lx-bg-portrait video{width:100%;opacity:.18!important;-webkit-mask-image:none;mask-image:none}.lx-bg-credit{right:12px;left:12px;text-align:right}}

/* ---------- language flags ---------- */
.lx-flag,.nav img.lx-flag{width:22px;height:15px;flex:none;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.lang-btn.lx-has-flag>svg{display:none}
#langMenu button{justify-content:flex-start;gap:10px}
#langMenu button small{margin-inline-start:auto}

/* ---------- working demo tools ---------- */
.tl{padding:110px 0}
.tl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 18px}
.tl-tabs button{font:500 13px/1 var(--mono);letter-spacing:.06em;color:#d6e0f2;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:999px;padding:11px 16px;cursor:pointer}
.tl-tabs button[aria-selected="true"]{border-color:var(--gold);color:var(--gold2);background:rgba(243,226,188,.1)}
.tl-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tl-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.tl .panel:hover{transform:none}
.tl-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.tl-row label,.tl-lbl{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tl-lbl{display:block;margin:6px 0 8px}
.tl input,.tl select,.tl textarea{background:rgba(3,8,18,.7);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--text);font:14px/1.4 Inter,system-ui,sans-serif}
.tl input:focus,.tl select:focus,.tl textarea:focus{outline:0;border-color:var(--gold)}
.tl #vfId{flex:1;min-width:220px;font-family:var(--mono)}
.tl textarea{width:100%;font:12.5px/1.5 var(--mono);resize:vertical;margin-bottom:12px}
.tl .btn{padding:11px 16px;font-size:13.5px}
.tl-file{position:relative;overflow:hidden}
.tl-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.tl-chip{font:500 12px/1 var(--mono);color:var(--gold2);background:rgba(243,226,188,.06);border:1px solid rgba(243,226,188,.35);border-radius:999px;padding:8px 12px;cursor:pointer}
.tl-out{min-height:40px}
.tl-checks{list-style:none;display:grid;gap:6px;margin:6px 0 12px}
.tl-checks li{display:grid;grid-template-columns:22px 210px 1fr;gap:10px;align-items:baseline;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid var(--line);font-size:14px}
.tl-checks li span{font-weight:700}
.tl-checks li.ok span{color:var(--ok)} .tl-checks li.bad span{color:#ff7a92}
.tl-checks li em{font-style:normal;color:var(--muted);font:12.5px/1.4 var(--mono);word-break:break-word}
.tl-stamp{display:inline-block;padding:10px 18px;border-radius:8px;font:700 14px/1 var(--mono);letter-spacing:.18em}
.tl-stamp.ok{color:var(--ok);border:1px solid rgba(61,255,168,.5);background:rgba(61,255,168,.08)}
.tl-stamp.bad{color:#ff8ba3;border:1px solid rgba(255,90,120,.5);background:rgba(255,90,120,.08)}
.tl-meta{color:var(--muted);font:12.5px/1.6 var(--mono);margin-top:10px}
.tl-meta a,.tl-table a,.tl-venue a{color:#9fd8ff;text-decoration:underline}
.tl-bad{color:#ffb3c1}
.tl-sos{display:flex;gap:12px;align-items:baseline;padding:10px 12px;border-radius:8px;background:rgba(255,90,90,.08);border:1px solid rgba(255,120,110,.45);margin-bottom:8px}
.tl-sos em{color:var(--muted);font:12px var(--mono);font-style:normal}
.tl-table{overflow-x:auto}
.tl-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.tl-table th,.tl-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tl-table th{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.st-valid{color:var(--ok)} .st-expired{color:#ffb547} .st-revoked{color:#ff7a92}
.tl-venues{display:grid;gap:8px}
.tl-venue{display:grid;grid-template-columns:1.3fr 1.3fr 1fr auto auto;gap:12px;align-items:center;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:13.5px}
.tl-venue span,.tl-venue em{color:var(--muted);font-style:normal}
.tl-venue i{font-style:normal;font:600 12px var(--mono)}
.tl-log{list-style:none;display:grid;gap:6px;font:12px/1.4 var(--mono);color:#cfe0f5;min-height:60px}
.tl-log li{padding-bottom:6px;border-bottom:1px dashed var(--line)}
@media (max-width:960px){.tl-grid{grid-template-columns:1fr}.tl-checks li{grid-template-columns:22px 1fr}.tl-checks li em{grid-column:2}.tl-venue{grid-template-columns:1fr 1fr}}

/* ---------- demo form marking ---------- */
.lx-formdemo{margin:0 0 20px;padding:11px 14px;border-radius:10px;font:500 12.5px/1.5 var(--mono);color:#ffd9a0;background:rgba(255,181,71,.08);border:1px solid rgba(255,181,71,.45)}
.lx-formdemo b{color:var(--sim)}
.status.demo{display:block;background:rgba(255,181,71,.08);border:1px solid rgba(255,181,71,.45);color:#ffdcaa}
.status.demo code{font-family:var(--mono);color:#fff}

/* ---------- ribbon + dock ---------- */
.lx-ribbon{position:fixed;left:0;right:0;bottom:0;z-index:8000;padding:6px 16px;text-align:center;font:500 11.5px/1.4 var(--mono);letter-spacing:.03em;color:#ffd9a0;background:rgba(18,12,2,.88);backdrop-filter:blur(8px);border-top:1px solid rgba(255,181,71,.4)}
.lx-ribbon b{color:var(--sim);font-weight:600}
.lx-dock{position:fixed;right:16px;bottom:42px;z-index:8001;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:rgba(5,10,22,.82);backdrop-filter:blur(14px);border:1px solid rgba(243,226,188,.22);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lx-dock button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;border:1px solid transparent;background:transparent;color:#dfe7f5;font:500 12px/1 var(--mono);letter-spacing:.06em;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.lx-dock button em{font-style:normal}
.lx-dock button span{font-size:11px;width:12px;text-align:center}
.lx-dock button:hover{background:rgba(243,226,188,.08);border-color:rgba(243,226,188,.3)}
.lx-dock button[aria-pressed="true"]{color:var(--gold2);border-color:rgba(243,226,188,.5);background:rgba(243,226,188,.08)}
.lx-dock button:focus-visible,.lx-dock input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lx-vol{display:flex;align-items:center;padding:0 10px 0 4px}
.lx-vol[hidden]{display:none}
.lx-vol input{width:90px;accent-color:var(--gold)}
.consent-bar{bottom:96px}

/* pause: freeze CSS motion everywhere */
.is-paused *,.is-paused *::before,.is-paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .lx-hero-img{animation:none;transform:scale(1.04)}
}
@media (max-width:960px){
  .kc-facts{grid-template-columns:1fr}
  .lx-hero-img{object-position:72% 50%;opacity:.5}
}
@media (max-width:720px){
  .kc{padding:96px 0 70px}
  .lx-band{padding:90px 0 140px;min-height:92vh}
  .lx-band .lx-media-note{display:none}
  .lx-band-stats b{font-size:32px}
  #kcRoom{height:118vw;min-height:0}
  .kc-room-ui{position:static;padding:12px 16px;background:#020409}
  .kc-cams button{padding:8px 11px;font-size:11px}
  .kc-stage{padding:0 10px}
  .kc-wall{transform:none!important}
  .kc-bezel{padding:6px;border-radius:14px}
  .kc-glare{inset:6px}
  .lx-dock{left:50%;right:auto;transform:translateX(-50%);bottom:40px}
  .lx-dock button em{display:none}
  .lx-dock button{padding:0 12px}
  .lx-vol input{width:70px}
  .lx-media-note{left:16px;right:16px;bottom:8px;text-align:left}
  .lx-ribbon{font-size:10.5px}
  .consent-bar{bottom:92px}
}