/* VaraHealth — صفحة التعريف. خط Cairo محلي، أزرق طبي + أخضر */
@font-face { font-family:"Cairo"; src:url("cairo.woff") format("woff"), url("cairo.ttf") format("truetype"); font-weight:200 1000; font-display:swap; }
:root {
  --blue:#0b5ea8; --blue-2:#1677c9; --blue-d:#073a6b; --sky:#eaf3fc;
  --green:#12a37a; --mint:#e6f7f1;
  --ink:#10233a; --muted:#5d6f84; --line:#e3eaf2; --bg:#f6f9fc;
  --grad:linear-gradient(135deg, #1677c9 0%, #0b5ea8 45%, #0e8a8f 75%, #12a37a 100%);
  --shadow:0 1px 2px rgba(16,35,58,.04), 0 12px 32px rgba(16,35,58,.08);
  --r:22px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; font-family:"Cairo", Tahoma, sans-serif; color:var(--ink); background:#fff; font-size:17px; line-height:1.8;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img { display:block; }
a { color:inherit; text-decoration:none; }
h1, h2, h3 { margin:0; line-height:1.35; letter-spacing:-.015em; }
p { margin:0; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.wrap { width:min(1160px, 100% - 40px); margin-inline:auto; }
.section { padding-block:96px; }
.kicker { display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:800; color:var(--green);
  background:var(--mint); padding:4px 14px; border-radius:999px; letter-spacing:.02em; }
.head { text-align:center; max-width:720px; margin:0 auto 52px; display:grid; gap:14px; justify-items:center; }
.head h2 { font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:900; }
.head p { color:var(--muted); font-size:1.08rem; }
.head.light h2 { color:#fff; }
.head.light .kicker { background:rgba(255,255,255,.14); color:#c9f5e6; }

/* الأزرار */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:800; border-radius:14px; cursor:pointer;
  background:var(--grad); color:#fff; padding:12px 22px; box-shadow:0 10px 24px rgba(11,94,168,.28);
  transition:transform .15s, box-shadow .15s; border:0; }
.btn:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(11,94,168,.32); }
.btn.sm { padding:8px 18px; font-size:.92rem; border-radius:12px; }
.btn.lg { padding:15px 28px; font-size:1.05rem; }
.btn.ghost { background:#fff; color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn.light { background:#fff; color:var(--blue); box-shadow:0 12px 28px rgba(0,0,0,.18); }
.btn.outline { background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); }
.cta { display:flex; flex-wrap:wrap; gap:12px; }
.cta.center { justify-content:center; }

/* الشريط العلوي */
.nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); border-block-end:1px solid rgba(227,234,242,.8); }
.nav-in { display:flex; align-items:center; gap:28px; height:70px; }
.logo { display:flex; align-items:center; gap:10px; font-size:1.3rem; font-weight:900; direction:ltr; }
.logo img { width:38px; height:38px; border-radius:11px; }
.logo b { color:var(--green); }
#menu { display:flex; gap:26px; margin-inline-start:auto; font-weight:700; color:var(--muted); font-size:.98rem; }
#menu a:hover { color:var(--blue); }
.menu-btn { display:none; width:42px; height:42px; border:0; background:var(--sky); border-radius:12px; cursor:pointer; padding:12px 10px; }
.menu-btn span { display:block; height:2px; background:var(--blue); border-radius:2px; margin:5px 0; }

/* الواجهة */
.hero { position:relative; overflow:hidden; padding-block:80px 110px;
  background:radial-gradient(900px 520px at 85% -10%, #d8ebfc 0%, transparent 60%),
             radial-gradient(700px 480px at 0% 110%, #d9f4ea 0%, transparent 60%), #fbfdff; }
.hero-in { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero h1 { font-size:clamp(2rem, 4.4vw, 3.15rem); font-weight:900; margin:18px 0 18px; }
.hero h1 em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { font-size:1.15rem; color:var(--muted); max-width:58ch; margin-block-end:30px; }
.chips { list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px; color:var(--ink); font-weight:700; font-size:.95rem; }
.chips li { display:flex; align-items:center; gap:7px; }
.chips svg { width:20px; height:20px; color:#fff; background:var(--green); border-radius:50%; padding:3px; stroke-width:2.6; }

/* الموبايل */
.phone { position:relative; width:min(360px, 100%); margin-inline:auto; border-radius:40px; padding:12px; background:#0d1b2a;
  box-shadow:0 40px 80px rgba(7,58,107,.28), 0 0 0 1px rgba(255,255,255,.06) inset; transform:rotate(-2deg); }
.phone::before { content:""; position:absolute; inset:-40px -50px auto auto; width:220px; height:220px; z-index:-1;
  background:var(--grad); filter:blur(60px); opacity:.35; border-radius:50%; }
.phone-top { display:flex; align-items:center; gap:10px; background:#0b5e54; color:#fff; padding:14px 16px; border-radius:30px 30px 0 0; }
.phone-top img { width:36px; height:36px; border-radius:50%; }
.phone-top b { display:block; font-size:.95rem; line-height:1.3; }
.phone-top small { opacity:.8; font-size:.75rem; }
.phone-body { background:#efe7dd; background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size:14px 14px;
  border-radius:0 0 30px 30px; padding:16px 12px 22px; display:flex; flex-direction:column; gap:8px; min-height:470px; }
.b { max-width:84%; padding:8px 12px; border-radius:12px; font-size:.9rem; line-height:1.65; box-shadow:0 1px 1px rgba(0,0,0,.08);
  opacity:0; transform:translateY(8px) scale(.98); transition:opacity .4s, transform .4s; }
.b.show { opacity:1; transform:none; }
.b.in { align-self:flex-start; background:#fff; border-start-start-radius:3px; }
.b.out { align-self:flex-end; background:#d9fdd3; border-start-end-radius:3px; }

/* المشكلة والحل */
.pain { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:-56px; position:relative; z-index:2; }
.pain-card { background:#fff; border-radius:var(--r); padding:34px; box-shadow:var(--shadow); border:1px solid var(--line); }
.pain-card h2 { font-size:1.35rem; font-weight:900; margin-block-end:16px; }
.pain-card ul { margin:0; padding:0; list-style:none; display:grid; gap:12px; color:var(--muted); }
.pain-card li { position:relative; padding-inline-start:30px; }
.pain-card li::before { content:"×"; position:absolute; inset-inline-start:0; top:1px; width:20px; height:20px; border-radius:50%;
  background:#fdecec; color:#c62828; font-weight:900; display:grid; place-items:center; font-size:.85rem; line-height:1; }
.pain-card.good { background:linear-gradient(160deg, #f3fbf8, #fff); border-color:#cdeee2; }
.pain-card.good h2 { color:var(--green); }
.pain-card.good li { color:var(--ink); }
.pain-card.good li::before { content:"✓"; background:var(--mint); color:var(--green); }

/* المميزات */
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.f { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.f:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.f i { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; background:var(--grad);
  margin-block-end:18px; box-shadow:0 10px 20px rgba(11,94,168,.22); }
.f i svg { width:26px; height:26px; }
.f h3 { font-size:1.12rem; font-weight:800; margin-block-end:8px; }
.f p { color:var(--muted); font-size:.97rem; }

/* شرائط ملونة */
.band { background:var(--grad); color:#fff; position:relative; overflow:hidden; }
.band::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 300px at 10% 0%, rgba(255,255,255,.14), transparent 70%),
             radial-gradient(500px 300px at 100% 100%, rgba(255,255,255,.1), transparent 70%); }
.band .wrap { position:relative; z-index:1; }
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; counter-reset:s; }
.steps.four { grid-template-columns:repeat(4, 1fr); }
.steps li { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:var(--r); padding:26px 22px;
  backdrop-filter:blur(6px); }
.steps b { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#fff; color:var(--blue);
  font-weight:900; font-size:1.15rem; margin-block-end:14px; }
.steps h3 { font-size:1.08rem; font-weight:800; margin-block-end:6px; }
.steps p { color:rgba(255,255,255,.85); font-size:.95rem; }

/* الكادر */
.staff { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.staff-text h2 { font-size:clamp(1.7rem, 3.4vw, 2.4rem); font-weight:900; margin:14px 0 22px; }
.ticks { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.ticks li { display:flex; gap:10px; align-items:flex-start; }
.ticks svg { width:22px; height:22px; color:var(--green); background:var(--mint); border-radius:50%; padding:4px; stroke-width:2.6; margin-top:4px; }
.mini { background:linear-gradient(160deg, #f4f9fe, #fff); border:1px solid var(--line); border-radius:28px; padding:22px;
  box-shadow:var(--shadow); max-width:420px; margin-inline:auto; width:100%; }
.mini-head { display:flex; align-items:center; gap:10px; }
.mini-head img { width:34px; height:34px; border-radius:10px; }
.mini-head b { flex:1; }
.live { font-size:.78rem; font-weight:800; color:var(--green); background:var(--mint); padding:2px 12px; border-radius:999px; }
.mini-now { text-align:center; padding:20px 0 8px; color:var(--muted); display:grid; justify-items:center; gap:6px; }
.ring { width:120px; height:120px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:3rem; font-weight:900;
  background:conic-gradient(from 200deg, var(--green), var(--blue-2), var(--blue), var(--green));
  box-shadow:0 16px 32px rgba(11,94,168,.3), inset 0 0 0 6px rgba(255,255,255,.25); }
.mini-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:14px; }
.mini-stats div { background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px 6px; text-align:center; }
.mini-stats b { display:block; font-size:1.6rem; font-weight:900; color:var(--blue); line-height:1.4; }
.mini-stats div:nth-child(2) b { color:var(--green); }
.mini-stats div:nth-child(3) b { color:#c2410c; }
.mini-stats small { color:var(--muted); font-size:.78rem; }
.mini-note { text-align:center; color:#9aa8b8; font-size:.75rem; margin-top:10px; }

/* الباقات */
.soft { background:var(--bg); }
.tiers { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch; }
.tier { position:relative; background:#fff; border:1px solid var(--line); border-radius:26px; padding:34px 30px; display:grid; gap:14px; align-content:start; }
.tier h3 { font-size:1.35rem; font-weight:900; }
.tier > p { color:var(--muted); min-height:3.6em; }
.tier.featured { border:2px solid transparent; background:linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  box-shadow:0 24px 50px rgba(11,94,168,.16); transform:translateY(-10px); }
.ribbon { position:absolute; top:-15px; inset-inline-start:28px; background:var(--grad); color:#fff; font-size:.8rem; font-weight:800;
  padding:4px 14px; border-radius:999px; }
.levels { margin-top:34px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 14px;
  background:#fff; border:1px dashed #bcd3ea; border-radius:20px; padding:18px 22px; font-weight:700; }
.levels b { background:var(--sky); color:var(--blue); padding:4px 14px; border-radius:999px; }
.levels i { font-style:normal; color:var(--muted); font-weight:600; }

/* يناسب */
.who-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.who-grid div { border-radius:var(--r); padding:26px 22px; background:linear-gradient(160deg, var(--sky), #fff 70%); border:1px solid var(--line);
  display:grid; gap:4px; }
.who-grid div:nth-child(even) { background:linear-gradient(160deg, var(--mint), #fff 70%); }
.who-grid b { font-size:1.12rem; font-weight:900; }
.who-grid small { color:var(--muted); font-size:.92rem; }

/* الأسئلة */
.faq { max-width:820px; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:18px; padding:4px 22px; margin-block-end:12px; transition:box-shadow .2s; }
.faq details[open] { box-shadow:var(--shadow); border-color:transparent; }
.faq summary { cursor:pointer; list-style:none; font-weight:800; padding:16px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; width:30px; height:30px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--sky); color:var(--blue); font-size:1.3rem; font-weight:600; transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--muted); padding-block-end:18px; }

/* النهاية */
.final { background:var(--grad); color:#fff; border-radius:32px; padding:64px 28px; text-align:center; margin-block-end:72px;
  box-shadow:0 30px 60px rgba(11,94,168,.25); position:relative; overflow:hidden; }
.final::before { content:""; position:absolute; width:360px; height:360px; border-radius:50%; inset:-160px auto auto -100px; background:rgba(255,255,255,.08); }
.final h2 { font-size:clamp(1.6rem, 3.6vw, 2.5rem); font-weight:900; position:relative; }
.final p { opacity:.9; margin:12px 0 28px; font-size:1.08rem; position:relative; }
.foot { border-block-start:1px solid var(--line); padding-block:28px; }
.foot-in { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--muted); }

/* الظهور */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

@media (max-width:980px) {
  .hero-in, .staff { grid-template-columns:1fr; }
  .phone { transform:none; }
  .grid, .tiers { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:repeat(2, 1fr); }
  .steps.four { grid-template-columns:repeat(2, 1fr); }
  .who-grid { grid-template-columns:1fr 1fr; }
  .tier.featured { transform:none; }
}
@media (max-width:720px) {
  body { font-size:16px; }
  .section { padding-block:70px; }
  .nav .btn.sm { display:none; }
  .menu-btn { display:block; margin-inline-start:auto; }
  #menu { position:absolute; top:70px; inset-inline:0; flex-direction:column; gap:0; background:#fff; border-block-end:1px solid var(--line);
    box-shadow:var(--shadow); display:none; }
  #menu.open { display:flex; }
  #menu a { padding:14px 24px; border-block-start:1px solid var(--line); }
  .hero { padding-block:48px 96px; }
  .pain, .grid, .tiers, .steps, .steps.four { grid-template-columns:1fr; }
  .pain-card { padding:26px; }
  .cta .btn { flex:1 1 100%; }
  .final { border-radius:24px; padding:48px 22px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .reveal, .b { opacity:1; transform:none; transition:none; } }