/* ============================================================
   PAGO — Client "وعد" Personal Profile (Bilingual AR/EN)
   ثيم العميل: خلفية بيضاء + نص أسود + حواف زرقاء متوهجة.
   الرؤية بين اللغتين يتحكم بها كلاس body.lang-en-active.
   ملف CSS معزول تماماً عن الـ HTML.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
  --bg:#FFFFFF; --bg-2:#FFFFFF; --bg-3:#F8FAFC;
  --text:#000000; --text-2:#1A1A1A; --text-3:#4B4B4B;
  --accent:#007BFF; --acc-lt:#4DA3FF; --border:#007BFF;
  --glow:0 0 15px rgba(0,123,255,0.6);
  --font-ar:'Tajawal','Inter',sans-serif;
  --font-en:'Inter',sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { background:
    linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.78)),
    url('img/bg.svg') center/cover no-repeat fixed;
  background-attachment:fixed; color:var(--text); min-height:100vh; overflow-x:hidden; }

/* ===== Language visibility (Arabic default) ===== */
.lang-en { display:none }
.lang-ar { display:block }
body.lang-en-active .lang-ar { display:none }
body.lang-en-active .lang-en { display:block }
/* inline label spans inside titles */
.card-title .lang-ar, .card-title .lang-en { display:inline }
body.lang-en-active .card-title .lang-ar { display:none }
.card-title .lang-en { display:none }
body.lang-en-active .card-title .lang-en { display:inline }

/* direction + font follow the active language */
body { direction:rtl; font-family:var(--font-ar); text-align:right; }
body.lang-en-active { direction:ltr; font-family:var(--font-en); text-align:left; }

/* ===== NAV ===== */
nav { position:fixed; top:0; width:100%; z-index:99; background:rgba(255,255,255,.9);
  backdrop-filter:blur(20px); border-bottom:1px solid var(--border); height:52px;
  display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1rem,5vw,2.5rem); }
.nav-logo { font-size:14px; font-weight:700; color:var(--text) }
.nav-logo span { color:var(--accent) }
.lang-btn { background:none; border:1px solid var(--border); border-radius:6px; padding:4px 12px;
  font-size:12px; color:var(--accent); cursor:pointer; font-weight:700; transition:all .2s; }
.lang-btn:hover { background:var(--accent); color:#fff }

/* ===== PAGE ===== */
.page { position:relative; z-index:1; padding-top:52px; max-width:900px; margin:0 auto; padding-bottom:3rem }

/* ===== HERO ===== */
.brand-hero { padding:3rem 1.5rem; text-align:center; border-bottom:2px dashed var(--border); margin-bottom:2rem }
.brand-logo-wrap { width:90px; height:90px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--acc-lt));
  display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; color:#fff;
  margin:0 auto 1rem; box-shadow:0 8px 20px rgba(0,123,255,.35), 0 3px 8px rgba(0,0,0,.12); padding:4px }
.brand-logo-wrap img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  box-shadow:0 2px 6px rgba(0,0,0,.15), inset 0 0 0 2px rgba(255,255,255,.6) }
.brand-logo-wrap svg { display:block }
.brand-name { font-size:2rem; font-weight:800; color:var(--text); margin-bottom:.4rem }
.brand-tagline { font-size:1.1rem; color:var(--accent); margin-bottom:1rem; font-weight:700 }
.brand-desc { font-size:14px; color:var(--text-2); max-width:650px; margin:0 auto; line-height:1.9; text-align:justify }

/* ===== PRIMARY QR (main contact / navigation) ===== */
.qr-hero { max-width:360px; margin:0 auto 2rem; padding:1.5rem; text-align:center;
  background:var(--bg-2); border:1px solid var(--border); border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.05) }
.qr-hero__title { font-size:16px; font-weight:800; color:var(--accent); margin-bottom:.9rem }
.qr-hero__frame { display:inline-block; padding:12px; border:2px solid var(--border); border-radius:14px;
  transition:box-shadow .3s ease, transform .3s ease }
.qr-hero__frame:hover, .qr-hero__frame:focus { box-shadow:var(--glow); transform:translateY(-2px); outline:none }
.qr-hero__frame img { width:200px; height:200px; object-fit:contain; display:block }
.qr-hero__hint { font-size:12px; color:var(--text-3); margin-top:.8rem }

/* ===== CARDS ===== */
.main-grid { display:grid; grid-template-columns:1fr; gap:20px; padding:0 1.5rem }
.info-card { background:rgba(255,255,255,.72); backdrop-filter:blur(6px); border:1px solid var(--border); border-radius:12px; padding:1.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,.04); transition:box-shadow .3s ease, transform .3s ease; outline:none }
.info-card:hover, .info-card:focus-within { box-shadow:var(--glow); transform:translateY(-2px) }
.card-title { font-size:16px; font-weight:800; color:var(--accent); margin-bottom:1rem;
  border-bottom:1px solid var(--border); padding-bottom:5px; display:flex; align-items:center; gap:8px }
.skills-text { font-size:13px; color:var(--text-2); line-height:1.8; white-space:pre-line }

/* ===== DOWNLOAD CV BUTTON ===== */
.cv-btn { display:inline-flex; align-items:center; gap:8px; margin-top:1.4rem; padding:.75rem 1.6rem;
  background:var(--accent); color:#fff; font-weight:700; font-size:14px; text-decoration:none; border-radius:10px;
  box-shadow:0 4px 14px rgba(0,123,255,.35); transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.cv-btn:hover, .cv-btn:focus { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,123,255,.5); background:var(--acc-lt); outline:none }
.cv-btn-icon { font-size:15px }

/* ===== SOFTWARE & DIGITAL TOOLS ===== */
.tools-section { max-width:900px; margin:45px auto 2rem; padding:0 1.5rem }
.tools-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px }
.tool-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:1.2rem 1rem; text-align:center; background:rgba(255,255,255,.72); backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:14px; transform-style:preserve-3d;
  box-shadow:0 2px 8px rgba(0,0,0,.06), 0 0 0 1.5px rgba(0,123,255,.18);
  transition:box-shadow .3s ease, transform .3s ease; cursor:default; }
.tool-card:hover, .tool-card:focus-within {
  box-shadow:0 6px 14px rgba(0,0,0,.08), 0 26px 50px rgba(0,90,200,.18), 0 40px 80px rgba(0,90,200,.12);
  transform:translateY(-4px) rotateX(4deg) rotateY(-3deg) scale(1.03); outline:none }
@media (hover: none){ .tool-card:hover, .tool-card:focus-within { transform:translateY(-2px) scale(1.02); } }
.tool-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  margin:0 auto; background:var(--bg-3); box-shadow:0 2px 6px rgba(0,0,0,.08); flex-shrink:0; }
.tool-label { font-size:12px; font-weight:700; color:var(--text); line-height:1.4 }
.tool-mastery { width:100%; margin-top:4px; display:flex; flex-direction:column; align-items:center; gap:4px }
.tool-mastery-bar { width:100%; height:5px; background:#E2E8F0; border-radius:4px; overflow:hidden }
.tool-mastery-fill { height:100%; width:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--accent), var(--acc-lt));
  box-shadow:0 0 6px rgba(0,123,255,.5); }
.tool-mastery-label { font-size:10px; font-weight:700; color:var(--accent); letter-spacing:.2px }

/* ===== LANGUAGES ===== */
.lang-progress { margin-bottom:10px }
.lang-label { display:flex; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:4px }
.progress-bar { width:100%; height:8px; background:#E2E8F0; border-radius:4px; overflow:hidden }
.progress-fill { height:100%; background:var(--accent) }

footer { text-align:center; padding:1.5rem; font-size:11px; color:var(--text-3); border-top:1px solid var(--bg-3); margin-top:2rem }
footer span { color:var(--accent); font-weight:700 }

/* ===== 3 QR CODES (central navigation & contact) ===== */
.qr3 { max-width:640px; margin:0 auto 2rem; padding:0 1.5rem }
.qr3__heading { text-align:center; font-size:16px; font-weight:800; color:var(--accent); margin-bottom:1rem }
.qr3__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.qr3__item { display:flex; flex-direction:column; align-items:center; gap:8px; padding:1rem; backdrop-filter:blur(6px);
  background:rgba(255,255,255,.72); border:1px solid var(--border); border-radius:12px; text-decoration:none;
  transition:box-shadow .3s ease, transform .3s ease; outline:none }
.qr3__item:hover, .qr3__item:focus { box-shadow:var(--glow); transform:translateY(-2px) }
.qr3__item img { width:100%; max-width:150px; aspect-ratio:1; object-fit:contain; border-radius:6px }
.qr3__label { font-size:12px; font-weight:700; color:var(--text); text-align:center }
@media (max-width:560px){ .qr3__grid { grid-template-columns:1fr } }

/* ===== CONTACT (WhatsApp + Email) ===== */
.contact-rows { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px; margin-top:6px }
.cr { display:flex; align-items:center; gap:10px; padding:.8rem 1rem; text-decoration:none;
  background:rgba(255,255,255,.72); border:1px solid var(--border); border-radius:10px; color:var(--text);
  transition:box-shadow .3s ease, transform .3s ease }
.cr:hover, .cr:focus { box-shadow:var(--glow); transform:translateY(-2px); outline:none }
.cr-icon { font-size:18px }
.cr-val { font-size:13px; font-weight:600; direction:ltr; unicode-bidi:plaintext }

/* ===== 3D depth for sections ===== */
.main-grid, .qr3__grid, .contact-rows { perspective: 1200px; }
.info-card, .qr3__item, .cr {
  transform-style: preserve-3d;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px rgba(0,60,150,.10), 0 22px 48px rgba(0,60,150,.08);
}
.info-card:hover, .info-card:focus-within,
.qr3__item:hover, .qr3__item:focus,
.cr:hover, .cr:focus {
  transform: translateY(-4px) rotateX(4deg) rotateY(-3deg) scale(1.01);
  box-shadow: 0 6px 14px rgba(0,0,0,.08), 0 26px 50px rgba(0,90,200,.18), 0 40px 80px rgba(0,90,200,.12);
}

/* ===== Soft permanent blue glow (all devices) ===== */
.info-card, .qr3__item, .cr {
  box-shadow: 0 0 0 1.5px rgba(0,123,255,.30), 0 0 24px rgba(0,123,255,.38), 0 8px 24px rgba(0,90,200,.20);
}

/* ===== Responsive: tablet & mobile ===== */
@media (max-width: 900px){
  .brand-name { font-size: 1.7rem; }
  .brand-desc { font-size: 13.5px; }
  .main-grid, .qr3, .contact-rows { padding-left: 1rem; padding-right: 1rem; }
  .tools-grid { grid-template-columns: repeat(3,1fr); padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 600px){
  .brand-hero { padding: 2.2rem 1rem; }
  .brand-name { font-size: 1.45rem; }
  .brand-logo-wrap { width:72px; height:72px; font-size:1.6rem; }
  .qr3__grid { grid-template-columns: 1fr 1fr; }
  .contact-rows { grid-template-columns: 1fr; }
  .info-card { padding: 1.1rem; }
  nav { padding: 0 1rem; }
  .card-title { font-size: 15px; }
  .tools-grid { grid-template-columns: 1fr 1fr; }
  .cv-btn { width:100%; justify-content:center; }
}
@media (max-width: 400px){
  .qr3__grid { grid-template-columns: 1fr; }
  .brand-name { font-size: 1.3rem; }
  .tools-grid { grid-template-columns: 1fr; }
}