:root{
  --ink:#0A101E;
  --ink-2:#0F1B30;
  --gold:#D4A537;
  --gold-light:#F2D06B;
  --teal:#12615A;
  --teal-light:#1C8A7F;
  --cream:#F7F3E8;
  --paper:#FBF9F3;
  --text-dark:#1B2333;
  --text-muted:#5C6478;
  --serif:'Fraunces', serif;
  --sans:'Plus Jakarta Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
body{font-family:var(--sans); color:var(--text-dark); background:var(--paper); -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,.display-font{font-family:var(--sans);}
.mono{font-family:var(--mono);}
a{text-decoration:none;}

/* Ticket signature element */
.ticket{position:relative; background:var(--cream); border-radius:14px; border:1px solid rgba(10,16,30,.08);}
.ticket::before,.ticket::after{content:""; position:absolute; width:22px; height:22px; background:var(--paper); border-radius:50%; top:50%; transform:translateY(-50%); box-shadow: inset 0 0 0 1px rgba(10,16,30,.08);}
.ticket::before{left:-11px;} .ticket::after{right:-11px;}
.ticket .stub-perf{position:absolute; top:0; bottom:0; right:26%; width:0; border-left:2px dashed rgba(10,16,30,.18);}
.ticket-dark{background:var(--ink-2); border:1px solid rgba(255,255,255,.08);}
.ticket-dark::before,.ticket-dark::after{background:var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);}
.ticket-dark .stub-perf{border-left-color:rgba(255,255,255,.15);}

.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); background:rgba(212,165,55,.1); border:1px solid rgba(212,165,55,.35); padding:.35rem .9rem; border-radius:100px;}
.eyebrow.on-light{color:var(--teal); background:rgba(18,97,90,.08); border-color:rgba(18,97,90,.25);}

.btn-gold{background:linear-gradient(180deg,var(--gold-light),var(--gold)); color:var(--ink); font-weight:700; border:none; padding:.85rem 1.9rem; border-radius:100px; box-shadow:0 10px 24px rgba(212,165,55,.25);}
.btn-gold:hover{color:var(--ink); filter:brightness(1.04);}
.btn-outline-cream{border:1.5px solid rgba(247,243,232,.5); color:var(--cream); font-weight:600; padding:.8rem 1.8rem; border-radius:100px;}
.btn-outline-cream:hover{background:rgba(247,243,232,.1); color:#fff;}
.btn-teal{background:var(--teal); color:#fff; font-weight:700; border:none; border-radius:100px; padding:.85rem 1.9rem;}
.btn-teal:hover{background:var(--teal-light); color:#fff;}

/* Topbar / Nav */
.topbar{background:var(--ink); color:rgba(247,243,232,.75); font-size:.85rem; border-bottom:1px solid rgba(212,165,55,.15);}
.topbar a{color:rgba(247,243,232,.85);}
.topbar a:hover{color:var(--gold);}
.navbar-tahfiz{background:var(--ink); padding:.8rem 0;}
.navbar-tahfiz .nav-link{color:rgba(247,243,232,.85); font-weight:500; margin:0 .6rem;}
.navbar-tahfiz .nav-link:hover, .navbar-tahfiz .nav-link.active{color:var(--gold);}
.brand-mark{display:flex; align-items:center; gap:.6rem;}
.brand-mark img{height:46px; width:auto;}
.brand-mark .word{font-family:var(--sans); font-weight:700; letter-spacing:.06em; color:var(--cream); font-size:1.25rem; line-height:1;}
.brand-mark .sub{font-family:var(--mono); font-size:.55rem; letter-spacing:.12em; color:var(--gold); text-transform:uppercase;}

/* Hero — using real Tahfiz event photo */
.hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,16,30,.6) 0%, rgba(10,16,30,.9) 65%, var(--ink) 100%),
    url('https://d3sm4y1w2g2rvu.cloudfront.net/template-images/a322b03e-a71f-4916-ba7d-365559ef2167.jpeg') center/cover no-repeat;
  padding:6.5rem 0 3rem;
  overflow:hidden;
}
.hero::after{content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(212,165,55,.35) 1px, transparent 1.5px); background-size:26px 26px; opacity:.15; pointer-events:none;}
.hero-badge{display:inline-flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.06); border:1px solid rgba(212,165,55,.3); padding:.5rem 1rem .5rem .5rem; border-radius:100px; backdrop-filter:blur(6px);}
.hero-badge .circle{width:34px; height:34px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:.9rem;}
.hero h1{color:var(--cream); font-weight:600; font-size:clamp(2.3rem, 4.6vw, 3.9rem); line-height:1.08; letter-spacing:-.01em;}
.hero h1 em{font-style:normal; background:linear-gradient(90deg,var(--gold-light),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.lead{color:rgba(247,243,232,.75); font-size:1.05rem; max-width:640px;}

.stat-strip{margin-top:3.5rem; padding:1.6rem 1rem;}
.stat-strip .stat{text-align:center; border-right:1px dashed rgba(247,243,232,.18);}
.stat-strip .stat:last-child{border-right:none;}
.stat-strip .num{font-family:var(--mono); font-weight:600; color:var(--gold-light); font-size:clamp(1.4rem,2.6vw,2.1rem);}
.stat-strip .label{color:rgba(247,243,232,.6); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;}

.section-title{font-weight:600; letter-spacing:-.01em;}
.section-pad{padding:5.5rem 0;}
.text-teal{color:var(--teal);}
.bg-ink{background:var(--ink);}
.bg-ink-2{background:var(--ink-2);}
.text-cream{color:var(--cream);}
.text-gold{color:var(--gold);}

/* About emblem */
.emblem{aspect-ratio:1/1; border-radius:50%; max-width:320px; margin:0 auto; position:relative; box-shadow:0 0 0 8px rgba(212,165,55,.08), 0 25px 50px rgba(0,0,0,.3);}
.emblem img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:3px solid var(--gold);}
.emblem::after{content:""; position:absolute; inset:-14px; border-radius:50%; border:1px dashed rgba(212,165,55,.35); pointer-events:none;}
.vm-card{border-radius:16px; padding:2.2rem; height:100%;}

/* Service ticket cards — using real Tahfiz photos */
.service-ticket{padding:2rem 2rem 1.6rem 2rem; height:100%; transition:transform .25s ease, box-shadow .25s ease;}
.service-ticket:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(10,16,30,.1);}
.service-ticket .icon-box{width:52px; height:52px; border-radius:12px; background:var(--ink); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.3rem; margin-bottom:1rem;}
.service-ticket img{border-radius:10px; height:150px; object-fit:cover; width:100%; margin-top:1.2rem;}

.tech-card{
  background:linear-gradient(160deg,#0F3D3A 0%, #071F1E 100%);
  border:1px solid rgba(34,197,94,.15);
  color:#fff; border-radius:18px; padding:1.7rem; height:100%;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.tech-card h5{font-size:1.05rem;}
.tech-card p.small{color:rgba(255,255,255,.65);}
.tech-card .divider{width:34px; height:3px; background:#22C55E; border-radius:2px; margin:.5rem 0 .9rem;}
.mint-check{color:#22C55E;}
.mint-chip{display:inline-flex; align-items:center; gap:.35rem; background:#22C55E; color:#06251c; font-weight:700; font-size:.68rem; padding:.15rem .5rem; border-radius:100px;}
.phone-mock{margin-top:1.2rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:1rem; position:relative; min-height:210px;}
.phone-shell{width:120px; background:#111827; border-radius:16px; padding:.6rem .6rem .8rem; border:1px solid rgba(255,255,255,.12); position:relative; z-index:2;}
.phone-shell .phone-head{display:flex; align-items:center; justify-content:space-between; font-size:.55rem; color:rgba(255,255,255,.7); margin-bottom:.5rem;}
.phone-shell .qr-mini{background:#fff; border-radius:8px; padding:6px; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); gap:2px; position:relative; overflow:hidden;}
.phone-shell .qr-mini span{background:#0A101E; border-radius:1px;}
.phone-shell .qr-mini span:nth-child(4n){background:transparent;}
.phone-shell .qr-mini::after{content:""; position:absolute; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, #22C55E, transparent); box-shadow:0 0 10px 2px rgba(34,197,94,.8); animation:qrsweep 2.4s ease-in-out infinite;}
@keyframes qrsweep{0%{top:4%;} 50%{top:90%;} 100%{top:4%;}}
.phone-shell .check-badge{width:26px; height:26px; border-radius:50%; background:#22C55E; color:#06251c; display:flex; align-items:center; justify-content:center; font-size:.8rem; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); box-shadow:0 4px 10px rgba(0,0,0,.4);}
.ticket-stub{position:absolute; right:1rem; bottom:1.1rem; width:150px; background:#E9EEF3; color:#0A101E; border-radius:8px; padding:.55rem .7rem; font-family:var(--mono); font-size:.62rem; box-shadow:0 10px 24px rgba(0,0,0,.35); transform:rotate(-2deg);}
.ticket-stub .tt{font-weight:700; font-size:.72rem; margin-bottom:.15rem;}
.ticket-stub .tv{opacity:.65;}
.log-panel{margin-top:1.2rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:.9rem 1rem;}
.log-panel .lp-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem;}
.log-panel .lp-head .lp-icon{width:26px;height:26px;border-radius:7px;background:#22C55E;color:#06251c;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;}
.log-panel .lp-date{margin-left:auto; font-family:var(--mono); font-size:.62rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:.2rem .5rem; border-radius:100px;}
.log-row2{display:flex; align-items:center; gap:.5rem; padding:.4rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.68rem;}
.log-row2:last-of-type{border-bottom:none;}
.avatar-chip{width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; color:#fff; flex-shrink:0;}
.log-row2 .lname{flex:1 1 auto; opacity:.9;}
.log-row2 .lstatus{color:#22C55E; font-size:.6rem; white-space:nowrap;}
.log-panel .lp-foot{display:flex; align-items:center; gap:.4rem; font-size:.62rem; opacity:.6; margin-top:.5rem;}
.sync-panel{margin-top:1.2rem; min-height:200px; position:relative;}
.device-row{display:flex; justify-content:space-between; padding:0 .3rem; margin-bottom:.6rem;}
.device-badge{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:1rem; position:relative;}
.device-badge .mini-ok{position:absolute; bottom:-5px; right:-5px; width:14px; height:14px; border-radius:50%; background:#22C55E; color:#06251c; font-size:.5rem; display:flex; align-items:center; justify-content:center;}
.live-card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:.8rem .9rem;}
.live-card .lc-top{display:flex; align-items:center; font-size:.62rem; opacity:.7; margin-bottom:.3rem;}
.live-card .lc-num{font-family:var(--mono); font-weight:700; font-size:1.3rem; color:#fff;}
.live-card .lc-up{color:#22C55E; font-size:.65rem;}
.mini-bars{display:flex; align-items:flex-end; gap:4px; height:36px; margin-top:.5rem;}
.mini-bars span{width:7px; border-radius:2px 2px 0 0; background:linear-gradient(180deg,var(--gold-light),var(--gold)); display:block;}
.export-chip-row{display:flex; gap:.4rem; margin-top:.6rem; flex-wrap:wrap;}
.export-chip{font-family:var(--mono); font-size:.6rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:.25rem .5rem; display:flex; align-items:center; gap:.3rem;}

.pkg-card{border-radius:14px; padding:1.6rem 1.8rem; height:100%; border:1px solid rgba(10,16,30,.08); background:var(--paper); border-left:4px solid var(--gold);}

/* Partners — now real logo tiles with hover lift, matching your reference screenshot */
.partner-tile{
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  height:100px;
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.partner-tile:hover{transform:translateY(-5px); border-color:rgba(212,165,55,.4); background:#152340;}
.partner-tile img{max-height:42px; max-width:100%; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.75; transition:.25s;}
.partner-tile:hover img{filter:none; opacity:1;}

/* Testimonials — new enrichment */
.testi-card{background:var(--ink-2); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:1.8rem; height:100%;}
.testi-card i.bi-quote{color:var(--gold); font-size:1.6rem;}
.testi-card p{color:rgba(247,243,232,.75); font-size:.92rem;}
.testi-avatar{width:44px; height:44px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; color:var(--ink); font-weight:700; font-family:var(--sans);}

.contact-form .form-control{background:var(--cream); border:1px solid rgba(10,16,30,.12); border-radius:10px; padding:.8rem 1rem;}
.contact-form .form-control:focus{box-shadow:0 0 0 .2rem rgba(212,165,55,.25); border-color:var(--gold);}

footer{background:var(--ink);}
.footer-link{color:rgba(247,243,232,.65);}
.footer-link:hover{color:var(--gold);}
.newsletter-band{background:linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius:16px; padding:2rem 2.5rem;}

@media (max-width:767px){
  .stat-strip .stat{border-right:none; border-bottom:1px dashed rgba(247,243,232,.18); padding-bottom:1rem; margin-bottom:1rem;}
  .stat-strip .stat:last-child{border-bottom:none;}
}

/* ===================================================================
   SHARED ACROSS INNER PAGES (about, events, services, technology, etc.)
   =================================================================== */

/* Nav dropdowns */
.navbar-tahfiz .dropdown-menu{
  background:var(--ink-2); border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:.5rem; margin-top:.6rem; box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.navbar-tahfiz .dropdown-item{color:rgba(247,243,232,.8); border-radius:8px; padding:.55rem .8rem; font-size:.9rem;}
.navbar-tahfiz .dropdown-item:hover, .navbar-tahfiz .dropdown-item:focus{background:rgba(212,165,55,.12); color:var(--gold-light);}
.navbar-tahfiz .nav-link.dropdown-toggle::after{vertical-align:.15em;}
@media (max-width:991px){
  .navbar-tahfiz .dropdown-menu{background:transparent; border:none; box-shadow:none; padding-left:1rem;}
  .navbar-tahfiz .dropdown-item{color:rgba(247,243,232,.7);}
}

/* Breadcrumb / inner page hero */
.page-hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,16,30,.7) 0%, rgba(10,16,30,.94) 80%, var(--ink) 100%),
    var(--ink-2);
  padding:4.5rem 0 3.5rem;
  overflow:hidden;
}
.page-hero::after{content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(212,165,55,.3) 1px, transparent 1.5px); background-size:26px 26px; opacity:.12; pointer-events:none;}
.page-hero h1{color:var(--cream); font-weight:600; font-size:clamp(1.9rem,3.6vw,2.9rem); position:relative; z-index:1;}
.page-hero p{color:rgba(247,243,232,.65); max-width:640px; position:relative; z-index:1;}
.breadcrumb-trail{position:relative; z-index:1; font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;}
.breadcrumb-trail a{color:rgba(247,243,232,.55);}
.breadcrumb-trail a:hover{color:var(--gold);}
.breadcrumb-trail .sep{color:rgba(247,243,232,.3); margin:0 .4rem;}
.breadcrumb-trail .current{color:var(--gold-light);}

/* Icon tile used on service/technology detail pages */
.icon-tile-lg{
  width:64px; height:64px; border-radius:16px; background:var(--ink);
  display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.7rem;
  border:1px solid rgba(212,165,55,.3);
}
.feature-row{display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.1rem;}
.feature-row .fr-icon{
  width:36px; height:36px; border-radius:9px; background:rgba(212,165,55,.1); border:1px solid rgba(212,165,55,.3);
  display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.95rem; flex-shrink:0; margin-top:.15rem;
}
.feature-row h6{margin-bottom:.2rem; color:var(--text-dark); font-weight:700;}

/* Process steps (used on service detail pages) */
.step-tile{
  background:#fff; border-radius:16px; padding:1.6rem; height:100%;
  box-shadow:0 10px 30px rgba(10,16,30,.06); position:relative;
}
.step-tile .step-no{
  font-family:var(--mono); font-weight:700; font-size:.8rem; color:var(--gold);
  background:rgba(212,165,55,.1); border:1px solid rgba(212,165,55,.3);
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-bottom:.9rem;
}

/* Accordion (FAQ) theming */
.accordion-tahfiz .accordion-item{border:1px solid rgba(10,16,30,.08); border-radius:12px !important; margin-bottom:.8rem; overflow:hidden;}
.accordion-tahfiz .accordion-button{font-weight:600; color:var(--navy,var(--text-dark)); background:#fff; padding:1.1rem 1.3rem;}
.accordion-tahfiz .accordion-button:not(.collapsed){background:var(--cream); color:var(--text-dark); box-shadow:none;}
.accordion-tahfiz .accordion-button:focus{box-shadow:none; border-color:rgba(212,165,55,.3);}
.accordion-tahfiz .accordion-button::after{filter:sepia(1) saturate(3) hue-rotate(0deg) brightness(.9);}
.accordion-tahfiz .accordion-body{padding:1rem 1.3rem 1.3rem; color:var(--text-muted);}

/* Event cards + pagination (Events listing page) */
.event-card{
  background:#fff; border-radius:18px; overflow:hidden; height:100%;
  box-shadow:0 10px 30px rgba(10,16,30,.07); transition:transform .25s ease, box-shadow .25s ease;
}
.event-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(10,16,30,.14);}
.event-card .ec-img{height:190px; width:100%; object-fit:cover; display:block;}
.event-card .ec-body{padding:1.3rem 1.4rem;}
.event-card .ec-date{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.72rem;
  color:var(--teal); background:rgba(18,97,90,.08); border:1px solid rgba(18,97,90,.25);
  padding:.25rem .65rem; border-radius:100px; margin-bottom:.6rem;
}
.event-card .ec-cat{
  position:absolute; top:.9rem; left:.9rem; background:var(--gold); color:var(--ink);
  font-weight:700; font-size:.68rem; padding:.25rem .7rem; border-radius:100px; text-transform:uppercase; letter-spacing:.04em;
}
.event-card-media{position:relative;}

.pagination-tahfiz .page-link{
  border:none; background:transparent; color:var(--text-muted); font-weight:600; margin:0 .2rem; border-radius:10px !important;
}
.pagination-tahfiz .page-item.active .page-link{background:var(--gold); color:var(--ink);}
.pagination-tahfiz .page-link:hover{background:rgba(212,165,55,.12); color:var(--text-dark);}

/* Event detail page */
.event-detail-hero{
  position:relative; border-radius:0; overflow:hidden; min-height:360px;
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.event-detail-hero::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,16,30,.2), rgba(10,16,30,.92));}
.event-detail-hero .edh-content{position:relative; z-index:1; padding:3rem 0 9rem;}
.event-meta-strip{background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(10,16,30,.08); padding:1.4rem; margin-top:-3.2rem; position:relative; z-index:2;}
.event-meta-strip .em-item{display:flex; align-items:center; gap:.6rem;}
.event-meta-strip .em-item i{color:var(--gold); font-size:1.2rem;}
.event-meta-strip .em-label{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:.1rem;}
.event-gallery img{border-radius:12px; width:100%; height:160px; object-fit:cover;}

/* Legal pages typography */
.legal-content h2{font-size:1.4rem; color:var(--text-dark); margin-top:2.2rem; margin-bottom:.8rem;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p, .legal-content li{color:var(--text-muted); line-height:1.75;}
.legal-content ul{padding-left:1.2rem;}
.legal-content .updated-chip{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.75rem;
  color:var(--teal); background:rgba(18,97,90,.08); border:1px solid rgba(18,97,90,.25);
  padding:.3rem .8rem; border-radius:100px;
}

/* Small util */
.text-navy{color:#0F2140;}
.section-pad-sm{padding:3.5rem 0;}

/* Full-image page hero — banner graphic already contains its own headline/text */
.page-hero-image{ position:relative; line-height:0; background:var(--ink); }
.page-hero-img{ display:block; width:100%; height:auto; }