/* ==========================================================================
   BLAZMA — Base / Reset / Typography / Utilities
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}
body.no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 var(--s-3); color: var(--text-2); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color var(--t); }
a:hover { color: var(--brand-2); }

img, svg, video, canvas { max-width: 100%; display: block; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-6) 0; }
code, kbd, pre, .mono { font-family: var(--font-mono); }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.skip-link {
  position: absolute; inset-inline-start: 50%; top: -100px;
  transform: translateX(-50%);
  background: var(--brand-1); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); z-index: 999; font-weight: var(--fw-semibold);
  transition: top var(--t);
}
.skip-link:focus { top: 0; color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: content-box; }

::selection { background: rgba(255, 90, 31, .35); color: #fff; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }

.section { padding-block: var(--s-12); }
@media (min-width: 900px) { .section { padding-block: var(--s-16); } }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.end { justify-content: flex-end; }
.items-start { align-items: flex-start; }
.grow { flex: 1 1 auto; min-width: 0; }
.shrink-0 { flex-shrink: 0; }

.g-1 { gap: var(--s-1); } .g-2 { gap: var(--s-2); } .g-3 { gap: var(--s-3); }
.g-4 { gap: var(--s-4); } .g-5 { gap: var(--s-5); } .g-6 { gap: var(--s-6); }
.g-8 { gap: var(--s-8); } .g-10 { gap: var(--s-10); } .g-12 { gap: var(--s-12); }

.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); } .mt-10 { margin-top: var(--s-10); }
.mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }

/* ---------- Type utilities ---------- */
.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }
.t-brand { color: var(--brand-2); }
.t-success { color: var(--success); }
.t-danger { color: var(--danger); }
.t-warning { color: var(--warning); }
.fs-sm { font-size: var(--fs-sm); }
.fs-xs { font-size: var(--fs-xs); }
.fs-caption { font-size: var(--fs-caption); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.fw-black { font-weight: var(--fw-black); }
.ta-center { text-align: center; }
.ta-start { text-align: start; }
.ta-end { text-align: end; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nowrap { white-space: nowrap; }
.gradient-text {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }

.hidden { display: none !important; }
/* سمة hidden يجب أن تتجاوز أي display في الأصناف (مثل .social-btn ذات display:flex) */
[hidden] { display: none !important; }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) and (max-width: 1099px) { .hide-tablet { display: none !important; } }
@media (min-width: 1100px) { .hide-desktop { display: none !important; } }
@media (max-width: 1099px) { .only-desktop { display: none !important; } }
/* عناصر ترويسة ثانوية: تُخفى دون سطح المكتب وتبقى داخل قائمة الجوال */
@media (max-width: 1099px) { .hide-under-desktop { display: none !important; } }

/* ---------- Section heading ---------- */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap;
}
.section-head .eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-2); margin-bottom: var(--s-2);
}
.section-head .eyebrow::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--brand-grad);
}
.section-head h2 { margin-bottom: var(--s-1); }
.section-head .sub { color: var(--text-2); font-size: var(--fs-sm); max-width: 62ch; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--s-4); }
.grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 1180px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1660px) { .grid-products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Ambient background effects ---------- */
.aura { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .5; z-index: 0; }
.aura-brand { background: radial-gradient(circle, rgba(239, 103, 13, .48), transparent 70%); }
.aura-violet { background: radial-gradient(circle, rgba(255, 179, 111, .30), transparent 70%); }
.aura-cyan { background: radial-gradient(circle, rgba(255, 179, 111, .22), transparent 70%); }

.grid-lines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}

/* ---------- Animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes slideUpIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

#view { animation: fadeIn 240ms both; min-height: 60vh; }