/* ============================================================
   ZAEEM IQBAL — GLOBAL SITE THEME
   Color theme sourced from Shop.html. Font sourced from fragments.html (Manrope).
   Applies: unified palette, rounded-everywhere UI, shared nav/footer, responsive rules.
   ============================================================ */

:root{
  --c-base: #050506;
  --c-surface: #0d0e12;
  --c-card: #13141a;
  --c-cardhover: #1a1c24;
  --c-border: rgba(255,255,255,0.12);
  --c-primary: #ffffff;
  --c-secondary: #cbd5e1;
  --c-body: #94a3b8;
  --c-accent: #ff3b30;
  --c-gold: #e2b857;
  --c-patreon: #ff424d;
  --c-whatsapp: #25d366;
  --radius-s: 0.75rem;
  --radius-m: 1.25rem;
  --radius-l: 1.75rem;
  --radius-pill: 999px;
}

html{ scroll-behavior:smooth; background:var(--c-base); color:var(--c-primary); }
body{ font-family:'Manrope', sans-serif; background:var(--c-base); color:var(--c-primary); }
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:var(--c-base); }
::-webkit-scrollbar-thumb{ background:#262833; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:#475569; }
.scrollbar-hide::-webkit-scrollbar{ display:none; }
.scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }

/* ---------- ROUNDED EVERYWHERE — no sharp edges site-wide ---------- */
img, video, iframe, button, input, textarea, select,
.card, .huge-cta, .media-placeholder, .placeholder-ring,
nav, header, footer, .site-nav-pill, .site-card, .rounded-fix,
a.btn, .btn-rounded, .box, .panel {
  border-radius: var(--radius-m);
}
/* Safety net: any element using an inline border or arbitrary bg box gets rounded too,
   unless it's part of the pill-shaped nav (overridden below by later, more specific rules) */
[class*="border-white"], [class*="bg-\[#"], [class*="border border-"] {
  border-radius: var(--radius-m);
}
.rounded-s{ border-radius: var(--radius-s) !important; }
.rounded-l{ border-radius: var(--radius-l) !important; }
.rounded-pill{ border-radius: var(--radius-pill) !important; }
input, textarea, select, button{ border-radius: var(--radius-m); }

/* Film grain overlay (matches Shop) */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ============ SHARED NAVBAR ============ */
#siteNav{ position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 20px; transition:all .4s cubic-bezier(.16,1,.3,1); }
#siteNav.scrolled{ background:rgba(13,14,18,.78); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--c-border); }
.nav-inner{ max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.nav-logo img{ height:34px; width:auto; border-radius:0; }
.nav-pill{ display:flex; align-items:center; gap:.35rem; background:rgba(255,255,255,.06); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.15); padding:.4rem; border-radius:var(--radius-pill); }
.nav-pill a{ position:relative; padding:.55rem 1.1rem; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-secondary); text-decoration:none; border-radius:var(--radius-pill); transition:color .3s ease, background .3s ease; white-space:nowrap; }
.nav-pill a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav-pill a.active{ color:#fff; background:rgba(255,255,255,.1); }
.nav-pill a.nav-hire{ color:var(--c-accent) !important; font-weight:800; }
.nav-pill a.nav-hire:hover{ background:rgba(255,59,48,.14); }
.nav-right{ display:flex; align-items:center; gap:.85rem; }
.nav-patreon{ display:flex; align-items:center justify-center; width:38px; height:38px; border-radius:var(--radius-pill); background:rgba(255,66,77,.12); border:1px solid rgba(255,66,77,.35); color:var(--c-patreon); transition:transform .3s ease, background .3s ease; }
.nav-patreon:hover{ transform:scale(1.08) rotate(-4deg); background:rgba(255,66,77,.22); }
.nav-burger{ display:none; width:38px; height:38px; border-radius:var(--radius-pill); border:1px solid var(--c-border); align-items:center; justify-content:center; background:rgba(255,255,255,.05); }
#mobileNav{ display:none; flex-direction:column; gap:.25rem; padding:1rem; margin-top:.75rem; background:rgba(13,14,18,.96); border:1px solid var(--c-border); border-radius:var(--radius-m); }
#mobileNav.open{ display:flex; }
#mobileNav a{ padding:.85rem 1rem; color:var(--c-secondary); text-decoration:none; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; border-radius:var(--radius-s); }
#mobileNav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
#mobileNav a.nav-hire{ color:var(--c-accent); }

@media (max-width: 1024px){
  .nav-pill{ display:none; }
  .nav-burger{ display:flex; }
}

/* ============ SHARED FOOTER ============ */
#siteFooter{ border-top:1px solid var(--c-border); padding:2.25rem 1.5rem; margin-top:4rem; }
.footer-inner{ max-width:1400px; margin:0 auto; display:flex; flex-direction:column-reverse; gap:.75rem; align-items:center; justify-content:space-between; font-family:'Manrope',sans-serif; font-size:.72rem; letter-spacing:.03em; color:var(--c-body); }
@media (min-width:768px){ .footer-inner{ flex-direction:row; } }

/* ============ Glow icon sequence (social icons) ============ */
@keyframes seqGlow{
  0%, 100%{ color:var(--c-body); text-shadow:none; filter:none; transform:scale(1); }
  6%{ color:#fff; text-shadow:0 0 14px rgba(255,255,255,.85), 0 0 28px rgba(255,59,48,.4); transform:scale(1.12); }
  13%, 100%{ color:var(--c-body); text-shadow:none; transform:scale(1); }
}
.glow-seq-1{ animation:seqGlow 3.6s infinite ease-in-out; animation-delay:0s; }
.glow-seq-2{ animation:seqGlow 3.6s infinite ease-in-out; animation-delay:.4s; }
.glow-seq-3{ animation:seqGlow 3.6s infinite ease-in-out; animation-delay:.8s; }

/* ============ Faded scroll-down arrows ============ */
.scroll-arrow-edge{ position:fixed; top:50%; transform:translateY(-50%); z-index:40; opacity:.22; pointer-events:none; display:flex; flex-direction:column; gap:6px; animation:arrowPulse 2.2s ease-in-out infinite; }
.scroll-arrow-edge.left{ left:18px; }
.scroll-arrow-edge.right{ right:18px; }
@keyframes arrowPulse{ 0%,100%{ opacity:.14; transform:translateY(-50%) translateY(0);} 50%{ opacity:.32; transform:translateY(-50%) translateY(6px);} }
@media (max-width: 768px){ .scroll-arrow-edge{ display:none; } }

/* ============ Easter egg letters (subtle, near-invisible) ============ */
.egg-letter{ opacity:.05; font-size:.55rem; letter-spacing:.2em; user-select:none; transition:opacity .6s ease; }
.egg-letter:hover{ opacity:.35; }