/* ===== معمل دار الشفاء — Landing ===== */
:root {
  --background: oklch(1 0 0); --foreground: oklch(.29 .08 251);
  --primary: oklch(.38 .13 253); --primary-foreground: oklch(1 0 0);
  --secondary: oklch(.97 .014 236); --muted: oklch(.97 .008 240);
  --muted-foreground: oklch(.52 .032 248); --accent: oklch(.56 .23 25);
  --accent-foreground: oklch(1 0 0); --border: oklch(.9 .019 241);
  --card: oklch(1 0 0); --success: oklch(.5 .12 160);
  --hero-wash: linear-gradient(270deg, oklch(.98 .008 240) 0%, oklch(.98 .008 240 / .96) 20%, oklch(.98 .008 240 / .65) 43%, oklch(.98 .008 240 / 0) 72%);
  --shadow-soft: 0 8px 32px oklch(.35 .08 250 / .08);
}

/* ---- reset (Tailwind preflight equivalent) ---- */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; line-height: 1.5; }
html, body { overflow-x: clip; }
/* منع الزوم باللمس (pinch / double-tap) */
html, body { touch-action: pan-x pan-y; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: 'Cairo', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; background: transparent; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--secondary); color: var(--primary); }
.text-accent { color: var(--accent); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary); }
.btn:disabled { opacity: .5; pointer-events: none; cursor: not-allowed; }
.btn-booking { background: var(--accent); color: var(--accent-foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.btn-booking:hover { background: color-mix(in oklch, var(--accent) 90%, transparent); }
.btn-medical { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.btn-medical:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
.btn-outline { border: 1px solid var(--border); background: var(--background); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-icon { width: 36px; height: 36px; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- layout (from the original design) ---- */
.container-lab { width: min(1160px, calc(100% - 72px)); margin-inline: auto; }
.site-header { background: var(--background); border-bottom: 1px solid var(--border); height: 94px; position: relative; z-index: 20; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand > div { min-width:0; }
.brand img, .header-inner > .cta, .gallery-controls, .trust-item svg, .booking-note svg, .hero-reassurance svg { flex-shrink:0; }
.about-inner > *, .home-grid > *, .branch-grid > *, .booking-grid > *, .section-header > div, .trust-item > div { min-width:0; }
.brand img { width: 78px; height: 78px; object-fit: contain; }
.brand strong { display: block; font-size: 18px; font-weight: 800; }
.brand span { font-size: 11px; color: var(--muted-foreground); }
.desktop-nav { display:flex; gap:32px; font-size:13px; font-weight:600; }
.desktop-nav a { transition: color .2s; } .desktop-nav a:hover { color:var(--accent); }
.header-call { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; }
.header-call svg { width:17px; height:17px; }
.hero { min-height: 570px; position:relative; overflow:hidden; display:flex; align-items:center; background:var(--secondary); }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; animation:hero-settle 1.6s ease-out; }
.hero::after { content:''; position:absolute; inset:0; background:var(--hero-wash); }
.hero-inner { position:relative; z-index:1; padding-block:65px 82px; }
.hero-copy { max-width:520px; animation:fade-up .8s ease both; }
.eyebrow { display:inline-flex; gap:8px; align-items:center; font-size:12px; font-weight:700; color:var(--primary); }
.eyebrow::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.hero h1 { font-size:56px; line-height:1.5; font-weight:900; margin:15px 0 4px; }
.hero h1 span { color:var(--accent); }
.hero h2 { margin:0 0 16px; font-size:24px; font-weight:700; }
.hero p { max-width:390px; font-size:15px; line-height:2; color:var(--muted-foreground); }
.hero-actions { display:flex; gap:12px; margin-top:25px; }
.cta { min-height:48px; padding-inline:24px; font-size:14px; font-weight:700; border-radius:6px; transition:transform .25s, background .25s, color .25s; } .cta:hover { transform:translateY(-3px); }
.hero-reassurance { display:flex; align-items:center; gap:7px; font-size:11px; margin-top:21px; color:var(--muted-foreground); }
.hero-reassurance svg { width:15px; height:15px; }
.hero-label { position:absolute; left:6%; bottom:34px; z-index:2; display:flex; align-items:center; gap:11px; background:var(--background); box-shadow:var(--shadow-soft); padding:13px 19px; border-radius:6px; animation:float 5s ease-in-out infinite; }
.hero-label svg { color:var(--accent); width:28px; height:28px; flex-shrink:0; } .hero-label strong { display:block; font-size:12px; } .hero-label span { font-size:10px; color:var(--muted-foreground); }
.trust-strip { padding-block:27px; border-bottom:1px solid var(--border); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item { display:flex; align-items:center; justify-content:center; gap:13px; border-left:1px solid var(--border); } .trust-item:last-child { border:0; }
.trust-item svg { width:29px; height:29px; color:var(--primary); stroke-width:1.5; }
.trust-item strong { display:block; font-size:13px; } .trust-item span { font-size:11px; color:var(--muted-foreground); }
.section { padding-block:74px; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.section-title { font-size:30px; font-weight:800; line-height:1.65; margin:9px 0 8px; }
.section-subtitle { font-size:13px; color:var(--muted-foreground); line-height:2; margin:0; }
.gallery { overflow:hidden; }
.gallery-window { overflow:hidden; direction:ltr; padding-block:4px; }
.gallery-track { display:flex; gap:22px; width:max-content; animation:gallery-scroll 36s linear infinite; }
.gallery-window:hover .gallery-track, .gallery-track.is-paused { animation-play-state:paused; }
.gallery-item { width: min(350px, 76vw); flex-shrink:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; transition:transform .25s; background:var(--secondary); }
.gallery-item:hover { transform:translateY(-4px); } .gallery-item img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.gallery-controls { display:flex; gap:10px; align-items:center; }
.gallery-bottom { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:25px; }
.gallery-bottom span { height:5px; width:5px; background:var(--border); border-radius:5px; } .gallery-bottom span:first-child { width:25px; background:var(--accent); }
.about { background:var(--secondary); }
.about-inner { display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:100px; }
.about p { font-size:14px; line-height:2.3; color:var(--muted-foreground); }
.about-stat { display:flex; align-items:center; gap:24px; justify-content:center; border-right:1px solid var(--border); }
.about-stat .number { font-size:104px; line-height:1.4; font-weight:900; color:var(--primary); }
.about-stat .number em { font-size:40px; font-style:normal; color:var(--accent); }
.about-stat strong { font-size:19px; display:block; line-height:1.9; }
.about-stat span { font-size:12px; color:var(--muted-foreground); }
.home-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; }
.home-image { position:relative; } .home-image img { width:100%; aspect-ratio:1; border-radius:8px; display:block; object-fit:cover; background:var(--secondary); }
.home-copy p { color:var(--muted-foreground); font-size:14px; line-height:2.2; }
.home-steps { display:grid; gap:18px; margin-block:25px; }
.home-step { display:flex; gap:13px; align-items:center; font-size:13px; font-weight:600; }
.icon-box { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:6px; background:var(--secondary); color:var(--primary); flex-shrink:0; }
.icon-box svg { width:19px; height:19px; }
.branch { border-top:1px solid var(--border); background:var(--muted); }
.branch-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.branch-address { font-size:17px; font-weight:700; line-height:2.1; margin:16px 0 3px; }
.branch-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:23px; }
.location-panel { background:var(--background); border:1px solid var(--border); border-radius:8px; padding:36px; display:flex; align-items:center; gap:25px; }
.location-icon { width:90px; height:90px; border-radius:50%; background:var(--secondary); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; }
.location-icon svg { width:42px; height:42px; }
.location-panel h3 { font-size:22px; margin:0 0 5px; font-weight:700; } .location-panel p { font-size:12px; color:var(--muted-foreground); margin:0; } .location-panel a { display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-size:12px; margin-top:15px; }
.location-panel a svg { width:16px; height:16px; }
.booking { padding-block:70px 80px; }
.booking-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.booking-title { font-size:36px; line-height:1.8; font-weight:800; margin:12px 0; }
.booking-title span { color:var(--accent); }
.booking-note { display:flex; gap:10px; align-items:center; font-size:12px; color:var(--muted-foreground); margin-top:22px; }
.booking-note svg { width:20px; height:20px; color:var(--accent); }
.booking-form { background:var(--background); border:1px solid var(--border); box-shadow:var(--shadow-soft); border-radius:8px; padding:32px; }
.booking-form label { display:block; font-size:12px; font-weight:700; margin-bottom:8px; }
.field { margin-bottom:19px; } .input-wrap { position:relative; } .input-wrap svg { position:absolute; right:14px; top:16px; width:18px; height:18px; color:var(--muted-foreground); }
.booking-form input { width:100%; height:51px; border:1px solid var(--border); border-radius:6px; background:var(--muted); color:var(--foreground); padding:0 43px 0 14px; font-size:13px; outline:none; transition:border .2s; } .booking-form input:focus { border-color:var(--primary); }
.booking-form input::placeholder { color:var(--muted-foreground); } .booking-form .cta { width:100%; }
.booking-form input.invalid { border-color: var(--accent); }
.form-privacy { font-size:10px; color:var(--muted-foreground); text-align:center; margin:14px 0 0; display:flex; align-items:center; justify-content:center; gap:5px; }
.form-privacy svg { width:12px; height:12px; }
.form-error { color:var(--accent); font-size:12px; margin-bottom:15px; }
.form-error:empty { display:none; }
.booking-form { position:relative; }
.hp-field { position:absolute !important; top:0; right:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; opacity:0; pointer-events:none; }
.footer { background:var(--primary); color:var(--primary-foreground); padding-block:25px; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; } .footer strong { font-size:16px; } .footer p { font-size:11px; opacity:.75; margin:5px 0 0; } .footer a { display:flex; align-items:center; gap:8px; font-size:17px; }
.footer a svg { width:19px; height:19px; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; } .reveal.visible { opacity:1; transform:translateY(0); }
.no-js .reveal { opacity:1; transform:none; }

/* ---- Thank you page ---- */
.thanks { min-height: calc(100vh - 94px - 90px); display:flex; align-items:center; background:var(--secondary); position:relative; overflow:hidden; padding-block:60px; }
.thanks::before, .thanks::after { content:''; position:absolute; border-radius:50%; background:var(--background); opacity:.7; animation:float 7s ease-in-out infinite; }
.thanks::before { width:340px; height:340px; top:-120px; right:-90px; }
.thanks::after { width:220px; height:220px; bottom:-80px; left:-60px; animation-delay:-3s; }
.thanks-card { position:relative; z-index:1; max-width:620px; margin-inline:auto; background:var(--background); border:1px solid var(--border); box-shadow:var(--shadow-soft); border-radius:8px; padding:46px 40px; text-align:center; animation:fade-up .8s ease both; }
.thanks-check { width:92px; height:92px; margin:0 auto 22px; border-radius:50%; background:color-mix(in oklch, var(--success) 12%, transparent); display:flex; align-items:center; justify-content:center; animation:pop .6s cubic-bezier(.34,1.56,.64,1) .2s both; }
.thanks-check svg { width:50px; height:50px; color:var(--success); }
.thanks-check svg circle { stroke-dasharray:64; stroke-dashoffset:64; animation:draw .7s ease .45s forwards; }
.thanks-check svg path { stroke-dasharray:12; stroke-dashoffset:12; animation:draw .4s ease 1s forwards; }
.thanks-card h1 { font-size:32px; font-weight:900; line-height:1.6; }
.thanks-card h1 span { color:var(--accent); }
.thanks-card > p { font-size:14px; line-height:2.1; color:var(--muted-foreground); margin-top:10px; }
.thanks-steps { display:grid; gap:12px; text-align:right; margin:28px 0; padding:22px; background:var(--muted); border-radius:8px; }
.thanks-steps .home-step { animation:fade-up .6s ease both; }
.thanks-steps .home-step:nth-child(1) { animation-delay:.5s; } .thanks-steps .home-step:nth-child(2) { animation-delay:.65s; } .thanks-steps .home-step:nth-child(3) { animation-delay:.8s; }
.thanks-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

@keyframes fade-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-settle { from { transform:scale(1.04); } to { transform:scale(1); } }
@keyframes float { 50% { transform:translateY(-7px); } }
@keyframes gallery-scroll { to { transform:translateX(calc(-50% - 11px)); } }
@keyframes pop { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes draw { to { stroke-dashoffset:0; } }

@media (max-width:900px) {
 .container-lab { width:calc(100% - 40px); } .desktop-nav { gap:18px; } .header-call { display:none; }
 .hero h1 { font-size:46px; } .hero-copy { max-width:440px; } .hero-label { left:20px; }
 .about-inner,.home-grid,.booking-grid,.branch-grid { gap:35px; } .trust-item { gap:8px; } .trust-item strong { font-size:11px; } .trust-item span { font-size:10px; }
 .location-panel { padding:25px; gap:14px; } .location-icon { width:65px; height:65px; flex-shrink:0; }
}
@media (min-width:641px) and (max-width:1100px) {
 .header-inner { gap:18px; } .header-call { display:none; }
 .desktop-nav { gap:18px; font-size:12px; }
 .header-inner > .cta { padding-inline:18px; }
}
@media (max-width:640px) {
 .container-lab { width:calc(100% - 32px); }
 .site-header { height:78px; } .brand { gap:5px; } .brand img { width:54px; height:54px; } .brand strong { font-size:14px; white-space:nowrap; } .brand span { font-size:9px; display:block; } .desktop-nav { display:none; } .header-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; } .header-inner > .cta { min-height:44px; padding-inline:12px; font-size:11px; }
 /* على الموبايل صورة الكيميائي بتنزل تحت النص كاملة بدل ما تبقى خلفية مقصوصة */
 .hero { min-height:0; flex-direction:column; align-items:stretch; }
 .hero::after { display:none; }
 .hero-photo { position:relative; inset:auto; order:2; width:100%; height:min(78vw, 360px); object-position:22% 30%; }
 .hero-reassurance { color:var(--foreground); font-weight:600; }
 .hero .hero-label { left:auto; right:16px; bottom:16px; }
 .hero-inner { padding-block:34px; } .hero-copy { max-width:100%; } .hero h1 { font-size:38px; margin-top:11px; } .hero h2 { font-size:20px; } .hero p { font-size:13px; max-width:310px; } .hero-actions { margin-top:18px; } .cta { padding-inline:19px; font-size:12px; min-height:44px; } .hero-reassurance { font-size:10px; margin-top:15px; } .hero-label { left:20px; bottom:20px; }
 .trust-grid { grid-template-columns:repeat(2,1fr); gap:24px 0; } .trust-item:nth-child(2) { border:0; } .trust-item { justify-content:flex-start; padding-right:12px; } .trust-strip { padding-block:25px; }
 .section { padding-block:48px; } .section-title { font-size:25px; } .section-header { align-items:center; } .section-subtitle { font-size:12px; } .eyebrow { font-size:11px; } .gallery-track { gap:15px; animation-name:gallery-scroll-sm; } .gallery-item { width:76vw; }
 .about-inner,.home-grid,.branch-grid,.booking-grid { grid-template-columns:1fr; gap:30px; } .about-stat { border-right:0; border-top:1px solid var(--border); padding-top:20px; justify-content:flex-start; } .about-stat .number { font-size:80px; } .about-stat strong { font-size:17px; }
 .home-image { order:2; } .home-copy p { font-size:13px; } .location-panel { padding:25px; } .branch-address { font-size:16px; } .booking { padding-block:45px; } .booking-title { font-size:30px; } .booking-form { padding:25px; } .footer-inner { flex-direction:column; text-align:center; } .footer a { font-size:16px; }
 .hero-actions { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:10px; }
 .hero-actions .cta { padding-inline:8px; gap:6px; }
 .hero h1, .section-title, .booking-title { overflow-wrap:break-word; }
 .hero-reassurance { line-height:1.9; align-items:flex-start; } .hero-reassurance svg { margin-top:3px; }
 .hero-label { max-width:calc(100% - 32px); left:16px; padding:12px 14px; }
 .section-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
 .gallery-controls button { width:44px; height:44px; }
 .trust-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .trust-item { padding-right:0; gap:8px; } .trust-item:nth-child(even) { padding-right:12px; }
 .branch-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
 .branch-actions .cta { width:100%; }
 .location-panel { display:grid; grid-template-columns:auto minmax(0,1fr); padding:22px; }
 .location-panel h3 { font-size:20px; }
 .booking-form input { font-size:16px; min-height:52px; }
 .booking-grid .section-subtitle br { display:none; }
 .form-privacy { line-height:1.9; align-items:flex-start; } .form-privacy svg { flex-shrink:0; margin-top:3px; }
 .footer a { min-height:44px; }
 .thanks { padding-block:36px; min-height:auto; } .thanks-card { padding:32px 20px; } .thanks-card h1 { font-size:25px; } .thanks-card > p { font-size:13px; }
 .thanks-actions { display:grid; grid-template-columns:1fr; } .thanks-actions .cta { width:100%; }
}
@keyframes gallery-scroll-sm { to { transform:translateX(calc(-50% - 7.5px)); } }
@media (max-width:360px) {
 .brand img { width:44px; height:44px; } .brand strong { font-size:12px; } .brand span { font-size:8px; }
 .hero h1 { font-size:34px; } .hero-actions { grid-template-columns:minmax(0,1fr); }
 .hero-inner { padding-block:25px; } .hero-actions .cta { min-height:44px; }
 .hero-label strong { font-size:11px; } .section-title { font-size:23px; }
 .booking-title { font-size:27px; } .booking-form { padding:20px; }
 .about-stat { gap:18px; } .about-stat .number { font-size:70px; }
}
@media (max-width:640px) and (max-height:740px) {
 .hero-inner { padding-top:22px; } .hero h1 { margin-top:8px; }
 .hero h2 { margin-bottom:10px; } .hero p { margin-block:10px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .reveal { opacity:1; transform:none; } .thanks-check svg circle, .thanks-check svg path { stroke-dashoffset:0; } }