/* ===== Core HSL + base tokens ===== */
:root{
  --h:225; --s:80%; --l:60%;
  --brand:hsl(var(--h),var(--s),var(--l));
  --brand-2:hsl(calc(var(--h)+45),85%,64%);
  --brand-3:hsl(calc(var(--h)-30),90%,55%);
  --bg:#040404; --fg:#f8f8f8; --muted:#9bb0d7;
  --glass:14px;

  /* semantic */
  --bg-0: var(--bg);
  --bg-1: color-mix(in oklab, var(--bg) 92%, #f3e7e7 8%);
  --bg-2: color-mix(in oklab, var(--bg) 30%, #000 15%);
  --fg-1: var(--fg);
  --fg-2: color-mix(in oklab, var(--fg) 70%, transparent);
  --fg-strong:#ffffff;
  --border: color-mix(in oklab, var(--fg) 14%, var(--bg) 86%);
  --chip-bg: color-mix(in oklab, var(--fg) 6%, transparent);
  --chip-border: color-mix(in oklab, var(--fg) 12%, transparent);
  --grid-accent: color-mix(in oklab, var(--fg) 8%, transparent);
  --card-grad-1: color-mix(in oklab, var(--fg) 6%, transparent);
  --card-grad-2: color-mix(in oklab, var(--fg) 3%, transparent);
  --shadow-rgb: 79,157,255;

  /* icons */
  --icon: var(--brand);
  --icon-accent: var(--brand-2);
  --icon-accent-2: var(--brand-3);
  --icon-muted: var(--fg-2);
  --icon-contrast: var(--fg-strong);
  --icon-bg: var(--chip-bg);
  --icon-border: var(--chip-border);
  --icon-size: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Cairo",system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--fg-1);
  background: radial-gradient(1000px 600px at 82% -10%, rgba(var(--shadow-rgb), .18), transparent 60%), var(--bg-0);
  overflow-x:hidden;
}

/* Navbar glass */
.glass-nav{ background: color-mix(in oklab, var(--bg) 70%, transparent); backdrop-filter: blur(12px); border-bottom:1px solid var(--border) }
.navbar .nav-link{ color:var(--fg-1) }
.navbar .nav-link:hover{ color:var(--brand-2) }
.fw-800{ font-weight:800 }

/* Brand button */
.btn-brand{
  background: conic-gradient(from 180deg at 50% 50%, var(--brand), var(--brand-2), var(--brand-3), var(--brand));
  border:0; color:#feffff; box-shadow:0 8px 30px rgba(var(--shadow-rgb), .25);
}
.btn-brand:hover{ filter:brightness(.96) }

/* Hero */
.hero{ position:relative; padding:6rem 0 4rem }
.hero .lead{ color:var(--fg-2) }

/* Hero visual */
.hero-visual{ position:relative; height:220px; border-radius:20px; overflow:hidden; isolation:isolate }
#neuralCanvas{ position:absolute; inset:0; display:block; z-index:0 }
.hero-visual::before{
  content:""; position:absolute; inset:-30%; filter:blur(40px);
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(83,180,255,.25), transparent 60%),
    radial-gradient(60% 50% at 80% 70%, rgba(146,83,255,.25), transparent 60%),
    radial-gradient(50% 40% at 40% 80%, rgba(37,238,197,.18), transparent 60%);
  animation: drift 22s ease-in-out infinite;
}
.hero-visual::after{
  content:""; position:absolute; inset:0; opacity:.25; mix-blend-mode:screen;
  background:
    linear-gradient(transparent 49%, var(--grid-accent) 50%) 0 0/100% 38px,
    linear-gradient(90deg, transparent 49%, var(--grid-accent) 50%) 0 0/38px 100%;
}
@keyframes drift{ 0%,100%{transform:translateY(-10px)} 50%{transform:translateY(10px)} }

/* Cards */
.card.feature,.system-card{
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--card-grad-1), var(--card-grad-2));
  border-radius:16px; position:relative; overflow:hidden;
}
.system-card{ transform-style:preserve-3d }
.system-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(200px 80px at var(--mx,50%) -20%, color-mix(in oklab, var(--brand) 40%, transparent), transparent 70%);
  transition: background .2s ease;
}
.system-card:hover{ box-shadow:0 10px 40px rgba(var(--shadow-rgb), .18) }
.system-card .card-img-top{ border-top-left-radius:16px; border-top-right-radius:16px; object-fit:cover }
.ratio-4x3{ aspect-ratio:4/3 } .object-cover{ object-fit:cover }

/* Chips */
.tech-chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem }
.tech-chips .chip{ padding:.3rem .6rem; border-radius:999px; font-size:.8rem; background:var(--chip-bg); border:1px solid var(--chip-border) }

/* Background dots */
.bg-dots{ background-image: radial-gradient(var(--grid-accent) 1px, transparent 1px); background-size:18px 18px }

/* Marquee */
.marquee{ display:flex; gap:2rem; white-space:nowrap; overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.marquee span{ opacity:.65; animation: slide 16s linear infinite }
@keyframes slide{ from{ transform: translateX(0)} to{ transform: translateX(-100%)} }

/* Reveal */
.reveal{ opacity:0; transform: translateY(22px); transition:.6s ease }
.reveal.visible{ opacity:1; transform: translateY(0) }

/* Glass section */
.glass{ backdrop-filter: blur(14px); background: color-mix(in oklab, var(--bg) 60%, transparent); border:1px solid var(--border); border-radius:var(--glass) }

/* Sections */
.py-6{ padding-block:5rem }

/* Motion reduce */
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ===== Themes ===== */
.theme-aurora{
  --h:225; --s:88%; --l:60%;
  --bg:#070a12; --fg:#eaf1ff; --muted:#9bb0d7; --fg-strong:#ffffff;
  --shadow-rgb:79,157,255;
  --icon: var(--brand); --icon-accent: var(--brand-2);
}
.theme-neon{
  --h:280; --s:90%; --l:62%;
  --bg:#0a0612; --fg:#eef2ff; --muted:#b2a8ff; --fg-strong:#ffffff;
  --shadow-rgb:255,0,153;
  --icon:#ff0099; --icon-accent:#00d6ff;
}
.theme-matrix{
  --h:140; --s:70%; --l:52%;
  --bg:#050a07; --fg:#e9ffee; --muted:#9fe7b7; --fg-strong:#eafff3;
  --shadow-rgb:0,255,120;
  --icon:#00ff78; --icon-accent:#00e0a0;
}
.theme-solar{
  --h:35; --s:95%; --l:62%;
  --bg:#0b0d14; --fg:#fff8e6; --muted:#f6d7a8; --fg-strong:#fff5cc;
  --shadow-rgb:255,196,0;
  --icon:#ffc400; --icon-accent:#ff5e00;
}

/* ===== Readability ===== */
.soft-typography :where(h1,h2,h3,h4,h5,h6){
  color: var(--fg-strong) !important;
  opacity:1 !important;
  font-weight:800;
  letter-spacing:.2px;
  text-shadow:0 2px 6px rgba(255, 213, 1, 0.671);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
#services h2,#systems h2,#contact h3,.card .card-title{
  color:var(--fg-strong) !important; opacity:1 !important; text-shadow:0 1px 3px rgb(249, 249, 249)
}
.lead,.text-muted{ color:var(--fg-2) !important }

/* ===== Icons base ===== */
.bi,.icon{
  color: var(--icon);
  font-size: var(--icon-size);
  transition: color .2s ease, transform .15s ease, filter .2s ease;
  vertical-align:-2px;
}

/* حالات شائعة */
.icon-muted     { color: var(--icon-muted) !important; }
.icon-contrast  { color: var(--icon-contrast) !important; }
.icon-brand     { color: var(--brand) !important; }
.icon-accent    { color: var(--icon-accent) !important; }
.icon-accent-2  { color: var(--icon-accent-2) !important; }

/* أحجام */
.icon-14{ font-size:14px }
.icon-16{ font-size:16px }
.icon-20{ font-size:20px }
.icon-24{ font-size:24px }
.icon-32{ font-size:32px }
.icon-48{ font-size:48px }

/* شارة أيقونة */
.icon-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:999px;
  background: var(--icon-bg); border:1px solid var(--icon-border);
}
.icon-chip .bi{ color: var(--icon) }

/* Navbar context */
.navbar .nav-link .bi{ color: currentColor }
.navbar .nav-link:hover .bi{ color: var(--brand-2) }

/* Buttons */
.btn .bi{ margin-inline-end:.35rem }
.btn-brand .bi{ color:#06101e }
.btn-outline-light .bi{ color: currentColor }

/* Cards context */
.card .bi{ color: var(--icon-muted) }
.card:hover .bi{ color: var(--icon-accent) !important; transform:translateY(-1px) }

/* Glass context */
.glass .bi{ 
  color: color-mix(in oklab, var(--icon) 80%, #fff 20%);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Data attributes */
[data-icon="brand"]   .bi{ color: var(--brand) }
[data-icon="accent"]  .bi{ color: var(--icon-accent) }
[data-icon="accent2"] .bi{ color: var(--icon-accent-2) }
[data-icon="muted"]   .bi{ color: var(--icon-muted) }
[data-icon="contrast"] .bi{ color: var(--icon-contrast) }

/* Hover feedback */
.icon-hover:hover .bi{ transform: translateY(-1px) }
/* ===== AI Footer ===== */
.ai-footer{
  position: relative;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  overflow: clip;
}
.footer-title{
  color: var(--fg-strong);
  letter-spacing:.3px;
  margin-bottom:.75rem;
  text-transform:uppercase;
  font-weight:700;
  font-size:.85rem;
  opacity:.95;
}
.footer-links a{
  display:flex; align-items:center; gap:.5rem;
  padding:.25rem 0;
  color: var(--fg-2); text-decoration:none;
  transition: color .2s ease, transform .15s ease;
}
.footer-links a .bi{ color: var(--icon-muted); font-size:18px }
.footer-links a:hover{ color: var(--brand-2); transform: translateX(-2px) }
.footer-links a:hover .bi{ color: var(--icon-accent) }

.text-footer-muted{ color: var(--fg-2) }

.footer-news .input-group{
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
}
.footer-news .input-group-text{
  background: transparent; border:0; color: var(--icon)
}
.footer-news .form-control{
  background: transparent; border:0; color:var(--fg-1)
}
.footer-news .form-control::placeholder{ color: color-mix(in oklab, var(--fg) 45%, transparent) }
.footer-news .btn.btn-brand{ border-radius:0 }

.bg-chip{
  background: var(--chip-bg);
  border:1px solid var(--chip-border);
  color: var(--fg-1); font-weight:600;
  display:inline-flex; align-items:center; gap:.35rem;
}
.bg-chip .bi{ color: var(--icon) }

/* Divider as subtle gradient */
.footer-divider{
  height:1px; border:0;
  background: linear-gradient(90deg,
    transparent, color-mix(in oklab, var(--fg) 12%, transparent) 20%,
    color-mix(in oklab, var(--fg) 12%, transparent) 80%, transparent);
}

/* Social icon buttons */
.btn-icon{
  --size: 40px;
  width: var(--size); height: var(--size);
  border-radius: 12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--chip-bg); border:1px solid var(--chip-border);
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.btn-icon .bi{ color: var(--icon); font-size:18px }
.btn-icon:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand) 40%, var(--chip-border));
  background: color-mix(in oklab, var(--chip-bg) 60%, var(--brand) 10%);
}

/* Ambient glow ring */
.footer-ring{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-180px; width:780px; height:780px; border-radius:50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--brand) 18%, transparent), transparent 70%);
  filter: blur(40px); opacity:.6; pointer-events:none;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .footer-links a{ padding:.35rem 0 }
  .btn-icon{ --size: 36px }
}

/* Matrix vibe */
.theme-matrix .footer-news .input-group,
.matrix-card, .matrix-msg {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0,255,140,0.25);
  box-shadow: 0 0 12px rgba(0,255,140,0.12) inset, 0 0 24px rgba(0,255,140,0.06);
}

.theme-matrix .form-control,
.theme-matrix .input-group-text,
.theme-matrix .btn-brand {
  color: #caffea;
  border-color: rgba(2, 46, 26, 0.35);
}

.theme-matrix .btn-brand {
  background: linear-gradient(90deg, rgba(0,255,140,0.15), rgba(0,255,140,0.35));
  backdrop-filter: blur(4px);
}
.theme-matrix .btn-brand:hover { filter: brightness(1.15); }

.matrix-msg {
  margin-top: .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
  color: #9fffcf;
  min-height: 1.4em;
  text-shadow: 0 0 8px rgba(0,255,140,0.6);
  transition: transform .2s ease;
}
.matrix-msg.error { color: #ff9fb0; text-shadow: 0 0 8px rgba(255,80,120,.5); }
.matrix-msg.info  { color: #b6ffb6; opacity: .85; }

.shake {
  animation: shake .28s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* مطر الكود للخلفية إن أردت تغميق التذييل */
.theme-matrix .ai-footer { position: relative; overflow: hidden; }
.theme-matrix .ai-footer::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(transparent 0 28px, rgba(13, 176, 103, 0.07) 28px 29px),
    radial-gradient(1200px 400px at 50% 100%, rgba(0,255,140,.08), transparent 60%);
  pointer-events:none;
}