/*
Theme Name: Hijrah Media
Theme URI: https://hijrahmedia.com
Author: Hijrah Media
Description: A premium, responsive WordPress theme for Hijrah Media — websites, branding, social media, and creative services.
Version: 1.0.0
Text Domain: hijrah-media
*/

:root {
  --hm-bg: #090b10;
  --hm-surface: #11151d;
  --hm-surface-2: #171c26;
  --hm-text: #f4f6f8;
  --hm-muted: #a8b0bd;
  --hm-line: rgba(255,255,255,.09);
  --hm-accent: #d7b56d;
  --hm-accent-2: #f0d79d;
  --hm-max: 1180px;
  --hm-radius: 24px;
  --hm-shadow: 0 24px 70px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hm-bg);
  color: var(--hm-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; }
.container { width: min(calc(100% - 36px), var(--hm-max)); margin-inline: auto; }
.section { padding: 110px 0; position: relative; }
.section-sm { padding: 72px 0; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; color:var(--hm-accent-2); font-size:.82rem; text-transform:uppercase; letter-spacing:.16em; font-weight:700; }
.eyebrow::before { content:""; width:28px; height:1px; background:var(--hm-accent); }
h1,h2,h3,h4,p { margin-top:0; }
h1 { font-size: clamp(3.1rem, 8vw, 7rem); line-height:.94; letter-spacing:-.065em; max-width: 980px; margin-bottom:28px; }
h2 { font-size: clamp(2.25rem, 5vw, 4.8rem); line-height:1.02; letter-spacing:-.045em; margin-bottom:24px; }
h3 { font-size: 1.35rem; line-height:1.2; letter-spacing:-.02em; }
.lead { color:var(--hm-muted); font-size:clamp(1.05rem,2vw,1.3rem); max-width:720px; }
.muted { color:var(--hm-muted); }

.site-header { position:fixed; inset:0 0 auto; z-index:1000; padding:18px 0; transition:.3s ease; }
.site-header.scrolled { background:rgba(9,11,16,.82); backdrop-filter:blur(18px); border-bottom:1px solid var(--hm-line); padding:10px 0; }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.03em; }
.brand-mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#0b0d12; background:linear-gradient(135deg,var(--hm-accent-2),var(--hm-accent)); font-weight:900; box-shadow:0 8px 28px rgba(215,181,109,.22); }
.brand-text span { color:var(--hm-accent-2); }
.primary-nav { display:flex; align-items:center; gap:30px; }
.primary-nav a { color:#d9dde3; font-size:.95rem; }
.primary-nav a:hover { color:#fff; }
.nav-cta { padding:11px 18px; border:1px solid rgba(215,181,109,.45); border-radius:999px; color:var(--hm-accent-2) !important; }
.menu-toggle { display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--hm-line); background:var(--hm-surface); color:#fff; }

.hero { min-height:100vh; display:flex; align-items:center; padding:150px 0 90px; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; width:720px; height:720px; border-radius:50%; background:radial-gradient(circle, rgba(215,181,109,.18), transparent 68%); right:-240px; top:-180px; pointer-events:none; }
.hero::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(to bottom,black,transparent 85%); pointer-events:none; }
.hero-content { position:relative; z-index:2; }
.hero h1 em { font-style:normal; color:var(--hm-accent-2); }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border-radius:999px; font-weight:700; border:1px solid transparent; transition:.25s ease; }
.btn-primary { background:linear-gradient(135deg,var(--hm-accent-2),var(--hm-accent)); color:#111; box-shadow:0 14px 36px rgba(215,181,109,.18); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(215,181,109,.3); }
.btn-secondary { border-color:var(--hm-line); background:rgba(255,255,255,.03); }
.btn-secondary:hover { background:rgba(255,255,255,.07); }
.hero-proof { display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:52px; color:var(--hm-muted); font-size:.92rem; }
.hero-proof span::before { content:"✓"; color:var(--hm-accent); margin-right:8px; }

.marquee { border-block:1px solid var(--hm-line); overflow:hidden; background:#0d1016; }
.marquee-track { display:flex; width:max-content; animation:marquee 24s linear infinite; padding:18px 0; }
.marquee-item { display:flex; align-items:center; gap:22px; padding:0 28px; color:#d9dde3; text-transform:uppercase; font-size:.8rem; letter-spacing:.15em; white-space:nowrap; }
.marquee-dot { width:5px; height:5px; border-radius:50%; background:var(--hm-accent); }
@keyframes marquee { to { transform:translateX(-50%); } }

.section-head { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:end; margin-bottom:52px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); border:1px solid var(--hm-line); border-radius:var(--hm-radius); padding:30px; min-height:280px; position:relative; overflow:hidden; transition:.28s ease; }
.card:hover { transform:translateY(-7px); border-color:rgba(215,181,109,.35); box-shadow:var(--hm-shadow); }
.card-number { font-size:.8rem; letter-spacing:.14em; color:var(--hm-accent-2); margin-bottom:80px; }
.card p { color:var(--hm-muted); margin-bottom:0; }
.card-icon { position:absolute; right:18px; top:18px; width:52px; height:52px; border-radius:16px; border:1px solid var(--hm-line); display:grid; place-items:center; color:var(--hm-accent-2); background:rgba(255,255,255,.03); }

.split { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.panel { border:1px solid var(--hm-line); border-radius:30px; padding:42px; background:var(--hm-surface); }
.panel-dark { background:linear-gradient(145deg,#141923,#0e1117); }
.metric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:34px; }
.metric { padding:22px; border-radius:20px; border:1px solid var(--hm-line); background:rgba(255,255,255,.025); }
.metric strong { display:block; font-size:2rem; color:var(--hm-accent-2); line-height:1; margin-bottom:8px; }

.process { display:grid; gap:14px; counter-reset:step; }
.process-item { counter-increment:step; display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:24px; padding:26px 0; border-bottom:1px solid var(--hm-line); }
.process-item::before { content:"0" counter(step); color:var(--hm-accent-2); font-size:.9rem; letter-spacing:.15em; }
.process-item h3 { margin:0; }
.process-item p { margin:0; color:var(--hm-muted); max-width:520px; }

.cta-box { border-radius:34px; padding:clamp(34px,7vw,80px); background:linear-gradient(130deg,#1a1f29,#0f1218); border:1px solid rgba(215,181,109,.25); position:relative; overflow:hidden; }
.cta-box::after { content:""; position:absolute; width:340px; height:340px; border-radius:50%; right:-80px; top:-100px; background:radial-gradient(circle,rgba(215,181,109,.24),transparent 70%); }
.cta-box > * { position:relative; z-index:1; }

.contact-form { display:grid; gap:14px; margin-top:28px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form input,.contact-form textarea,.contact-form select { width:100%; border:1px solid var(--hm-line); border-radius:16px; background:#0b0e13; color:#fff; padding:15px 16px; outline:none; }
.contact-form textarea { min-height:150px; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus { border-color:rgba(215,181,109,.65); }
.form-message { font-size:.92rem; margin-top:8px; }

.site-footer { padding:34px 0; border-top:1px solid var(--hm-line); color:var(--hm-muted); }
.footer-wrap { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-links { display:flex; gap:18px; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

.page-hero { padding:160px 0 70px; }
.content-area { padding:40px 0 100px; }
.entry-content { max-width:820px; }
.entry-content a { color:var(--hm-accent-2); }

@media (max-width: 900px) {
  .primary-nav { position:fixed; inset:0; background:rgba(9,11,16,.98); flex-direction:column; justify-content:center; transform:translateY(-100%); transition:.3s ease; }
  .primary-nav.open { transform:none; }
  .primary-nav a { font-size:1.35rem; }
  .menu-toggle { display:grid; place-items:center; position:relative; z-index:1001; }
  .section-head,.split { grid-template-columns:1fr; }
  .cards { grid-template-columns:1fr; }
  .card { min-height:230px; }
  .process-item { grid-template-columns:54px 1fr; }
  .process-item p { grid-column:2; }
}
@media (max-width: 620px) {
  .container { width:min(calc(100% - 24px),var(--hm-max)); }
  .section { padding:82px 0; }
  h1 { font-size:clamp(3rem,16vw,4.8rem); }
  .panel { padding:28px; }
  .metric-grid,.form-row { grid-template-columns:1fr; }
  .hero-proof { flex-direction:column; gap:9px; }
  .footer-wrap { align-items:flex-start; flex-direction:column; }
}