/* =====================================================================
   No Limits Telecoms — Catalogues & Brochures · dark "Holo" skin
   Load order: styles.css → resources.css → home.css → THIS FILE (last).
   Theme: "the document library at night" — glass shelves, glowing edges.
   ===================================================================== */

/* ---------- Canvas: the fixed holo backdrop owns the page ---------- */
body{background:var(--navy-0);color:var(--ink)}
h1,h2,h3,h4,h5{color:#fff}
h1,h3,h4{font-family:var(--font-display);letter-spacing:-.02em}

/* Old light-header leftovers that survive the cascade */
.nav a::after,.drop-trigger::after{display:none}
.drop-trigger.active{color:#fff;background:rgba(255,255,255,.06)}
.nav-drop a.active{color:#fff;background:rgba(255,255,255,.07)}

/* Anchor targets clear the sticky header */
#threecx,#vpbx,#bellme{scroll-margin-top:86px}

/* ---------- Hero ---------- */
.res-hero{background:transparent;color:var(--ink);overflow:visible;padding:clamp(3.4rem,7vw,5.6rem) 0 clamp(1.4rem,3vw,2.2rem)}
.res-hero .hero-bg{display:none}
.res-hero h1{font-weight:700;letter-spacing:-.025em;font-size:clamp(2.35rem,5.6vw,4rem);line-height:1.04;margin:.7rem 0 1.1rem}
.res-hero p{color:var(--ink-dim)}
.res-hero-stats{margin-top:2.2rem}
.res-hero-stats div+div{padding-left:2.2rem;border-left:1px solid rgba(120,160,255,.2)}
.res-hero-stats span{color:var(--ink-faint)}

/* ---------- Section heads ---------- */
.res-alt{background:transparent}
.res-head h2{color:#fff}
.res-tagline{color:var(--o2);text-shadow:0 0 18px rgba(242,115,47,.25)}
.res-copy p{color:var(--ink-dim)}

/* ---------- Feature tiles → dark glass shelves ---------- */
.res-section .res-features li{
  background:linear-gradient(160deg,rgba(10,36,80,.58),rgba(4,18,46,.58));
  border:1px solid rgba(120,160,255,.16);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 38px -24px rgba(0,0,0,.85);
  backdrop-filter:blur(6px);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.res-section .res-features li:hover{
  border-color:rgba(248,155,62,.42);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -22px rgba(0,0,0,.9),0 0 22px -8px rgba(242,115,47,.35);
}
.res-features strong{color:#fff;font-family:var(--font-display)}
.res-features span{color:var(--ink-dim)}

/* ---------- Document cards (carry .holo in the markup) ---------- */
.doc-card{color:var(--ink);padding:1.5rem 1.5rem 1.45rem}
.doc-info h3{color:#fff}
.doc-info p{color:var(--ink-dim)}
.doc-meta{color:var(--ink-faint)}
.doc-icon{box-shadow:0 12px 28px -12px rgba(242,115,47,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.doc-tag.alt{background:rgba(8,26,58,.85);border:1px solid rgba(86,224,255,.45);color:var(--iris-cyan)}

/* ---------- BellMe accreditation (holo shell in the markup) ---------- */
.accred-copy h4{font-family:var(--font-display)}
.accred-copy p{color:var(--ink-dim)}
.accred-copy p strong{color:#fff}
.accred-badge{background:rgba(74,222,155,.12);border:1px solid rgba(74,222,155,.35);color:#7ee2b8;box-shadow:0 0 26px -8px rgba(74,222,155,.45)}

/* Ghost buttons inside sections the old css scoped as "dark": restore the chrome edge */
.accred .btn-ghost,.cta-band .btn-ghost{
  color:var(--ink);border-color:transparent;
  background:linear-gradient(160deg,#0a2450,#061a3c) padding-box,var(--holo-border) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.accred .btn-ghost:hover,.cta-band .btn-ghost:hover{
  color:#fff;border-color:transparent;
  background:linear-gradient(160deg,#0a2450,#061a3c) padding-box,var(--holo-border) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 24px -6px rgba(86,224,255,.4);
}

/* ---------- CTA band → floating holo panel ---------- */
.cta-band{background:transparent;color:var(--ink);overflow:visible}
.cta-band::after{display:none}
.cta-band .cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  text-align:left;padding:clamp(2.3rem,4.5vw,3.2rem) clamp(1.5rem,4vw,2.8rem);
}
.cta-band h2{color:#fff}
.cta-band p{color:var(--ink-dim);max-width:46ch}
.cta-band .btn-primary{
  background:linear-gradient(135deg,#f2732f,#f89b3e);color:#fff;
  box-shadow:0 12px 30px -10px rgba(242,115,47,.7),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 8px rgba(120,40,0,.35);
}
.cta-band .btn-primary:hover{
  background:linear-gradient(135deg,#f2732f,#f89b3e);
  box-shadow:0 16px 40px -10px rgba(242,115,47,.85),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-lg{padding:15px 28px;font-size:16px}

/* ---------- Mobile ---------- */
@media (max-width:560px){
  .res-hero-stats div+div{padding-left:1.4rem}
  .doc-card{padding:1.15rem 1.1rem}
  .cta-band .cta-inner{flex-direction:column;align-items:flex-start}
}