/* ==========================================================================
   iBorneoPRO — theme/dhru/css/landing.css
   DHRU-matched skin for the public landing page (index.php).

   Palette from DHRU store_default (themes/theme8.css):
       primary #37126C / #38136C   gradient 90deg #38136C -> #6433A8
       gold    #FFBF37             tint     #ffbf3717
   Typography: Myriad Pro (self-hosted).
   Loaded AFTER the page's own <style>, so it wins.
   ========================================================================== */

@font-face{
  font-family:'Myriad Pro';
  src:url('../fonts/myriad-pro.woff2') format('woff2'),
      url('../fonts/myriad-pro.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Myriad Pro';
  src:url('../fonts/myriad-pro-bold.woff2') format('woff2'),
      url('../fonts/myriad-pro-bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Myriad Pro';
  src:url('../fonts/myriad-pro-black.woff2') format('woff2'),
      url('../fonts/myriad-pro-black.ttf') format('truetype');
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  --dh-primary:#37126C;
  --dh-primary-2:#6433A8;
  --dh-accent:#FFBF37;
  --dh-accent-2:#E9A31C;
  --dh-tint:rgba(255,191,55,.09);
  --dh-grad:linear-gradient(90deg,#38136C 0%,#6433A8 100%);
  --dh-grad-gold:linear-gradient(90deg,#FFBF37 0%,#E9A31C 100%);
}

/* -------------------------------- base ---------------------------------- */
body.bg-mesh{
  font-family:'Myriad Pro','Inter',system-ui,sans-serif;
  background:var(--dh-primary) !important;
  color:#F4EFFC;
}
.bg-mesh::before{
  background:
    radial-gradient(50rem 26rem at 10% -10%, rgba(255,191,55,.12), transparent 60%),
    radial-gradient(55rem 30rem at 105% 5%, rgba(100,51,168,.55), transparent 60%),
    linear-gradient(180deg,#1B0A33 0%,#37126C 45%,#2A0E51 100%) !important;
}
h1,h2,h3{ letter-spacing:.2px; }

/* ------------------------------- top bar -------------------------------- */
.dh-topbar{
  background:#2B0E52;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.82rem;
  color:rgba(255,255,255,.82);
}
.dh-topbar .dh-topbar-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.5rem 1rem; padding:.5rem 0;
}
.dh-topbar a{ color:rgba(255,255,255,.82); text-decoration:none; }
.dh-topbar a:hover{ color:var(--dh-accent); }

/* ------------------------------- header --------------------------------- */
header.sticky .glass{
  background:rgba(55,18,108,.92) !important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,191,55,.22);
}
header.sticky a.ring-1{
  background:transparent !important;
  box-shadow:none !important;
  color:rgba(255,255,255,.88) !important;
  border:0 !important;
}
header.sticky a.ring-1:hover{ color:var(--dh-accent) !important; background:rgba(255,191,55,.10) !important; }
header.sticky .brand-animate{ color:#fff; }

/* gold primary CTA (DHRU .btn-primary) */
.btn-primary{
  background:var(--dh-grad-gold) !important;
  color:#3A1A22 !important;
  box-shadow:0 8px 22px rgba(233,163,28,.35), inset 0 0 0 1px rgba(255,255,255,.25) !important;
  font-weight:700;
}
.btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-primary svg{ stroke:#3A1A22; }
#mobileMenu{ background:rgba(43,14,82,.98) !important; border-color:rgba(255,191,55,.2) !important; }
.text-brand-300{ color:var(--dh-accent) !important; }

/* -------------------------------- hero ---------------------------------- */
#hero .glass, .dh-hero-panel{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,191,55,.28) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.45) !important;
}
h1 .bg-clip-text{
  background-image:var(--dh-grad-gold) !important;
  -webkit-background-clip:text; background-clip:text;
}
.dh-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.28rem .75rem; border-radius:2rem; font-size:.8rem; font-weight:700;
  background:var(--dh-tint); color:var(--dh-accent);
  border:1px solid rgba(255,191,55,.35);
}

/* --------------------------- product cards ------------------------------ */
.animated-ring{ position:relative; }
.animated-ring::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:transparent;
  border:1px solid rgba(255,191,55,.20);
}
.animated-ring:hover::after{ border-color:rgba(255,191,55,.65); }
.card-3d.glass{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,191,55,.18) !important;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-3d.glass:hover{
  transform:translateY(-4px);
  border-color:var(--dh-accent) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,191,55,.35) !important;
}
.card-3d h3{ color:#fff; font-weight:700; }
/* price line -> DHRU gold */
.card-3d .text-3xl{ color:var(--dh-accent) !important; }
.card-3d li::marker{ color:var(--dh-accent); }
.card-3d a.bg-white\/10{
  background:var(--dh-grad) !important;
  color:#fff !important;
  box-shadow:none !important;
  border:1px solid rgba(255,255,255,.14);
}
.card-3d a.bg-white\/10:hover{ filter:brightness(1.12); }

/* section headings */
#pricing h2{ color:#fff; }
/* service information & customer support header is centred, so centre its gold rule too */
#pricing .dh-section-head h2::after{ margin-left:auto; margin-right:auto; }
#pricing .dh-section-head .dh-chip{ margin-bottom:.25rem; }
#pricing h2::after{
  content:''; display:block; width:64px; height:4px; margin-top:.75rem;
  border-radius:4px; background:var(--dh-grad-gold);
}
#pricing a.bg-white\/10{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
#pricing a.bg-white\/10:hover{ background:rgba(255,191,55,.18) !important; color:var(--dh-accent) !important; }

/* separator line above the "service information" badge (paidunlock-style divider) */
.dh-sep-before{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  margin:0 auto 2.25rem; max-width:64rem;
}
.dh-sep-before::before, .dh-sep-before::after{
  content:''; flex:1 1 auto; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,191,55,0), rgba(255,191,55,.85));
  box-shadow:0 0 12px rgba(255,191,55,.35);
}
.dh-sep-before::after{ background:linear-gradient(90deg, rgba(255,191,55,.85), rgba(255,191,55,0)); }
.dh-sep-before span{
  width:9px; height:9px; flex:0 0 auto; transform:rotate(45deg);
  border-radius:2px; background:var(--dh-grad-gold);
  box-shadow:0 0 14px rgba(255,191,55,.55);
}
@media (max-width:640px){
  .dh-sep-before{ margin-bottom:1.75rem; }
}

/* info / support cards (paidunlock-style "service information" block) */
.dh-info-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; border-radius:.9rem; flex:0 0 auto;
  background:var(--dh-tint); border:1px solid rgba(255,191,55,.35);
  color:var(--dh-accent); font-size:1.15rem;
}
.dh-info-ico-lg{ width:3.5rem; height:3.5rem; border-radius:1rem; font-size:1.4rem; }
.card-3d.glass.dh-support-card{
  background:linear-gradient(135deg, rgba(255,191,55,.10) 0%, rgba(100,51,168,.32) 100%) !important;
  border:1px solid rgba(255,191,55,.30) !important;
}
.dh-tick{ color:var(--dh-accent); margin-right:.5rem; }
.dh-link{ color:var(--dh-accent); text-decoration:underline; text-underline-offset:2px; }
.dh-link:hover{ color:#fff; }

/* ------------------------------- footer --------------------------------- */
.dh-footer{
  background:#240B45;
  border-top:3px solid var(--dh-accent);
  color:rgba(255,255,255,.75);
}
.dh-footer h4{
  color:#fff; font-size:.95rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:.85rem;
}
.dh-footer a{ color:rgba(255,255,255,.72); text-decoration:none; }
.dh-footer a:hover{ color:var(--dh-accent); }
.dh-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; font-size:.9rem; }
.dh-footer .dh-footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding:1rem 0; font-size:.85rem;
}
.dh-footer .dh-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem; }
.dh-footer .dh-brand span{ color:#fff; font-weight:800; font-size:1.05rem; }

/* ------------------------------- ticker --------------------------------- */
.iborneo-alert-bar{
  background:var(--dh-primary) !important;
  border-color:rgba(255,191,55,.3) !important;
}
.iborneo-ticker-text .badge{
  background:var(--dh-tint); color:var(--dh-accent); border-color:rgba(255,191,55,.35);
}
.iborneo-alert-bar a{ color:var(--dh-accent) !important; }

/* ------------------------------- modals --------------------------------- */
.modal-content{
  background:#2A0E51 !important;
  color:#F4EFFC !important;
  border:1px solid rgba(255,191,55,.28) !important;
}
.modal-content h2,.modal-content h3{ color:#fff; }
.modal-content p,.modal-content li{ color:rgba(244,239,252,.88); }
.modal-overlay{ background:rgba(15,3,33,.75) !important; }

/* ----------------------------- scrollbar -------------------------------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#1B0A33; }
::-webkit-scrollbar-thumb{ background:#4E2C77; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#6433A8; }

/* --------------------------- responsive trims --------------------------- */
@media (max-width: 640px){
  .dh-topbar{ font-size:.76rem; text-align:center; }
  .dh-topbar .dh-topbar-inner{ justify-content:center; }
}