/* ════════════════════════════════════════════════════════════════════════
   FAZAA — Companies landing styles
   ────────────────────────────────────────────────────────────────────────
   مستخرج من v2 Companies.html.
   يحوي:
     - aurora bg + glass + hero + how-it-works + footer
     - lightning animation (fz-z) — مستخدم في الـhero
     - ringPulse + fadeUp + fadeIn + ctaGlow keyframes
     - قسم V2 DESIGN (fz2) آخر الملف: الناف اللاصق + شبكة المزايا Bento
       مع الرادار الحي + الخدمات الإضافية جنب بعض (حزمة التصميم المعتمدة)
   ════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { font-family: 'Cairo', system-ui, sans-serif; background: #eef2ff; color: #0f172a; overflow-x: hidden; }
  body { min-height: 100vh; }
  a { color: inherit; }
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #eef2ff; }
  ::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.3); border-radius: 100px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,0.5); }

  :root {
    --text:#0f172a; --text-soft:#475569; --text-dim:#64748b;
    --border:rgba(255,255,255,0.7);
    --blue:#2563eb; --blue-light:#60a5fa; --blue-deep:#1e40af; --blue-soft:rgba(37,99,235,0.12);
    --indigo:#312e81; --indigo-mid:#4338ca; --indigo-light:#818cf8; --indigo-soft:rgba(49,46,129,0.12);
    --gold:#c9a96a; --gold-deep:#a8884a; --gold-soft:#f1e3c0;
  }

  /* ───────────────── ANIMATIONS ───────────────── */
  @keyframes blobDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(80px, 60px) scale(1.1); }
    66% { transform: translate(-50px, 120px) scale(0.95); }
  }
  @keyframes blobDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-120px, -90px) scale(1.15); }
  }
  @keyframes blobDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(100px, -60px) scale(0.9); }
  }
  @keyframes shimmerText { 0% { background-position: 0% center; } 100% { background-position: 300% center; } }
  @keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
    50% { opacity: 0.6; transform: scale(1.15); box-shadow: 0 0 0 8px transparent; }
  }
  @keyframes floatY { 0%, 100% { transform: translateY(0px) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(var(--r, 0deg)); } }
  @keyframes floatYAlt { 0%, 100% { transform: translateY(0px) rotate(var(--r, 0deg)); } 50% { transform: translateY(8px) rotate(var(--r, 0deg)); } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ctaGlow {
    0%, 100% { box-shadow: 0 14px 30px -8px rgba(37,99,235,0.45), 0 0 0 0 rgba(37,99,235,0.4); }
    50% { box-shadow: 0 14px 36px -6px rgba(37,99,235,0.6), 0 0 0 14px transparent; }
  }
  @keyframes premiumShimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
  @keyframes drawPath { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
  @keyframes ringPulse { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } }
  @keyframes orderEnter { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes bounceSubtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

  /* ───────── REVEAL on scroll ───────── */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* ───────── FAZAA LIGHTNING LOGO ───────── */
  .fz-logo{
    --letter-color:#0f172a;
    --letter-shadow:rgba(37,99,235,0.18);
    --z-color:#2563eb;
    --z-light:#60a5fa;
    --z-glow:rgba(37,99,235,0.4);
    --z-aura:rgba(37,99,235,0.18);
    display:inline-flex;align-items:center;justify-content:center;
    direction:rtl;line-height:.85;
    font-family:'Cairo',sans-serif;font-weight:900;
    user-select:none;vertical-align:baseline;
    position:relative;
  }
  .fz-logo.shake{animation:fzShake .35s cubic-bezier(.36,.07,.19,.97) both;}
  @keyframes fzShake{
    10%,90%{transform:translate3d(-0.5px,0.5px,0);}
    20%,80%{transform:translate3d(0.8px,-0.8px,0);}
    30%,50%,70%{transform:translate3d(-1.2px,1.2px,0);}
    40%,60%{transform:translate3d(1.2px,-1.2px,0);}
  }
  .fz-letter{
    display:inline-block;color:var(--letter-color);
    text-shadow:0.04em 0.04em 0 var(--letter-shadow);
    animation:fzBreathe 2s ease-in-out infinite;
  }
  .fz-letter.feh{margin-left:-0.03em;}
  .fz-letter.alif-ayn{margin-right:-0.1em;}
  @keyframes fzBreathe{ 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.06);} }
  .fz-z-container{ position:relative;display:inline-flex;justify-content:center; }
  .fz-z-glow{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle, var(--z-aura) 0%, transparent 70%);
    pointer-events:none;animation:fzAura 2s ease-in-out infinite;z-index:-1;
  }
  @keyframes fzAura{ 0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(.95);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.12);} }
  .fz-z-normal{
    position:absolute;top:6%;color:var(--z-color);
    text-shadow:0.04em 0.04em 0 var(--letter-shadow),0 0 4px var(--z-light),0 0 14px var(--z-color),0 0 28px var(--z-glow),0 0 50px var(--z-glow);
    animation:fzZPulse 4s ease-in-out infinite;
  }
  @keyframes fzZPulse{ 0%,100%{color:var(--z-color);filter:brightness(1);} 50%{color:var(--z-light);filter:brightness(1.15);} }
  .fz-z-electric{
    position:absolute;top:0;opacity:0;pointer-events:none;
    filter:drop-shadow(0 0 12px #2563eb) drop-shadow(0 0 28px #2563eb);z-index:3;
  }
  .fz-thunder{
    position:absolute;bottom:80%;left:50%;width:8px;height:0;background:#fff;
    box-shadow:0 0 16px #2563eb, 0 0 50px #2563eb, 0 0 100px #fff;
    transform:translateX(-50%);z-index:10;border-radius:8px;
  }
  .fz-z-container.striking .fz-thunder{animation:fzStrike .22s ease-in forwards;}
  .fz-z-container.striking .fz-z-normal{animation:fzHideZ .05s ease-out .15s forwards;}
  .fz-z-container.striking .fz-z-electric{animation:fzShowBolt .05s ease-out .15s forwards, fzGlitch .15s .2s infinite;}
  @keyframes fzHideZ{to{opacity:0;}}
  @keyframes fzShowBolt{to{opacity:1;}}
  @keyframes fzStrike{ 0%{height:0;opacity:1;bottom:100%;} 80%{height:420px;opacity:1;bottom:30%;} 100%{height:0;opacity:0;bottom:30%;} }
  @keyframes fzGlitch{
    0%,100%{opacity:1;filter:drop-shadow(0 0 12px #2563eb) drop-shadow(0 0 28px #2563eb);transform:scale(1) skewX(0);}
    30%{opacity:.9;filter:drop-shadow(0 0 8px #2563eb) drop-shadow(0 0 40px #fff);transform:scale(1.02) skewX(-2deg);}
    70%{opacity:.95;filter:drop-shadow(0 0 16px #2563eb) drop-shadow(0 0 22px #60a5fa);transform:scale(.98) skewX(2deg);}
  }

  /* ───────── LAYOUT HELPERS ───────── */
  .wrap { max-width: 1400px; margin: 0 auto; }
  .glass { background: rgba(255,255,255,0.82); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 20px 60px -22px rgba(30,40,90,0.22), inset 0 1px 0 rgba(255,255,255,0.6); }
  .sar { display:inline-flex; align-items:center; }
  .hov:hover { transform: translateY(-2px); }
  .hov3:hover { transform: translateY(-3px); }
  .nav-link { padding:8px 14px; border-radius:100px; cursor:pointer; color:var(--text-soft); text-decoration:none; transition:all .2s; }
  .nav-link:hover { background: rgba(37,99,235,0.08); color: var(--blue); }
  .feat-card { transition: transform .3s, box-shadow .3s; }
  .feat-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px -20px rgba(30,40,90,0.28); }
  .pill-link { transition: transform .15s, box-shadow .2s; }

  /* HOW IT WORKS active state */
  .hiw-circle{ position:relative; width:66px; height:66px; border-radius:50%; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:900; background:linear-gradient(135deg, var(--sc), var(--sc)); box-shadow:0 14px 30px -8px var(--sc), 0 0 0 4px rgba(255,255,255,0.6); transition:all .5s cubic-bezier(.2,.7,.3,1); }
  .hiw-step.active .hiw-circle{ transform:scale(1.12); box-shadow:0 18px 38px -8px var(--sc), 0 0 0 6px rgba(255,255,255,0.35); }
  .hiw-ring{ position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--sc); opacity:0; }
  .hiw-step.active .hiw-ring{ opacity:1; animation:ringPulse 1.6s ease-out infinite; }
  .hiw-title{ font-size:18px; font-weight:800; margin-bottom:8px; color:var(--text); transition:color .3s; }
  .hiw-step.active .hiw-title{ color: var(--sc); }

  html { scroll-behavior: smooth; }
  #features, #how-it-works, #services, #specialties, #extra { scroll-margin-top: 100px; }

  /* ───────── SERVICE PILLS ───────── */
  .svc-pill{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:100px; background:rgba(255,255,255,0.82); border:1px solid var(--border); box-shadow:0 10px 26px -16px rgba(30,40,90,0.4); font-size:15px; font-weight:800; color:var(--text); transition:transform .2s, box-shadow .2s, border-color .2s; }
  .svc-pill:hover{ transform:translateY(-3px); border-color:#2563eb44; box-shadow:0 16px 32px -16px rgba(37,99,235,0.5); }
  .svc-pill svg{ width:22px; height:22px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  /* ── v2: pill coloring — animated gradient on ::before via transform (GPU, zero repaint).
     ⚙ Do NOT replace with background-position animation — that repaints every frame. ── */
  .svc-pill{
    position:relative; isolation:isolate; overflow:hidden;
    background:#eff6ff;
    border:1.5px solid rgba(37,99,235,0.35);
    color:#1e40af;
    box-shadow:0 10px 26px -16px rgba(37,99,235,0.35);
    --g1:#eff6ff; --g2:#dbeafe; --g3:#e0e7ff; --g4:#dbeafe;
    --flow:14s;
  }
  /* A strip made of two identical halves sliding by half its width — seamless loop */
  .svc-pill::before{
    content:""; position:absolute; top:0; bottom:0; left:0; width:200%; z-index:-1;
    background:linear-gradient(90deg,
      var(--g1), var(--g2), var(--g3), var(--g4),
      var(--g1), var(--g2), var(--g3), var(--g4),
      var(--g1));
    animation:svcPillSlide var(--flow) linear infinite;
  }
  .svc-pill:hover{
    transform:translateY(-3px);
    border-color:rgba(37,99,235,0.55);
    box-shadow:0 16px 32px -16px rgba(37,99,235,0.5);
  }
  .svc-pill--grad{ border:none; color:#fff; --flow:10s; }
  .svc-pill--grad img{ filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
  @keyframes svcPillSlide{ to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .svc-pill::before{ animation:none; } }

  /* Unified pill media box — image or emoji at identical height */
  .svc-pill-media{ width:26px; height:26px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
  img.svc-pill-media{ object-fit:contain; }
  .svc-pill-media--emoji{ font-size:19px; line-height:1; }

  /* The word «نطلبها» — animated text gradient (background-position is acceptable here: tiny paint area, one word) */
  .svc-title-flow{
    display:inline-block; padding-bottom:.18em; line-height:1.15;
    background:linear-gradient(90deg, #2563eb, #4338ca, #60a5fa, #1e40af, #2563eb);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:svcTitleShimmer 6s linear infinite;
  }
  @keyframes svcTitleShimmer{ 0%{ background-position:0% center; } 100%{ background-position:300% center; } }
  @media (prefers-reduced-motion: reduce){ .svc-title-flow{ animation:none; } }

  /* ───────── CREDENTIALS STRIP ───────── */
  .credentials {
    display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
    gap: 14px; margin: 8px auto 22px; max-width: 860px;
  }
  .credentials .cred-item {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 18px; border-radius: 16px;
    background: rgba(255,255,255,0.6); border: 1px solid var(--border);
    text-decoration: none; color: var(--text);
  }
  .credentials .cred-item img { height: 40px; width: auto; display: block; border-radius: 6px; }
  .credentials .cred-txt { display: flex; flex-direction: column; gap: 2px; text-align: right; }
  .credentials .cred-label { font-size: 12px; font-weight: 800; color: var(--text); }
  .credentials .cred-num { font-size: 12px; font-weight: 700; color: var(--text-soft); font-family: 'Inter', monospace; direction: ltr; min-height: 14px; }
  .credentials .cred-num b { font-weight: 800; color: var(--text); }
  .credentials .cred-link { cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
  .credentials .cred-link:hover { transform: translateY(-2px); border-color: #2563eb55; box-shadow: 0 10px 24px -10px rgba(37,99,235,0.4); }

  /* ───────────────── AURORA BG ───────────────── */
  .aurora-bg {
    position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  }
  .aurora-grad {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, #eef2ff 0%, #f5f3ff 50%, #fef3e2 100%);
  }
  .aurora-blob {
    position: absolute; border-radius: 50%; filter: blur(55px);
  }
  .aurora-blob.b1 { top: -200px; right: -200px; width: 720px; height: 720px; background: radial-gradient(circle, #2563eb 0%, transparent 65%); opacity: 0.5; filter: blur(45px); }
  .aurora-blob.b2 { top: 200px; left: -120px; width: 640px; height: 640px; background: radial-gradient(circle, #312e81 0%, transparent 65%); opacity: 0.4; }
  .aurora-blob.b3 { top: 800px; right: 100px; width: 540px; height: 540px; background: radial-gradient(circle, #818cf8 0%, transparent 65%); opacity: 0.38; }
  .aurora-blob.b4 { top: 1600px; left: 80px; width: 600px; height: 600px; background: radial-gradient(circle, #c9a96a 0%, transparent 65%); opacity: 0.32; filter: blur(60px); }
  .aurora-blob.b5 { top: 2400px; right: -100px; width: 720px; height: 720px; background: radial-gradient(circle, #2563eb 0%, transparent 65%); opacity: 0.38; }
  .aurora-blob.b6 { top: 3200px; left: -100px; width: 600px; height: 600px; background: radial-gradient(circle, #312e81 0%, transparent 65%); opacity: 0.42; }
  .aurora-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size: 4px 4px; opacity: 0.4; mix-blend-mode: overlay;
  }

  /* Wraps non-aurora content above aurora */
  .page-stack { position: relative; z-index: 1; }

  @media (max-width: 1024px){
    .hero-grid, .dual-grid, .stats-grid, .premium-grid, .how-grid, .flow-grid { grid-template-columns: 1fr; }
    .hero-collage { min-height: 480px; }
    .h1-hero { font-size: 56px; }
    .h2-big { font-size: 38px; }
  }
  @media (max-width: 560px){
    .fz2-nav-links a:not(.fz2-nav-cta) { display: none; }
    .fz2-nav-tag { display: none; }
  }
  /* ─────── EXTRACTED INLINE PATTERNS (16 repeated patterns → classes) ─────── */
  .fz-feat-head {
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:18px;
  }
  .fz-feat-title {
    font-size:20px;
    font-weight:900;
    margin-bottom:12px;
    position:relative;
  }
  .fz-feat-desc {
    font-size:14px;
    line-height:1.9;
    color:var(--text-soft);
    position:relative;
  }
  .fz-feat-card {
    padding:28px;
    position:relative;
    overflow:hidden;
    cursor:default;
  }
  .fz-h-step {
    font-size:18px;
    font-weight:900;
    margin-bottom:8px;
  }
  .fz-p-sm {
    font-size:13.5px;
    color:var(--text-soft);
    line-height:1.8;
  }
  .fz-p-xs {
    font-size:13px;
    color:var(--text-soft);
    line-height:1.7;
  }
  .fz-link-dim {
    color:var(--text-dim);
    text-decoration:none;
  }
  .fz-c-blue {
    color:var(--blue);
  }
  .fz-stat-cell {
    text-align:center;
    padding:0 14px;
    border-left:1px solid rgba(0,0,0,0.06);
  }
  .fz-label-sm {
    font-size:13px;
    font-weight:700;
    color:var(--text-soft);
  }
  .fz-h-blue {
    font-size:18px;
    font-weight:900;
    color:var(--blue-deep);
  }
  .fz-label-sm-rel {
    font-size:13px;
    font-weight:700;
    color:var(--text-soft);
    position:relative;
  }

  /* ════════════════════════════════════════════════════════════
     V2 DESIGN (fz2) — القطع الثلاث المعتمدة من حزمة التصميم:
       1) الناف اللاصق المنكمش (fz2-nav*)
       2) شبكة المزايا Bento + الرادار الحي (fz2-bento / fz2-card / fz2-radar)
       3) الخدمات الإضافية جنب بعض (fz2-extra* / fz2-svc)
     المرجع: design_handoff_companies_v2/snippets/01..03 — hifi معتمد.
     ════════════════════════════════════════════════════════════ */

  @keyframes fz2Sweep { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
  @keyframes fz2BlipCatch {
    0%   { opacity:1; transform:scale(1.6); background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,0.25), 0 0 14px 3px rgba(74,222,128,0.9); }
    35%  { opacity:0.9; transform:scale(1.15); background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,0.18), 0 0 10px 2px rgba(74,222,128,0.6); }
    100% { opacity:0; transform:scale(0.7); background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,0); }
  }
  @keyframes fz2Blob { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-60px,-40px) scale(1.1); } }

  /* ── 1) الناف اللاصق ── */
  .fz2-nav-wrap { padding:16px 32px 0; position:sticky; top:0; z-index:60; }
  .fz2-nav {
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:10px 12px; border-radius:100px;
    background:rgba(255,255,255,0.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.5); backdrop-filter:blur(28px) saturate(1.5);
    border:1px solid rgba(255,255,255,0.8);
    box-shadow:0 12px 40px -18px rgba(30,40,90,0.22);
    transition:transform .3s, box-shadow .3s;
  }
  .fz2-nav.scrolled {
    transform:scale(0.97);
    box-shadow:0 18px 50px -18px rgba(30,40,90,0.35);
  }
  .fz2-nav-brand { display:flex; align-items:center; gap:10px; padding-right:12px; }
  .fz2-logo { display:inline-flex; align-items:center; direction:rtl; font-weight:900; font-size:24px; line-height:1; user-select:none; color:var(--text); }
  .fz2-logo .z { color:var(--blue); text-shadow:0 0 4px #60a5fa, 0 0 14px #2563eb; }
  .fz2-nav-tag { font-size:10px; font-weight:800; letter-spacing:2px; color:var(--blue-deep); background:rgba(37,99,235,0.1); border:1px solid rgba(37,99,235,0.25); padding:4px 10px; border-radius:100px; }
  .fz2-nav-links { display:flex; align-items:center; gap:2px; font-size:13.5px; font-weight:700; color:var(--text-soft); }
  .fz2-nav-links a { padding:9px 14px; border-radius:100px; text-decoration:none; color:inherit; transition:background .2s, color .2s; }
  .fz2-nav-links a:hover { background:rgba(37,99,235,0.08); color:var(--blue); }
  .fz2-nav-cta {
    background:linear-gradient(135deg, #2563eb, #4338ca) !important; color:#fff !important;
    padding:11px 24px !important; border-radius:100px; font-weight:800; font-size:13.5px;
    margin-right:8px; box-shadow:0 8px 22px rgba(37,99,235,0.35);
    transition:transform .2s !important; display:inline-flex; align-items:center; gap:8px;
  }
  .fz2-nav-cta:hover { transform:translateY(-2px); background:linear-gradient(135deg, #2563eb, #4338ca) !important; }

  /* ── 2) شبكة المزايا Bento (النسخة المضغوطة المعتمدة) ── */
  .fz2-bento { display:grid; grid-template-columns:repeat(12, 1fr); gap:12px; }
  .fz2-card {
    background:rgba(255,255,255,0.55);
    -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4);
    border:1px solid rgba(255,255,255,0.8); border-radius:18px;
    box-shadow:0 14px 36px -18px rgba(30,40,90,0.22), inset 0 1px 0 rgba(255,255,255,0.9);
    padding:18px 20px; transition:transform .3s, box-shadow .3s;
  }
  .fz2-card:hover { transform:translateY(-4px); box-shadow:0 20px 48px -18px rgba(30,40,90,0.3); }
  .fz2-card.span7 { grid-column:span 7; padding:20px 22px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:16px; align-items:center; overflow:hidden; }
  .fz2-card.span5 { grid-column:span 5; padding:20px 22px; }
  .fz2-card.span3 { grid-column:span 3; }
  .fz2-head { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
  .fz2-num {
    width:34px; height:34px; flex-shrink:0; border-radius:10px; color:#fff; font-weight:800; font-size:12.5px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter', sans-serif;
  }
  .fz2-head .fz2-num { width:38px; height:38px; border-radius:12px; font-size:14px; }
  .fz2-card h3 { font-size:14.5px; font-weight:900; margin:0 0 6px; }
  .fz2-head + h3, .fz2-head h3 { font-size:17px; margin:0; }
  .fz2-card p { font-size:12px; line-height:1.75; color:var(--text-soft); margin:0; }
  .fz2-card .lead { font-size:12.5px; }
  .fz2-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
  .fz2-chip {
    display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; color:var(--blue-deep);
    background:rgba(255,255,255,0.75); border:1px solid rgba(37,99,235,0.2);
    padding:6px 13px; border-radius:100px;
  }

  /* ── الرادار الحي (كرت 01) ── */
  .fz2-radar { position:relative; height:170px; }
  /* الميدان: المرجع الوحيد لكل الإحداثيات — غيّر قياسه هنا وكل شي يتبع (المحرك يقرأ الـDOM) */
  .fz2-radar .field { position:absolute; left:50%; top:50%; width:150px; height:150px; transform:translate(-50%,-50%); }
  .fz2-radar .ring { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1.5px solid rgba(37,99,235,0.18); }
  .fz2-radar .ring.r1 { width:100%; height:100%; }
  .fz2-radar .ring.r2 { width:69%; height:69%; border-color:rgba(37,99,235,0.26); }
  .fz2-radar .ring.r3 { width:39%; height:39%; border-color:rgba(37,99,235,0.36); }
  .fz2-radar .sweep {
    position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0deg, transparent 320deg, rgba(37,99,235,0.12) 350deg, rgba(37,99,235,0.55) 358deg, rgba(37,99,235,0.75) 360deg);
    animation:fz2Sweep 4s linear infinite;
  }
  .fz2-radar .pin {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    z-index:1; width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg, #2563eb, #4338ca); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px -5px rgba(37,99,235,0.6);
  }
  /* النقاط: تنزرع مخفية → .live ظهور متدرج → .caught خضراء تذوب */
  .fz2-radar .blip {
    position:absolute; border-radius:50%;
    opacity:0; transform:scale(0.3);
    box-shadow:0 0 0 3px rgba(37,99,235,0.12);
    transition:opacity .4s ease-out, transform .4s ease-out;
  }
  .fz2-radar .blip.live { opacity:0.55; transform:scale(1); }
  .fz2-radar .blip.caught { animation:fz2BlipCatch 1.4s ease-out forwards; }
  @media (prefers-reduced-motion: reduce) {
    .fz2-radar .sweep { animation:none; opacity:0; }
  }

  /* ── كرت البريميوم الذهبي (06) — يعيد استخدام premiumShimmer الموجود (مطابق لـfz2Shimmer بالـsnippet) ── */
  .fz2-card.premium {
    background:linear-gradient(135deg, rgba(201,169,106,0.2), rgba(255,255,255,0.6));
    border-color:rgba(201,169,106,0.45); position:relative; overflow:hidden;
    box-shadow:0 14px 36px -18px rgba(168,136,74,0.3), inset 0 1px 0 rgba(255,255,255,0.9);
  }
  .fz2-card.premium::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(110deg, transparent 30%, rgba(255,235,170,0.35) 50%, transparent 70%);
    background-size:200% 100%; animation:premiumShimmer 4s linear infinite;
  }
  .fz2-premium-tag {
    font-size:9.5px; font-weight:800; padding:3px 9px; border-radius:100px;
    background:linear-gradient(90deg, #c9a96a, #f1e3c0, #c9a96a); background-size:200% 100%;
    animation:premiumShimmer 3s linear infinite; color:#5a3f12; border:1px solid #c9a96a; letter-spacing:1px;
  }

  /* ── 3) الخدمات الإضافية جنب بعض (#extra) ── */
  .fz2-extra-head { text-align:center; margin-bottom:40px; }
  .fz2-extra-head .kicker {
    display:inline-block; font-size:12px; font-weight:800; color:var(--blue-deep); letter-spacing:4px;
    padding:6px 18px; border-radius:100px; background:rgba(255,255,255,0.62);
    border:1px solid rgba(255,255,255,0.8); margin-bottom:16px;
  }
  .fz2-extra-head h2 { font-size:clamp(32px, 4vw, 50px); font-weight:900; line-height:1.15; letter-spacing:-1.5px; margin:0; }
  .fz2-extra-head h2 .accent { color:var(--blue); }

  .fz2-extra-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media (max-width: 900px) { .fz2-extra-grid { grid-template-columns:1fr; } }

  .fz2-svc { position:relative; border-radius:28px; overflow:hidden; padding:40px 36px; color:#fff; }
  .fz2-svc .grid-tex { position:absolute; inset:0; pointer-events:none; }
  .fz2-svc .glow { position:absolute; top:-120px; width:340px; height:340px; border-radius:50%; opacity:0.2; animation:fz2Blob 16s ease-in-out infinite; }
  .fz2-svc .hazard { position:absolute; top:0; bottom:0; width:8px; opacity:0.8; }
  .fz2-svc .inner { position:relative; }
  .fz2-svc .badge {
    display:inline-flex; align-items:center; gap:9px; padding:7px 16px; border-radius:100px;
    margin-bottom:20px; font-size:11.5px; font-weight:800; letter-spacing:2px;
  }
  .fz2-svc .badge .dot { width:7px; height:7px; border-radius:50%; }
  .fz2-svc h3 { font-size:30px; font-weight:900; line-height:1.3; letter-spacing:-0.5px; margin:0 0 12px; }
  .fz2-svc .desc { font-size:14.5px; line-height:1.9; margin:0 0 24px; }
  .fz2-svc .sample {
    display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); margin-bottom:24px;
  }
  .fz2-svc .sample img { width:36px; height:36px; object-fit:contain; }
  .fz2-svc .sample .t1 { font-size:13.5px; font-weight:800; color:#fff; }
  .fz2-svc .sample .t2 { font-size:11px; }
  .fz2-svc .actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  .fz2-svc .cta {
    padding:14px 28px; border-radius:100px; font-weight:900; font-size:14px; text-decoration:none;
    display:inline-flex; align-items:center; gap:8px; transition:transform .2s;
  }
  .fz2-svc .cta:hover { transform:translateY(-2px); }
  .fz2-svc .ghost { padding:13px 22px; border-radius:100px; background:rgba(255,255,255,0.06); font-weight:700; font-size:13px; text-decoration:none; }

  /* سكراب — أخضر غامق */
  .fz2-svc.scrap { background:linear-gradient(135deg, #0b1f1c 0%, #11302a 55%, #0d2438 100%); border:1px solid rgba(45,212,167,0.28); box-shadow:0 30px 80px -28px rgba(15,118,110,0.5); }
  .fz2-svc.scrap .grid-tex { background-image:linear-gradient(rgba(45,212,167,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(45,212,167,0.06) 1px, transparent 1px); background-size:30px 30px; }
  .fz2-svc.scrap .glow { left:-60px; background:radial-gradient(circle, #2dd4a7, transparent 70%); }
  .fz2-svc.scrap .hazard { left:0; background-image:repeating-linear-gradient(45deg, #f59e0b 0 10px, #0b1f1c 10px 20px); }
  .fz2-svc.scrap .badge { background:rgba(45,212,167,0.12); border:1px solid rgba(45,212,167,0.35); color:#2dd4a7; }
  .fz2-svc.scrap .badge .dot { background:#2dd4a7; box-shadow:0 0 10px #2dd4a7; }
  .fz2-svc.scrap .accent { color:#2dd4a7; }
  .fz2-svc.scrap .desc { color:#a7c5bd; }
  .fz2-svc.scrap .sample .t2 { color:#9fb8b0; }
  .fz2-svc.scrap .sample .t2 .st { color:#2dd4a7; }
  .fz2-svc.scrap .cta { background:linear-gradient(135deg, #2dd4a7, #0f766e); color:#04130f; box-shadow:0 14px 30px -8px rgba(45,212,167,0.4); }
  .fz2-svc.scrap .ghost { border:1px solid rgba(45,212,167,0.3); color:#e6f4ef; }

  /* ناخذها ونصلحها — برتقالي غامق */
  .fz2-svc.pickup { background:linear-gradient(135deg, #1d0a02 0%, #3a160a 55%, #1f0f06 100%); border:1px solid rgba(251,146,60,0.28); box-shadow:0 30px 80px -28px rgba(154,52,18,0.6); }
  .fz2-svc.pickup .grid-tex { background-image:linear-gradient(rgba(251,146,60,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(251,146,60,0.06) 1px, transparent 1px); background-size:30px 30px; }
  .fz2-svc.pickup .glow { right:-60px; background:radial-gradient(circle, #fb923c, transparent 70%); }
  .fz2-svc.pickup .hazard { right:0; background-image:repeating-linear-gradient(-45deg, #f59e0b 0 10px, #1d0a02 10px 20px); }
  .fz2-svc.pickup .badge { background:rgba(251,146,60,0.12); border:1px solid rgba(251,146,60,0.35); color:#fb923c; }
  .fz2-svc.pickup .badge .dot { background:#fb923c; box-shadow:0 0 10px #fb923c; }
  .fz2-svc.pickup .accent { color:#fb923c; }
  .fz2-svc.pickup .desc { color:#e7c5b2; }
  .fz2-svc.pickup .sample .t2 { color:#d9b8a0; }
  .fz2-svc.pickup .sample .t2 .st { color:#fb923c; }
  .fz2-svc.pickup .cta { background:linear-gradient(135deg, #fb923c, #9a3412); color:#fff7ed; box-shadow:0 14px 30px -8px rgba(251,146,60,0.4); }
  .fz2-svc.pickup .ghost { border:1px solid rgba(251,146,60,0.3); color:#fef3e6; }

  /* ── fz2 responsive — لازم تبقى بعد قواعد fz2 الأساسية (نفس الـspecificity، الترتيب يحسم) ── */
  @media (max-width: 1024px){
    .fz2-card.span7, .fz2-card.span5, .fz2-card.span3 { grid-column: span 12; }
    .fz2-card.span7 { grid-template-columns: 1fr; }
  }