/* ============================================================
   PRESENCE BY ANIMWEB — ULTRA ROYAL LUXURY LAYER
   v2.0 · Engineered by AwT Labs · Animweb Technologies
   Builds on attendx.css + presence.css tokens.
   Override cascade: attendx → presence → luxury (this file)
   ============================================================ */

/* ── LUXURY TOKEN OVERRIDES ───────────────────────────────── */
:root {
  /* Richer, deeper palette */
  --paper:          #FAF7F0;            /* warm antique ivory */
  --paper-deep:     #F0E8D8;            /* antique parchment */
  --paper-light:    #FFFEF9;            /* near-white warm */
  --ink:            #07060A;            /* near-pure obsidian */
  --ink-soft:       #0C1D33;            /* deep midnight blue */
  --brand:          #C09B2C;            /* rich burnished gold */
  --brand-deep:     #9A7A18;            /* dark oxidised gold */
  --brand-soft:     #DEC26E;            /* pale champagne gold */
  --brand-light:    #F8F0D8;            /* gold wash */
  --forest:         #C09B2C;
  --forest-deep:    #9A7A18;
  --terracotta:     #7B0D1E;            /* deep claret wine */
  --ochre:          #D4A820;            /* bright gold */
  --muted:          #6A5C4A;            /* warm umber */
  --rule:           #E2D5C0;            /* antique cream rule */
  --rule-soft:      #ECE4D4;            /* lighter parchment */
  --shadow-color:   7 6 10;             /* obsidian warm shadow */

  /* Luxury extras */
  --gold-gradient:  linear-gradient(135deg, #C09B2C 0%, #DEC26E 40%, #C09B2C 70%, #9A7A18 100%);
  --gold-gradient-h:linear-gradient(90deg, #9A7A18 0%, #C09B2C 30%, #DEC26E 60%, #C09B2C 85%, #9A7A18 100%);
  --glass-bg:       linear-gradient(145deg, rgba(255,255,255,.7) 0%, rgba(250,247,240,.55) 100%);
  --glass-border:   rgba(192,155,44,.22);
  --deep-shadow:    0 8px 40px -12px rgba(7,6,10,.18), 0 2px 12px -4px rgba(7,6,10,.1), 0 1px 3px rgba(7,6,10,.06);
  --card-shadow:    0 4px 24px -8px rgba(7,6,10,.14), 0 1px 6px -2px rgba(7,6,10,.08);
  --hover-shadow:   0 16px 48px -16px rgba(7,6,10,.22), 0 4px 16px -4px rgba(192,155,44,.15);
  --luxury-radius:  1.1rem;
  --luxury-radius-sm: .75rem;
}

/* ── BASE ENHANCEMENTS ────────────────────────────────────── */
/* Richer body texture — heavier silk grain */
body::before{
  opacity: .14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .04 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Deeper, warmer vignette */
body::after{
  background: radial-gradient(130% 90% at 50% 0%, transparent 55%, rgb(var(--shadow-color) / .1));
}

/* ── LUXURY SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar{ width: 6px; height: 6px; }
::-webkit-scrollbar-track{ background: var(--paper-deep); }
::-webkit-scrollbar-thumb{ background: var(--brand-soft); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover{ background: var(--brand); }

/* ── NAV TICKER — gold shimmer line ──────────────────────── */
.nav-ticker{
  background: linear-gradient(180deg,
    var(--paper-light) 0%,
    color-mix(in oklab, var(--brand) 6%, var(--paper)) 100%);
  border-bottom-color: var(--rule);
}
.nav-ticker::after{
  background: var(--gold-gradient-h);
  opacity: .45;
  height: 1px;
  bottom: -1px;
}

/* ── NAVIGATION ───────────────────────────────────────────── */
.nav{
  background: color-mix(in oklab, var(--paper-light) 95%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 0 rgba(192,155,44,.1);
}

/* Gold underline on nav hover */
.nav-links > a::after{ background: var(--brand); }
.nav-links > a:hover{ color: var(--brand); }

.nav-cta{
  background: var(--ink);
  border-color: var(--ink);
  letter-spacing: .16em;
  box-shadow: 0 2px 8px rgba(7,6,10,.2);
}
.nav-cta:hover{
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(192,155,44,.35);
}

/* ── PLATFORM RIBBON — gold gradient border ───────────────── */
.platform-ribbon{
  position: relative;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--brand) 7%, var(--paper)) 0%,
    var(--paper-light) 40%,
    color-mix(in oklab, var(--brand) 5%, var(--paper)) 100%);
}
.platform-ribbon::before{
  background: var(--gold-gradient-h);
  opacity: .35;
  height: 1px;
}
.platform-ribbon::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--gold-gradient-h);
  opacity: .2;
  pointer-events: none;
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{
  position: relative;
  padding-bottom: clamp(4rem, 10vh, 8rem);
}
/* Luxury gold accent line above hero headline */
.hero::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold-gradient-h);
  opacity: .6;
  z-index: 0;
}

.hero-headline{
  background: linear-gradient(170deg, var(--ink) 0%, var(--ink) 60%, color-mix(in oklab, var(--brand) 80%, var(--ink)) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.hero-headline em{
  -webkit-text-fill-color: var(--brand);
          color: var(--brand);
}

.hero-meta{ border-bottom-color: var(--rule); }

.hero-foot{ border-top-color: var(--rule); }

/* Gold shimmer on hero lede em */
.hero-lede em{ color: var(--brand); font-style: italic; }

/* Product strip luxury */
.product-strip{
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--brand) 8%, var(--paper)) 0%,
    color-mix(in oklab, var(--brand) 5%, var(--paper)) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--luxury-radius);
  padding: .9rem 1.4rem;
  box-shadow: var(--card-shadow);
}

/* ── BTN PRIMARY — gold luxury ───────────────────────────── */
.btn.primary{
  background: var(--gold-gradient);
  border: none;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .1em;
  box-shadow: 0 4px 20px rgba(192,155,44,.3), 0 1px 4px rgba(7,6,10,.15);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  transition: all .3s cubic-bezier(.22,.9,.32,1);
}
.btn.primary:hover{
  box-shadow: 0 8px 32px rgba(192,155,44,.45), 0 2px 8px rgba(7,6,10,.2);
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.05);
}

.btn.ghost{
  border-color: var(--rule);
  color: var(--ink-soft);
  transition: all .3s var(--ease);
}
.btn.ghost:hover{
  border-color: var(--brand-soft);
  color: var(--brand-deep);
  background: var(--brand-light);
  box-shadow: 0 4px 16px rgba(192,155,44,.15);
}

/* ── SECTION HEADS — ornate gold accent ──────────────────── */
.section-head{
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(90deg, var(--brand-soft) 0%, var(--rule-soft) 40%, transparent 100%) border-box;
  padding-bottom: 1.5rem;
  margin-bottom: clamp(3rem, 6vh, 5rem);
}
.section-head .sec-num{
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  color: var(--brand);
  opacity: .85;
}
.section-head .sec-title{
  letter-spacing: .28em;
  color: var(--ink);
  font-weight: 600;
}
.section-head .sec-tail{ letter-spacing: .12em; }

/* ── SECTION BACKGROUNDS — alternating luxury wash ───────── */
.section{ position: relative; overflow: hidden; }
.section::after{
  content: none;
}

/* Luxury wash for odd sections */
#what-is-presence,
#architecture,
#demo,
#about,
#faq{
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand) 3.5%, var(--paper)) 0%,
    var(--paper) 100%);
}

/* ── EXPLAINER CARD ─────────────────────────────────────── */
.explainer-card{
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-top: 2px solid var(--brand-soft);
  border-radius: var(--luxury-radius);
  box-shadow: var(--deep-shadow);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.exp-tag{
  background: var(--gold-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  letter-spacing: .22em;
  font-size: .68rem;
}

/* ── CATALOGUE CARDS — luxury treatment ──────────────────── */
.cat-card{
  background: linear-gradient(160deg, var(--paper-light) 0%, var(--paper-deep) 100%);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brand-soft);
  border-radius: var(--luxury-radius);
  box-shadow: var(--card-shadow);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (hover: hover){
  .cat-card:hover{
    border-color: var(--brand);
    border-top-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: var(--hover-shadow);
  }
}
.cat-card .cc-tag{
  color: var(--brand-deep);
  font-weight: 700;
  letter-spacing: .18em;
}
.cat-card h4{
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--ink);
}
.cat-card p{ color: var(--muted); font-size: .9rem; line-height: 1.65; }

/* ── ARCHITECTURE TABLE — luxury ─────────────────────────── */
.arch-table{
  background: var(--paper-light);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brand-soft);
  border-radius: var(--luxury-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.arch-table > div:nth-child(odd){
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--brand) 6%, var(--paper)) 0%,
    color-mix(in oklab, var(--brand) 3%, var(--paper)) 100%);
  font-weight: 700;
  color: var(--ink);
  border-bottom-color: var(--rule-soft);
}
.arch-table > div:nth-child(odd)::before{
  background: var(--brand);
  border-radius: 3px;
  width: 8px; height: 8px;
}
.arch-table > div:nth-child(even){
  color: var(--ink-soft);
  font-size: .92rem;
}

/* ── PRICING GRID — luxury ────────────────────────────────── */
.plan{
  background: linear-gradient(160deg, var(--paper-light) 0%, var(--paper-deep) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--luxury-radius);
  box-shadow: var(--card-shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (hover: hover){
  .plan:hover{
    transform: translateY(-4px);
    box-shadow: var(--hover-shadow);
  }
}
/* Featured plan — gold border + glow */
.plan.featured{
  background: linear-gradient(160deg, var(--paper-light) 0%, color-mix(in oklab, var(--brand) 6%, var(--paper)) 100%);
  border: 1.5px solid var(--brand-soft);
  box-shadow: 0 8px 40px -12px rgba(192,155,44,.3), 0 2px 12px rgba(192,155,44,.12), 0 1px 4px rgba(7,6,10,.08);
}
.plan.enterprise{
  background: linear-gradient(160deg, var(--paper-light) 0%, color-mix(in oklab, var(--ink) 4%, var(--paper)) 100%);
  border: 1.5px solid var(--ink-soft);
}

.plan-badge{
  background: var(--gold-gradient);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .12em;
  box-shadow: 0 2px 8px rgba(192,155,44,.3);
}
.plan-badge.free{
  background: linear-gradient(135deg, var(--muted) 0%, color-mix(in oklab, var(--muted) 80%, var(--ink)) 100%);
  color: var(--paper);
}

.plan h3{
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--ink);
}

.plan-price .rupee{ color: var(--brand-deep); font-size: .75em; }
.plan-price .amt{
  font-family: var(--fs-display);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.04em;
}
.plan-price .unit{ color: var(--muted); font-size: .8rem; }

.plan-line-mark{ color: var(--brand); }

/* Plan CTA buttons in pricing */
.plan .btn.primary{
  background: var(--gold-gradient);
  color: var(--ink);
  font-weight: 700;
}
.plan .btn.ghost{
  border: 1.5px solid var(--rule);
}

/* ── COMPARISON TABLE — luxury ────────────────────────────── */
.cmp-wrap{
  background: var(--paper-light);
  border: 1px solid var(--rule);
  border-radius: var(--luxury-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.cmp thead th{
  background: var(--ink);
  font-family: var(--fs-display);
  font-size: .9rem;
  letter-spacing: .02em;
  font-weight: 600;
}
.cmp thead th.pt-pop{
  background: var(--gold-gradient);
  color: var(--ink);
}
.cmp thead th.pt-pop .pt-price{ color: var(--ink-soft); }

/* ── POLICY BANNER — luxury richer gradient ───────────────── */
.policy-banner{
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 45%, color-mix(in oklab, var(--brand) 70%, var(--terracotta)) 100%);
  border-radius: var(--luxury-radius);
  box-shadow: 0 8px 32px rgba(192,155,44,.25), 0 2px 8px rgba(7,6,10,.1);
}
.policy-item{
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--luxury-radius-sm);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── FINE PRINT ─────────────────────────────────────────── */
.fine-print{
  background: linear-gradient(145deg, var(--paper-light) 0%, var(--paper-deep) 100%);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brand-soft);
  border-radius: var(--luxury-radius);
  box-shadow: var(--card-shadow);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.fine-print > div{
  padding: .9rem 0;
  border-bottom: 1px solid var(--rule-soft);
  gap: 1.2rem;
  align-items: flex-start;
}
.fine-print > div:last-child{ border-bottom: 0; }
.fine-print strong{ color: var(--brand-deep); font-weight: 700; }

/* ── SUPPORT GRID — luxury ────────────────────────────────── */
.support-grid .support-card,
.benefit-card{
  background: linear-gradient(160deg, var(--paper-light) 0%, var(--paper-deep) 100%);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brand-soft);
  border-radius: var(--luxury-radius);
  box-shadow: var(--card-shadow);
  padding: clamp(1.4rem, 3vw, 2rem);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (hover: hover){
  .support-grid .support-card:hover,
  .benefit-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--hover-shadow);
  }
}

/* ── WARRANTY CARDS ─────────────────────────────────────── */
.warranty-card{
  background: linear-gradient(160deg, var(--paper-light) 0%, var(--paper-deep) 100%);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brand-soft);
  border-radius: var(--luxury-radius);
  box-shadow: var(--card-shadow);
}
.warranty-card .wc-tag{
  background: var(--gold-gradient);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(192,155,44,.3);
}

/* ── ONBOARDING / HORIZON ────────────────────────────────── */
.phase{
  background: linear-gradient(160deg, var(--paper-light) 0%, var(--paper-deep) 100%);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brand-soft);
  border-radius: var(--luxury-radius);
  box-shadow: var(--card-shadow);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (hover: hover){
  .phase:hover{
    transform: translateY(-3px);
    box-shadow: var(--hover-shadow);
  }
}
.phase.now{
  border-top-color: var(--brand);
  box-shadow: 0 8px 32px -12px rgba(192,155,44,.25), 0 2px 8px rgba(7,6,10,.08);
}
.phase-tag{
  font-family: var(--fs-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-deep);
  font-weight: 700;
  display: inline-block;
  margin-bottom: .5rem;
}
.phase-head h3{
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.015em;
}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-item{
  border: 1px solid var(--rule);
  border-radius: var(--luxury-radius-sm);
  background: linear-gradient(145deg, var(--paper-light) 0%, var(--paper-deep) 100%);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-bottom: .75rem;
  transition: box-shadow .25s var(--ease);
}
.faq-item[open]{
  box-shadow: 0 8px 32px -12px rgba(192,155,44,.2), 0 2px 8px rgba(7,6,10,.08);
  border-color: var(--brand-soft);
}
.faq-item > summary{
  padding: 1.2rem clamp(1.1rem, 3vw, 1.6rem);
  cursor: pointer;
}
.q-ix{
  font-family: var(--fs-mono);
  color: var(--brand);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
}
.faq-item .a{
  padding: 0 clamp(1.1rem, 3vw, 1.6rem) 1.4rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 1.1rem;
}

/* ── MEETING / CONTACT FORM ──────────────────────────────── */
.meeting-form{
  background: linear-gradient(160deg, var(--paper-light) 0%, var(--paper-deep) 100%);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brand-soft);
  border-radius: var(--luxury-radius);
  box-shadow: var(--deep-shadow);
  padding: clamp(2rem, 5vw, 3.5rem);
}

/* Luxury form inputs */
input, textarea, select{
  border-radius: var(--luxury-radius-sm) !important;
  border-color: var(--rule) !important;
  background: var(--paper-light) !important;
  color: var(--ink) !important;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease) !important;
}
input:focus, textarea:focus, select:focus{
  border-color: var(--brand-soft) !important;
  box-shadow: 0 0 0 3px rgba(192,155,44,.12) !important;
  outline: none !important;
}

/* ── SITE FOOTER ──────────────────────────────────────────── */
.site-footer{
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 90%, var(--brand)) 100%);
  color: var(--paper);
}
.site-footer a{ color: var(--brand-soft); }
.site-footer a:hover{ color: var(--brand); }
.footer-meta{
  border-top-color: rgba(255,255,255,.1);
  color: rgba(250,247,240,.5);
}
.footer-rule{ background: rgba(255,255,255,.08); }
.footer-col-head{
  color: var(--brand-soft);
  letter-spacing: .2em;
}

/* ── SCROLL PROGRESS BAR ─────────────────────────────────── */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--gold-gradient-h);
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(192,155,44,.5);
}

/* ── LUXURY ORNAMENT DIVIDER ─────────────────────────────── */
.lux-divider{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: clamp(2rem, 5vw, 4rem) 0;
}
.lux-divider::before,
.lux-divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-soft), transparent);
}
.lux-divider-diamond{
  width: 8px; height: 8px;
  background: var(--brand);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ── BENEFITS HIGHLIGHT BOX ──────────────────────────────── */
.benefits-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.benefit-item{
  background: linear-gradient(145deg, var(--paper-light) 0%, color-mix(in oklab, var(--brand) 4%, var(--paper)) 100%);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--luxury-radius-sm) var(--luxury-radius-sm) 0;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--card-shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover: hover){
  .benefit-item:hover{
    transform: translateX(3px);
    box-shadow: var(--hover-shadow);
  }
}
.benefit-item .bi-icon{
  font-size: 1.4rem;
  margin-bottom: .6rem;
  display: block;
}
.benefit-item .bi-head{
  font-family: var(--fs-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .3rem;
  letter-spacing: -.01em;
}
.benefit-item .bi-body{
  font-size: .87rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── REVEAL ANIMATIONS ────────────────────────────────────── */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.9,.32,1), transform .7s cubic-bezier(.22,.9,.32,1);
}
.reveal.visible{
  opacity: 1;
  transform: none;
}
.reveal-2{ transition-delay: .1s; }
.reveal-3{ transition-delay: .2s; }
.reveal-4{ transition-delay: .3s; }
.reveal-5{ transition-delay: .4s; }

/* ── DEMO WINDOW — LUXURY ANIMATED LOOP ───────────────────── */

/* Outer shell */
.demo-luxury-shell{
  background: linear-gradient(145deg, var(--ink-soft) 0%, var(--ink) 100%);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(7,6,10,.55),
    0 8px 32px -8px rgba(192,155,44,.15),
    inset 0 1px 0 rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
}

/* Outer shell gold accent top bar */
.demo-luxury-shell::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold-gradient-h);
  z-index: 10;
}

/* Top control bar */
.dlx-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.4rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
  gap: 1rem;
  flex-wrap: wrap;
}
.dlx-dots{
  display: flex;
  gap: .45rem;
  align-items: center;
  flex-shrink: 0;
}
.dlx-dots span{
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dlx-dots span:nth-child(1){ background: #FF5F57; }
.dlx-dots span:nth-child(2){ background: #FFBD2E; }
.dlx-dots span:nth-child(3){ background: #28CA41; }

.dlx-url{
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .5rem;
  padding: .35rem .9rem;
  font-family: var(--fs-mono);
  font-size: .65rem;
  letter-spacing: .04em;
  color: rgba(250,247,240,.55);
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 340px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}
.dlx-url::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #28CA41;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(40,202,65,.6);
}
.dlx-url-text{ overflow: hidden; text-overflow: ellipsis; }

.dlx-badge{
  font-family: var(--fs-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-soft);
  border: 1px solid rgba(192,155,44,.3);
  border-radius: .35rem;
  padding: .25rem .55rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Main demo area — contains the two panels (phone + desktop) */
.dlx-panels{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: 460px;
  position: relative;
}
@media (max-width: 700px){ .dlx-panels{ grid-template-columns: 1fr; min-height: auto; } }

/* Left phone panel */
.dlx-phone{
  background: rgba(255,255,255,.03);
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  position: relative;
  overflow: hidden;
}
.dlx-phone-label{
  font-family: var(--fs-mono);
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250,247,240,.3);
  text-align: center;
}
.dlx-phone-frame{
  background: #0D0C0E;
  border-radius: 1.1rem;
  border: 1.5px solid rgba(255,255,255,.12);
  width: 155px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
}
.dlx-phone-notch{
  height: 22px;
  background: #0D0C0E;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dlx-phone-notch::after{
  content: "";
  width: 48px; height: 8px;
  background: rgba(255,255,255,.12);
  border-radius: 99px;
}

/* Phone screen — animated steps */
.dlx-phone-screen{
  height: 280px;
  overflow: hidden;
  position: relative;
  background: #F8F5EE;
}

/* Each step slide */
.dlx-step{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: none;
  display: flex;
  flex-direction: column;
  padding: .75rem .6rem;
  gap: .5rem;
  background: #F8F5EE;
}

/* Step header bar */
.dlx-step-header{
  background: var(--ink);
  color: var(--paper);
  border-radius: .45rem .45rem 0 0;
  padding: .5rem .65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -.75rem -.6rem 0;
  flex-shrink: 0;
}
.dlx-step-header .sh-title{
  font-family: var(--fs-display);
  font-size: .75rem;
  font-style: italic;
  color: var(--paper);
  font-weight: 500;
}
.dlx-step-header .sh-badge{
  font-family: var(--fs-mono);
  font-size: .48rem;
  letter-spacing: .12em;
  background: var(--brand);
  color: var(--ink);
  border-radius: .25rem;
  padding: .1rem .35rem;
  font-weight: 700;
}

/* ── STEP ANIMATIONS ─────────────────────────────────────────
   Loop: step-1 → step-2 → step-3 → step-4 → repeat
   Total cycle = 20s. Each step visible for 5s.
   ─────────────────────────────────────────────────────────── */
.dlx-step:nth-child(1){
  animation: lux-step 20s infinite;
  animation-delay: 0s;
}
.dlx-step:nth-child(2){
  animation: lux-step 20s infinite;
  animation-delay: 5s;
}
.dlx-step:nth-child(3){
  animation: lux-step 20s infinite;
  animation-delay: 10s;
}
.dlx-step:nth-child(4){
  animation: lux-step 20s infinite;
  animation-delay: 15s;
}

@keyframes lux-step{
  0%      { opacity: 0; transform: translateY(6px) scale(.99); }
  5%      { opacity: 1; transform: translateY(0) scale(1); }
  20%     { opacity: 1; transform: translateY(0) scale(1); }
  25%     { opacity: 0; transform: translateY(-6px) scale(.99); }
  100%    { opacity: 0; transform: translateY(-6px) scale(.99); }
}

/* Skeleton / content shapes inside steps */
.dlx-ui-row{
  display: flex; gap: .4rem; align-items: center; flex-shrink: 0;
}
.dlx-ui-chip{
  font-family: var(--fs-mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .45rem;
  border-radius: .3rem;
  font-weight: 700;
  flex-shrink: 0;
}
.dlx-ui-chip.green{ background: rgba(40,180,80,.15); color: #1A8042; border: 1px solid rgba(40,180,80,.3); }
.dlx-ui-chip.gold{ background: rgba(192,155,44,.15); color: #9A7A18; border: 1px solid rgba(192,155,44,.3); }
.dlx-ui-chip.red{ background: rgba(123,13,30,.12); color: #7B0D1E; border: 1px solid rgba(123,13,30,.25); }

.dlx-ui-label{
  font-family: var(--fs-mono);
  font-size: .52rem;
  letter-spacing: .08em;
  color: #6A5C4A;
  text-transform: uppercase;
}
.dlx-ui-value{
  font-family: var(--fs-display);
  font-size: .95rem;
  font-weight: 600;
  color: #07060A;
  letter-spacing: -.01em;
}
.dlx-ui-sub{
  font-size: .5rem;
  color: #8A7A68;
  font-family: var(--fs-mono);
  letter-spacing: .06em;
}

/* Face scan box */
.dlx-face-box{
  border: 1.5px solid rgba(192,155,44,.5);
  border-radius: .5rem;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: rgba(192,155,44,.04);
  overflow: hidden;
  flex-shrink: 0;
}
.dlx-face-box .scan-line{
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: scan-sweep 2.5s ease-in-out infinite;
}
@keyframes scan-sweep{
  0%{ top: 5%; opacity: 0; }
  10%{ opacity: 1; }
  90%{ opacity: 1; }
  100%{ top: 95%; opacity: 0; }
}
.dlx-face-box .face-icon{
  font-size: 1.8rem;
  opacity: .35;
  color: var(--brand-deep);
}
.dlx-face-box.verified{
  border-color: rgba(40,180,80,.5);
  background: rgba(40,180,80,.06);
}
.dlx-face-box.verified .scan-line{ display: none; }
.dlx-face-box .face-check{
  font-size: 1.6rem;
  color: #1A8042;
}

/* Verified tick animation */
.dlx-face-box .face-check{ animation: face-appear .4s cubic-bezier(.22,.9,.32,1) both; }
@keyframes face-appear{
  from{ transform: scale(.5); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}

/* Punch button */
.dlx-punch-btn{
  background: var(--gold-gradient);
  color: var(--ink);
  font-family: var(--fs-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: .45rem;
  padding: .55rem .7rem;
  text-align: center;
  border: none;
  box-shadow: 0 2px 8px rgba(192,155,44,.3);
  flex-shrink: 0;
  cursor: default;
}
.dlx-punch-btn.punched{
  background: linear-gradient(135deg, #1A8042 0%, #2FAD5C 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(40,180,80,.3);
}

/* Activity list */
.dlx-activity{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex-shrink: 0;
}
.dlx-act-item{
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .52rem;
  font-family: var(--fs-mono);
  letter-spacing: .06em;
  color: #6A5C4A;
}
.dlx-act-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.dlx-act-dot.out{ background: #7B0D1E; }
.dlx-act-dot.ok{ background: #1A8042; }
.dlx-act-time{ margin-left: auto; color: #9A8A78; }

/* Geofence chip */
.dlx-geo-chip{
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(40,180,80,.08);
  border: 1px solid rgba(40,180,80,.25);
  border-radius: .4rem;
  padding: .4rem .6rem;
  flex-shrink: 0;
}
.dlx-geo-ping{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1A8042;
  flex-shrink: 0;
  animation: geo-ping 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(40,180,80,.5);
}
@keyframes geo-ping{
  0%{ box-shadow: 0 0 0 0 rgba(40,180,80,.5); }
  70%{ box-shadow: 0 0 0 5px rgba(40,180,80,0); }
  100%{ box-shadow: 0 0 0 0 rgba(40,180,80,0); }
}
.dlx-geo-text{ font-size: .5rem; font-family: var(--fs-mono); color: #1A8042; letter-spacing: .08em; font-weight: 700; text-transform: uppercase; }

/* Join code field */
.dlx-code-field{
  background: rgba(7,6,10,.06);
  border: 1.5px solid var(--rule);
  border-radius: .4rem;
  padding: .5rem .65rem;
  font-family: var(--fs-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  flex-shrink: 0;
}

/* ── RIGHT ADMIN PANEL ───────────────────────────────────── */
.dlx-admin{
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 700px){ .dlx-admin{ display: none; } }

.dlx-admin-label{
  font-family: var(--fs-mono);
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250,247,240,.3);
}

/* Admin header */
.dlx-admin-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.dlx-admin-title{
  font-family: var(--fs-display);
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -.01em;
}
.dlx-admin-sub{
  font-family: var(--fs-mono);
  font-size: .54rem;
  letter-spacing: .1em;
  color: rgba(250,247,240,.4);
  margin-top: .2rem;
  text-transform: uppercase;
}
.dlx-admin-btns{
  display: flex;
  gap: .45rem;
  flex-shrink: 0;
}
.dlx-admin-btn{
  font-family: var(--fs-mono);
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: .35rem;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(250,247,240,.65);
  background: rgba(255,255,255,.05);
  cursor: default;
  font-weight: 600;
  white-space: nowrap;
}
.dlx-admin-btn.primary{
  background: rgba(192,155,44,.15);
  border-color: rgba(192,155,44,.3);
  color: var(--brand-soft);
}
.dlx-admin-btn.danger{
  background: rgba(123,13,30,.15);
  border-color: rgba(123,13,30,.3);
  color: #E06070;
}

/* Stats row */
.dlx-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
}
.dlx-stat{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .6rem;
  padding: .65rem .55rem;
  text-align: center;
}
.dlx-stat .sk{ font-family: var(--fs-mono); font-size: .48rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(250,247,240,.4); margin-bottom: .3rem; }
.dlx-stat .sv{ font-family: var(--fs-display); font-size: 1.4rem; font-weight: 700; color: var(--paper); letter-spacing: -.03em; line-height: 1; }
.dlx-stat.good .sv{ color: #4DD882; }
.dlx-stat.warn .sv{ color: #F4A234; }
.dlx-stat.brand .sv{ color: var(--brand-soft); }

/* Animated stat — counting up */
.dlx-stat .sv[data-count]{
  animation: count-in .6s cubic-bezier(.22,.9,.32,1) both;
  animation-delay: .3s;
}
@keyframes count-in{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: none; }
}

/* Admin table */
.dlx-table-wrap{
  flex: 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .65rem;
  background: rgba(255,255,255,.02);
}
.dlx-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .64rem;
}
.dlx-table th{
  font-family: var(--fs-mono);
  font-size: .5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,247,240,.4);
  padding: .55rem .65rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.dlx-table td{
  padding: .5rem .65rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: rgba(250,247,240,.75);
  font-size: .64rem;
}
.dlx-table td.mono-cell{ font-family: var(--fs-mono); font-size: .52rem; letter-spacing: .06em; color: rgba(250,247,240,.45); }
.dlx-table tr.highlight td{ background: rgba(192,155,44,.06); }
.dlx-table tr:last-child td{ border-bottom: 0; }

.dlx-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-family: var(--fs-body);
  font-size: .5rem;
  font-weight: 700;
  margin-right: .4rem;
  vertical-align: middle;
  flex-shrink: 0;
  color: #fff;
}
.c1{ background: #6366F1; }
.c2{ background: #F59E0B; color: #1A1A1A; }
.c3{ background: #10B981; }
.c4{ background: #EF4444; }
.c5{ background: #8B5CF6; }

.dlx-chip-in{
  display: inline-block;
  background: rgba(40,180,80,.18);
  color: #3EC87A;
  border: 1px solid rgba(40,180,80,.3);
  border-radius: .3rem;
  font-family: var(--fs-mono);
  font-size: .48rem;
  letter-spacing: .1em;
  padding: .1rem .4rem;
  font-weight: 700;
}
.dlx-chip-out{
  display: inline-block;
  background: rgba(123,13,30,.15);
  color: #E06070;
  border: 1px solid rgba(123,13,30,.3);
  border-radius: .3rem;
  font-family: var(--fs-mono);
  font-size: .48rem;
  letter-spacing: .1em;
  padding: .1rem .4rem;
  font-weight: 700;
}
.dlx-chip-scan{
  display: inline-block;
  background: rgba(192,155,44,.15);
  color: var(--brand-soft);
  border: 1px solid rgba(192,155,44,.3);
  border-radius: .3rem;
  font-family: var(--fs-mono);
  font-size: .48rem;
  letter-spacing: .1em;
  padding: .1rem .4rem;
  font-weight: 700;
  animation: blink-scan 1.2s ease-in-out infinite;
}
@keyframes blink-scan{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .45; }
}

/* Admin live count animation */
.dlx-stat .sv.incrementing{
  animation: increment-flash .4s ease both;
}
@keyframes increment-flash{
  0%{ color: var(--brand-soft); transform: scale(1.12); }
  100%{ color: #4DD882; transform: scale(1); }
}

/* Admin footer */
.dlx-admin-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.dlx-admin-foot .af-left,
.dlx-admin-foot .af-right{
  font-family: var(--fs-mono);
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,247,240,.3);
}
.dlx-admin-foot .af-live{
  display: flex;
  align-items: center;
  gap: .35rem;
  color: #3EC87A;
}
.dlx-admin-foot .af-live::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #3EC87A;
  animation: pulse-green 1.8s infinite;
  box-shadow: 0 0 0 0 rgba(62,200,122,.5);
}
@keyframes pulse-green{
  0%{ box-shadow: 0 0 0 0 rgba(62,200,122,.5); }
  70%{ box-shadow: 0 0 0 5px rgba(62,200,122,0); }
  100%{ box-shadow: 0 0 0 0 rgba(62,200,122,0); }
}

/* Demo disclaimer */
.demo-disclaimer-lux{
  background: linear-gradient(90deg, rgba(192,155,44,.08) 0%, rgba(192,155,44,.04) 100%);
  border: 1px solid rgba(192,155,44,.2);
  border-radius: var(--luxury-radius-sm);
  padding: 1rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-top: 1.2rem;
}
.demo-disclaimer-lux .dd-icon{
  font-size: .85rem;
  flex-shrink: 0;
  color: var(--brand);
  margin-top: .05rem;
}
.demo-disclaimer-lux p{
  font-size: .84rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.demo-disclaimer-lux strong{ color: var(--brand-deep); }

/* ── STEP INDICATOR DOTS ─────────────────────────────────── */
.dlx-step-indicators{
  display: flex;
  justify-content: center;
  gap: .55rem;
  padding: .75rem;
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.06);
}
.dlx-step-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(250,247,240,.2);
  transition: background .3s;
}
.dlx-step-dot:nth-child(1){ animation: dot-active 20s infinite 0s; }
.dlx-step-dot:nth-child(2){ animation: dot-active 20s infinite 5s; }
.dlx-step-dot:nth-child(3){ animation: dot-active 20s infinite 10s; }
.dlx-step-dot:nth-child(4){ animation: dot-active 20s infinite 15s; }

@keyframes dot-active{
  0%, 4%{ background: var(--brand); box-shadow: 0 0 0 2px rgba(192,155,44,.25); width: 18px; border-radius: 3px; }
  22%, 100%{ background: rgba(250,247,240,.2); box-shadow: none; width: 6px; border-radius: 50%; }
}

/* Step label */
.dlx-step-label{
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: .55rem 1rem;
  background: rgba(255,255,255,.02);
  overflow: hidden;
  position: relative;
  height: 28px;
}
.dlx-step-lbl{
  position: absolute;
  font-family: var(--fs-mono);
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,247,240,.45);
  white-space: nowrap;
}
.dlx-step-lbl:nth-child(1){ animation: label-show 20s infinite 0s; }
.dlx-step-lbl:nth-child(2){ animation: label-show 20s infinite 5s; }
.dlx-step-lbl:nth-child(3){ animation: label-show 20s infinite 10s; }
.dlx-step-lbl:nth-child(4){ animation: label-show 20s infinite 15s; }

@keyframes label-show{
  0%, 3%{ opacity: 0; transform: translateY(6px); }
  8%, 18%{ opacity: 1; transform: none; }
  23%, 100%{ opacity: 0; transform: translateY(-6px); }
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px){
  .dlx-stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .dlx-panels{ min-height: auto; }
  .dlx-phone{ padding: 1rem .75rem; }
  .dlx-phone-frame{ width: 140px; }
  .dlx-phone-screen{ height: 260px; }
  .dlx-step{ padding: .6rem .5rem; }
}