:root{
  --brand:#06b6d4; --brand-2:#0ea5b1;
  --ink:#e5f0ff; --muted:#9fb0cf;
  --bg:#0b1220; --panel:#0f172acc; --panel-border:#ffffff22;
  --btn-grad: linear-gradient(135deg, var(--brand), var(--brand-2));
  --card-grad: linear-gradient(180deg, #ffffff12, #ffffff08);
  --tooltip-bg:#0b1220; --tooltip-ink:#e5f0ff;
  --ring:#22d3ee66;
}
@media (prefers-color-scheme: light){
  :root{ --ink:#0f172a; --muted:#475569; --bg:#f1f5f9; --panel:#ffffff; --panel-border:#e2e8f0; --tooltip-bg:#0f172a; --tooltip-ink:#fff; }
}
:root.theme-light{ --ink:#0f172a; --muted:#475569; --bg:#f1f5f9; --panel:#ffffff; --panel-border:#e2e8f0; --tooltip-bg:#0f172a; --tooltip-ink:#fff; }
:root.theme-dark { --ink:#e5f0ff; --muted:#9fb0cf; --bg:#0b1220; --panel:#0f172acc; --panel-border:#ffffff22; --tooltip-bg:#0b1220; --tooltip-ink:#e5f0ff; }

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:"Cairo",system-ui,sans-serif; background:var(--bg); color:var(--ink); line-height:1.6}
.container{max-width:1120px; margin-inline:auto; padding: clamp(1.25rem, 2vw, 2rem);}

/* Mesh background */
.mesh-wrap{position:relative; overflow:hidden; isolation:isolate; background:
  radial-gradient(1200px 600px at 90% -10%, #06b6d455, transparent 60%),
  radial-gradient(900px 500px at -10% 120%, #0ea5b155, transparent 60%),
  radial-gradient(700px 400px at 50% 20%, #38bdf855, transparent 60%),
  var(--bg);
}
.mesh-wrap::before, .mesh-wrap::after{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(600px 400px at 70% 30%, #22d3ee22, transparent 60%),
             radial-gradient(500px 350px at 20% 80%, #0ea5b122, transparent 60%);
  filter: blur(20px); z-index: -1; animation: floaty 18s ease-in-out infinite alternate;
}
.mesh-wrap::after{ animation-duration: 24s; animation-delay: -4s; }
@keyframes floaty { from{transform:translate3d(0,0,0)} to{transform:translate3d(2%, -2%, 0)} }

/* Topbar */
.topbar{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 0;}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800}
.brand .logo {
  height: 70px;           /* أو 40px حسب الهيدر عندك */
  width: auto !important; /* حتى يأخذ العرض الطبيعي */
  aspect-ratio: initial;  /* إزالة إجبار المربّع */
  border-radius: 6px;     /* خفيف، يمكنك إزالته */
  background: none;       /* لو تريد بدون خلفية */
  box-shadow: none;       /* إزالة الظل لو تحب */
  object-fit: contain;    /* الحفاظ على الشكل */
}
.brand .name{letter-spacing:.2px}

/* سلايدر الشهادات */
.t-viewport{overflow:hidden}
.t-track{display:flex; gap:16px; align-items:stretch; will-change:transform}
.t-slide{flex:0 0 auto; display:flex}
.t-slide .t-card{height:100%; display:flex; flex-direction:column}

/* أزرار علويّة (ثيم/بحث) */
.actions{display:flex; align-items:center; gap:.5rem;}
.switch,.icon-btn{
  position:relative; border:1px solid var(--panel-border); background:#ffffff0f; border-radius:999px;
  padding:.45rem .65rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; min-width:40px; min-height:36px;
}
.switch:hover,.icon-btn:hover{ box-shadow:0 6px 16px #00000020; transform: translateY(-1px); border-color: var(--brand); }
.switch .icon,.icon-btn .icon{ width:20px; height:20px; display:inline-block; }
.icon svg{ width:100%; height:100%; display:block; }
.sun{ display:none; }
:root.theme-light .moon{ display:inline-block; }
:root.theme-light .sun{ display:none; }
:root.theme-dark .moon{ display:none; }
:root.theme-dark .sun{ display:inline-block; }
/* الوضع الفاتح */
:root.theme-light .switch,
:root.theme-light .icon-btn {
  color: #0f172a; /* غامق وواضح */
}

/* الوضع الداكن */
:root.theme-dark .switch,
:root.theme-dark .icon-btn {
  color: #e5f0ff; /* فاتح وواضح */
}

/* Tooltip */
.tip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:var(--tooltip-bg); color:var(--tooltip-ink); border:1px solid var(--panel-border);
  padding:.35rem .55rem; border-radius:.5rem; font-size:.85rem; white-space:nowrap;
  box-shadow:0 8px 20px #00000030; opacity:0; visibility:hidden; transition:.18s ease; pointer-events:none; z-index:30;
}
.switch:hover .tip, .switch:focus-visible .tip,
.icon-btn:hover .tip, .icon-btn:focus-visible .tip { opacity:1; visibility:visible; }
.tip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--tooltip-bg);
  filter: drop-shadow(0 2px 0 var(--panel-border));
}
.tip-dark, .tip-light { display:none; }
:root.theme-light .tip-light{ display:block; }
:root.theme-dark .tip-dark{ display:block; }

/* Hero */
.hero{min-height:60dvh; display:grid; grid-template-columns: 1.2fr 0.8fr; gap:clamp(1rem, 3vw, 2.5rem); align-items:center;}
.hero p{text-align:justify; text-justify:inter-word;} /* تسوية النص الصغير */
@media (max-width: 980px){ .hero{grid-template-columns:1fr; padding-block: 3rem; min-height:auto;} }
.badge{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; font-weight:600; font-size:18px; color:#0e7490; background:#67e8f922; border:1px solid var(--panel-border); border-radius:.75rem; backdrop-filter: blur(6px);}
.title{font-weight:800; line-height:1.15; margin:.8rem 0; font-size:clamp(2rem, 4.5vw, 3.2rem);}
.subtitle{color:var(--muted); font-size:clamp(1rem, 1.6vw, 1.125rem); max-width:48ch}
.cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.25rem}
.btn{appearance:none; border:none; cursor:pointer; border-radius:999px; padding:.9rem 1.2rem; font-weight:700; letter-spacing:.2px;}
.btn-primary{background:var(--btn-grad); color:#001013; box-shadow:0 10px 25px #06b6d430; transition: transform .18s ease, box-shadow .18s ease;}
.btn-primary:hover{transform: translateY(-2px); box-shadow:0 14px 30px #06b6d440;}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--panel-border);}
.btn-ghost:hover{background:#ffffff10}
.glass{background: linear-gradient(180deg, #ffffff0d, #ffffff06); border:1px solid var(--panel-border); border-radius:1.25rem; padding:1.25rem; backdrop-filter: blur(8px);}
.glass h3{margin:.2rem 0 1rem; font-size:1.05rem}
.feat{display:grid; grid-template-columns: 1fr 1fr; gap:.75rem}
@media (max-width: 520px){ .feat{grid-template-columns:1fr} }
.chip{padding:.6rem .75rem; background:#ffffff0f; border:1px solid var(--panel-border); border-radius:.9rem; font-size:.92rem}
.chip strong{display:block; font-size:.98rem}

/* Tools */
.tools-sec{padding:0rem 0; background:var(--bg);}
.tools-title{text-align:center; font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:.3rem;}
.tools-sub{text-align:center; color:var(--muted); margin-bottom:2.5rem; font-size:1.3rem;}
.tools-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1.5rem; }
.tool-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:1.25rem; padding:1.5rem 1.2rem;
  text-align:center; display:flex; flex-direction:column; justify-content:space-between; transition:.25s ease; background-image:var(--card-grad);
}
.tool-card:hover{transform:translateY(-6px); border-color:var(--brand); box-shadow:0 12px 30px #06b6d425;}
.tool-icon{font-size:2rem; margin-bottom:.5rem;}
.tool-card h3{
  font-size:1.25rem;
  margin:.5rem 0;
  color:var(--fg-strong);              /* لون طبيعي للعناوين */
  transition:color .25s ease, text-shadow .25s ease;
}
.tool-card:hover h3{
  color:var(--brand);                      /* نفس جو لون زر اكتشف */
}

.tool-card p{color:var(--muted); font-size:.95rem; line-height:1.6; flex-grow:1;}
.btn-mini{
  display:inline-block; margin-top:1rem; padding:.55rem 1.1rem; border-radius:999px;
  background:var(--btn-grad); color:#001013; font-weight:700; font-size:.9rem; text-decoration:none;
  box-shadow:0 8px 20px #06b6d42a; transition: transform .15s ease;
}
/* منع خط تحت البطاقات لأنها الآن <a> */
.tool-card {
  display: block;          /* للتأكيد بس إنها تتصرف كبلوك زي قبل */
  text-decoration: none;   /* يشيل الخط تحت النص */
  color: inherit;          /* يخلي اللون زي ما كان من قبل */
}

/* حتى عند الـ hover ما يضيف خط */
.tool-card:hover {
  text-decoration: none;
}

/* زر "اكتشف" داخل البطاقة يبقى بدون خط */
.tool-card .btn-mini {
  text-decoration: none;
}

.btn-mini:hover{transform:translateY(-2px);}
.featured .row{ display:flex; gap:1rem; overflow:auto; padding:1rem 0; scroll-snap-type:x mandatory; }
.featured .item{
  scroll-snap-align:start; border:1px solid var(--panel-border); background:#ffffff0a; border-radius:999px; padding:.5rem .9rem; white-space:nowrap;
  display:flex; align-items:center; gap:.5rem; font-weight:700;
}
.featured .item .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); }

/* Testimonials */
.testimonials{ padding:4rem 0; }
.testimonials h2{ text-align:center; font-size:clamp(1.6rem, 2.6vw, 2.1rem); margin:0 0 .6rem; }
.testimonials p.lead{ text-align:center; color:var(--muted); margin:0 0 2rem; }
.t-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width: 980px){ .t-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .t-grid{ grid-template-columns:1fr; } }
.t-card{ background:var(--panel); border:1px solid var(--panel-border); border-radius:1rem; padding:1rem 1rem; background-image:var(--card-grad); }
.t-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.avatar{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Cairo", sans-serif; font-size:1.3rem; font-weight:700; color:#fff;
  background: radial-gradient(circle at top left, #06b6d4, #0e7490);
  box-shadow: 0 0 12px rgba(6,182,212,.6), inset 0 0 10px rgba(255,255,255,.15);
  transition: all .3s ease;
}
.avatar:hover{ transform:scale(1.05); box-shadow:0 0 18px rgba(6,182,212,.9), inset 0 0 14px rgba(255,255,255,.25); }
.t-name{ font-weight:800; }
.t-role{ color: var(--muted); font-size:.9rem; }
.t-body{ color: var(--ink); }
.t-stars{ color:#fbbf24; margin:.2rem 0 .3rem; }

/* Footer */
.footer{ background: linear-gradient(180deg, #00000010, transparent), var(--bg); border-top:1px solid var(--panel-border); margin-top:3rem; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1.2fr; gap:clamp(1rem,2.5vw,2rem); padding:2.5rem 0; }
@media (max-width: 980px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){
  /* خلي الفوتر عمودين بدل واحد على الشاشات الصغيرة */
  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }

  /* العمود الأول (اللوجو + الوصف) ياخذ عرض الصف كامل */
  .footer-grid .f-col:nth-child(1){
    grid-column: 1 / -1;
  }

  /* عمود النشرة البريدية (الرابع) ياخذ عرض الصف كامل */
  .footer-grid .f-col:nth-child(4){
    grid-column: 1 / -1;
  }
}

.f-col h4{ margin:0 0 .8rem; font-size:1.05rem; }
.f-text{ color:var(--muted); line-height:1.7; margin:.3rem 0 1rem; }
.f-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.f-social{ display:flex; gap:.5rem; margin-top:.6rem; }
.f-social .so{
  display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  border:1px solid var(--panel-border); background:#ffffff0a; text-decoration:none; transition:.2s ease; color:var(--ink);
}
.f-social .so:hover{ transform: translateY(-2px); border-color: var(--brand); box-shadow:0 6px 16px #06b6d420; }
.f-social svg{ width:18px; height:18px; }
.f-links{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.f-links a{ color: var(--ink); text-decoration:none; opacity:.9; }
.f-links a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
.f-form{ display:flex; gap:.5rem; margin-top:.5rem; }
.f-input{ flex:1; padding:.7rem .9rem; border-radius:.8rem; border:1px solid var(--panel-border); background:#ffffff0f; color:var(--ink); outline:none; }
.f-input::placeholder{ color: color-mix(in oklab, var(--muted), #fff 20%); }
.f-btn{ padding:.7rem 1rem; border-radius:.9rem; background: var(--btn-grad); color:#001013; font-weight:700; border:none; cursor:pointer; }
.f-hint{ display:block; margin-top:.5rem; color: var(--muted); }
.footer-bottom{ border-top:1px solid var(--panel-border); background:#00000008; }
.f-bottom-wrap{ display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:.8rem; }
@media (max-width: 720px){ .f-bottom-wrap{ grid-template-columns:1fr; justify-items:start; gap:.6rem; } .f-social{ order:3; } }
.f-mini{ display:flex; gap:.8rem; flex-wrap:wrap; }
.f-mini a{ color: var(--muted); text-decoration:none; }
.f-mini a:hover{ color: var(--ink); }
.trust-badges{ display:flex; flex-wrap:wrap; gap:.4rem .6rem; padding:0; margin:.6rem 0 0; list-style:none; }
.trust-badges li{ display:flex; align-items:center; gap:.4rem; font-size:.9rem; color:var(--muted); border:1px dashed var(--panel-border); border-radius:.6rem; padding:.25rem .5rem; background:#ffffff08; }
.tb-icon{ font-size:1rem; line-height:1; }
.f-contact{ display:inline-block; margin-top:.6rem; font-weight:800; letter-spacing:.2px; text-decoration:none; color: var(--ink); border-bottom:1px dashed var(--panel-border); }
.f-contact:hover{ border-color: var(--brand); color: var(--ink); }

/* Search layer */
.search-layer{ position:fixed; inset:0; z-index:9998; display:none; background: color-mix(in oklab, var(--bg), #000 35%); backdrop-filter: blur(8px); }
.search-layer.open{ display:block; animation: fadeIn .18s ease; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.search-panel{
  position:absolute; top:8dvh; left:50%; transform:translateX(-50%); width:min(840px,92vw);
  background: linear-gradient(180deg, #ffffff14, #ffffff08); border:1px solid var(--panel-border); border-radius:16px;
  box-shadow: 0 40px 120px #00000066, 0 0 0 1px #ffffff0a inset; overflow:hidden;
}
.search-head{ display:flex; align-items:center; gap:.6rem; padding:.8rem .9rem; background:#00000010; border-bottom:1px solid var(--panel-border); }
.search-input{
  flex:1; font-family:"Cairo",system-ui,sans-serif; font-size:1rem; padding:.85rem 1rem; border-radius:12px; border:1px solid var(--panel-border);
  background:#ffffff0f; color:var(--ink); outline:none; box-shadow: 0 0 0 0 var(--ring);
}
.search-input:focus{ box-shadow:0 0 0 4px var(--ring); }
.kbd{ font-size:.8rem; padding:.25rem .45rem; border-radius:.4rem; border:1px solid var(--panel-border); background:#ffffff12; }
.search-results{ max-height:56dvh; overflow:auto; }
.result-item{
  display:flex; align-items:flex-start; gap:.8rem; padding:.9rem 1rem; border-bottom:1px dashed var(--panel-border);
  text-decoration:none; color:var(--ink); transition: background .12s ease, transform .12s ease;
}
.result-item:hover{ background:#ffffff0b; transform: translateX(-2px); }
.r-icon{ width:22px; height:22px; display:grid; place-items:center; border-radius:8px; background:#ffffff12; border:1px solid var(--panel-border); }
.r-title{ font-weight:800; }
.r-desc{ color:var(--muted); font-size:.95rem; margin-top:.15rem; }
mark{ background: linear-gradient(90deg, #22d3ee55, transparent); padding:0 .1rem; border-radius:.2rem; }

/* أزرار/حقول—توحيد الخط دومًا */
.f-btn, button, .btn, input, select, textarea{ font-family:"Cairo", system-ui, sans-serif !important; }


/* 🌤️ الوضع الفاتح */
.brand-link {
  text-decoration: none;
  color: var(--ink, #0f172a); /* اللون الأساسي للنص */
  font-weight: 800;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* 🌙 الوضع الداكن */
body:not(.theme-bright) .brand-link {
  
  color: #06b6d4; /* اللون التركوازي عند المرور */
  text-shadow: 1 1 8px rgba(23, 173, 199, 0.6);
}

/* ✨ تأثير عند المرور */
.brand-link:hover {
  color: var(--brand, #06b6d4); /* تركوازي عند المرور */
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
}
    /* زر الوضع الفاتح/الداكن */
.mode-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--badge);
  border: 1px solid var(--panel-border);
  display: grid;
  place-items: center;
  transition: background .3s ease, transform .2s ease;
}