/* ==========================================================
   Google Master — mobile-first redesign
   ========================================================== */

:root{
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --amber:#f5b400;
  --green:#1fae63;
  --wa:#25d366;
  --ink:#0f1720;
  --ink-soft:#5b6472;
  --navy:#0b1220;
  --navy-2:#111b2e;
  --cream:#f6f7fb;
  --card:#ffffff;
  --line:#e6e9f0;
  --radius-s:10px;
  --radius:18px;
  --radius-l:28px;
  --shadow:0 18px 44px rgba(15,23,32,.10);
  --shadow-sm:0 6px 18px rgba(15,23,32,.08);
  --maxw:1220px;
  --font:"Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{
  margin:0;
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;}
section{padding:64px 0;}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px;}

.skip-link{position:absolute;top:-60px;right:16px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 12px 12px;z-index:300;transition:top .2s;}
.skip-link:focus{top:0;}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--blue);margin:0 0 .6rem;}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--blue);display:inline-block;}
.eyebrow-light{color:var(--amber);}
.eyebrow-light::before{background:var(--amber);}
.section-head{max-width:640px;margin:0 0 34px;}
.section-head h2{font-size:clamp(1.5rem,4.5vw,2.1rem);font-weight:800;line-height:1.3;}
.section-sub{color:var(--ink-soft);margin-top:.8rem;line-height:1.7;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;font-size:.96rem;transition:transform .15s,box-shadow .15s,background .15s,color .15s;white-space:nowrap;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(37,99,235,.32);}
.btn-primary:hover{background:var(--blue-dark);}
.btn-ghost{border:2px solid var(--line);color:var(--ink);background:#fff;}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.btn-outline{border:2px solid var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);}
.btn-outline-light{border:2px solid rgba(255,255,255,.35);color:#fff;}
.btn-whatsapp{background:var(--wa);color:#fff;}
.btn-block{width:100%;}
.link-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue);border-bottom:2px solid var(--line);padding-bottom:4px;transition:gap .18s,border-color .18s;margin-top:.6rem;}
.link-cta:hover{gap:14px;border-color:var(--blue);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(11,18,32,.98);border-bottom:1px solid rgba(255,255,255,.06);}
.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.logo{display:flex;align-items:center;gap:10px;color:#fff;}
.logo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--blue),#60a5fa);color:#fff;flex-shrink:0;}
.logo-text{display:flex;flex-direction:column;line-height:1.15;}
.logo-text strong{font-size:1rem;font-weight:800;}
.logo-text small{font-size:.68rem;color:rgba(255,255,255,.65);letter-spacing:.02em;}

.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;border-radius:10px;}
.nav-toggle span{display:block;width:100%;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s;}
.nav-toggle:hover{background:rgba(255,255,255,.08);}

.header-cta{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;padding:9px 14px;border-radius:999px;font-weight:700;font-size:.88rem;flex-shrink:0;}

/* Off-canvas nav (mobile default) */
.main-nav{
  position:fixed;top:0;bottom:0;right:0;
  width:min(320px,86vw);
  background:var(--navy-2);
  color:#fff;
  z-index:200;
  padding:18px 20px 26px;
  display:flex;flex-direction:column;gap:22px;
  transform:translateX(100%);
  transition:transform .3s ease;
  overflow-y:auto;
}
.main-nav.open{transform:translateX(0);}
.main-nav-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);}
.nav-close{font-size:1.8rem;line-height:1;color:#fff;width:36px;height:36px;}
.main-nav ul{display:flex;flex-direction:column;gap:4px;}
.main-nav a{display:block;padding:12px 6px;border-radius:10px;font-weight:600;color:rgba(255,255,255,.85);}
.main-nav a:hover,.main-nav a:focus{background:rgba(255,255,255,.08);color:#fff;}
.nav-cta-group{margin-top:auto;display:flex;flex-direction:column;gap:10px;}
.nav-cta-group .btn{width:100%;}

.nav-backdrop{position:fixed;inset:0;background:rgba(5,8,15,.55);z-index:150;opacity:0;pointer-events:none;transition:opacity .25s;}
.nav-backdrop.open{opacity:1;pointer-events:auto;}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;padding:40px 0 56px;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(520px 420px at 15% 15%,rgba(37,99,235,.35),transparent 60%),
  radial-gradient(480px 420px at 85% 75%,rgba(245,180,0,.16),transparent 60%),
  linear-gradient(180deg,#0b1220,#0e1729 70%);
}
.hero-inner{position:relative;display:flex;flex-direction:column;gap:34px;}
.hero-copy .eyebrow{margin-bottom:14px;}
.hero-copy h1{font-size:clamp(1.9rem,7vw,2.6rem);font-weight:800;line-height:1.28;}
.hero-copy h1 span{color:var(--amber);}
.hero-lead{margin-top:16px;color:rgba(255,255,255,.78);line-height:1.85;font-size:1rem;}
.hero-lead strong{color:#fff;}
.hero-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px;}
.hero-actions .btn{width:100%;}
.hero-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px;}
.hero-badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 8px;text-align:center;}
.hero-badge strong{display:block;font-size:1.25rem;color:var(--amber);font-weight:800;}
.hero-badge span{font-size:.72rem;color:rgba(255,255,255,.7);}

.hero-media{position:relative;max-width:340px;margin:10px auto 30px;}
.hero-photo-frame{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 24px 60px rgba(0,0,0,.45);border:3px solid rgba(255,255,255,.12);}
.hero-photo-frame img{width:100%;height:100%;object-fit:cover;}
.hero-float-card{position:absolute;background:#fff;color:var(--ink);border-radius:16px;padding:10px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;min-width:120px;}
.hero-float-rating{top:-14px;right:-10px;}
.hero-float-rating .stars{color:var(--amber);font-size:.8rem;letter-spacing:1px;}
.hero-float-rating strong{font-size:1.2rem;font-weight:800;}
.hero-float-rating span{font-size:.7rem;color:var(--ink-soft);}
.hero-float-badge{bottom:-14px;left:-10px;background:var(--blue);color:#fff;text-align:center;min-width:100px;}
.hero-float-badge strong{font-size:1.1rem;font-weight:800;}
.hero-float-badge span{font-size:.68rem;opacity:.9;}

/* ---------- About ---------- */
.about-single{max-width:760px;}
.about-copy p{color:var(--ink-soft);line-height:1.85;margin-top:14px;}
.about-copy p:first-of-type{margin-top:0;}
.about-copy strong{color:var(--ink);}
.check-list{margin-top:20px;display:flex;flex-direction:column;gap:12px;}
.check-list li{position:relative;padding-right:30px;color:var(--ink-soft);line-height:1.6;font-size:.95rem;}
.check-list li::before{content:"✓";position:absolute;right:0;top:0;width:20px;height:20px;border-radius:50%;background:rgba(37,99,235,.12);color:var(--blue);font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:800;}

/* ---------- Stats ---------- */
.stats{background:var(--navy);color:#fff;padding:36px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;text-align:center;}
.stat-num,.stat-suffix{font-size:1.7rem;font-weight:800;color:var(--amber);}
.stat-item p{margin-top:4px;color:rgba(255,255,255,.72);font-size:.82rem;}

/* ---------- Services ---------- */
.services-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.service-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .2s,box-shadow .2s;}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.service-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(37,99,235,.1);color:var(--blue);margin-bottom:14px;}
.service-icon svg{width:26px;height:26px;}
.service-card h3{font-size:1.08rem;font-weight:800;margin-bottom:8px;}
.service-card p{color:var(--ink-soft);font-size:.92rem;line-height:1.7;}

/* ---------- Results (horizontal scroll on mobile) ---------- */
.results{background:#fff;}
.results-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin:0 -20px;padding-inline:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.results-track::-webkit-scrollbar{display:none;}
.result-card{flex:0 0 82%;scroll-snap-align:start;background:var(--cream);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.result-shot{background:#fff;padding:10px;}
.result-shot img{width:100%;border-radius:10px;border:1px solid var(--line);}
.result-card figcaption{padding:16px 18px 20px;}
.result-card strong{display:block;font-size:1.2rem;font-weight:800;color:var(--blue);}
.result-card span{display:block;margin-top:4px;color:var(--ink-soft);font-size:.86rem;line-height:1.5;}
.results-dots{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.results-dots button{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s,width .2s;}
.results-dots button.active{background:var(--blue);width:22px;border-radius:5px;}

/* ---------- Packages ---------- */
.packages{background:var(--cream);}
.packages-grid{display:grid;grid-template-columns:1fr;gap:20px;}
.package-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;}
.package-card.is-featured{border-color:var(--blue);box-shadow:0 20px 50px rgba(37,99,235,.16);}
.package-badge{position:absolute;top:-13px;right:24px;background:var(--amber);color:#231a00;font-size:.72rem;font-weight:800;padding:6px 14px;border-radius:999px;}
.package-card h3{font-size:1.2rem;font-weight:800;margin:14px 0 16px;}
.package-list{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.package-list li{position:relative;padding-right:24px;color:var(--ink-soft);font-size:.92rem;line-height:1.5;}
.package-list li::before{content:"";position:absolute;right:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--blue);}
.package-card .btn{margin-top:auto;}

/* ---------- Areas ---------- */
.areas{background:var(--navy);color:#fff;}
.areas .eyebrow{color:var(--amber);}
.areas .eyebrow::before{background:var(--amber);}
.areas-grid{display:flex;flex-direction:column;gap:28px;}
.areas-copy h2{color:#fff;}
.areas-copy .section-sub{color:rgba(255,255,255,.72);}
.areas-copy .link-cta{color:var(--amber);border-color:rgba(255,255,255,.25);}
.areas-chips{display:flex;flex-wrap:wrap;gap:10px;}
.areas-chips span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:9px 16px;border-radius:999px;font-size:.86rem;font-weight:600;}

/* ---------- Testimonials ---------- */
.testi-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.testi-track::-webkit-scrollbar{display:none;}
.testi-card{flex:0 0 88%;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
.testi-quote{color:var(--ink);line-height:1.8;font-size:.96rem;}
.testi-person{display:flex;align-items:center;gap:12px;margin-top:18px;}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:rgba(37,99,235,.12);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:.85rem;flex-shrink:0;}
.testi-person strong{display:block;font-size:.92rem;}
.testi-person small{color:var(--ink-soft);font-size:.78rem;}
.testi-dots{display:flex;justify-content:center;gap:8px;margin-top:14px;}
.testi-dots button{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s,width .2s;}
.testi-dots button.active{background:var(--blue);width:22px;border-radius:5px;}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;}
.faq-q{width:100%;text-align:right;padding:18px 18px;display:flex;justify-content:space-between;align-items:center;font-weight:700;gap:12px;font-size:.96rem;}
.faq-icon{position:relative;width:18px;height:18px;flex-shrink:0;}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--blue);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%);}
.faq-icon::before{width:14px;height:2px;}
.faq-icon::after{width:2px;height:14px;transition:transform .25s;}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scale(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 18px 18px;color:var(--ink-soft);line-height:1.7;font-size:.92rem;}

/* ---------- Contact ---------- */
.contact-grid{display:flex;flex-direction:column;gap:32px;}
.contact-info{margin-top:22px;display:flex;flex-direction:column;gap:14px;}
.contact-info li{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--ink-soft);}
.contact-info a{color:var(--ink);font-weight:700;}
.contact-ic{width:38px;height:38px;border-radius:10px;background:rgba(37,99,235,.1);color:var(--blue);display:grid;place-items:center;flex-shrink:0;}
.contact-note{display:flex;gap:12px;margin-top:22px;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.16);border-radius:var(--radius-s);padding:14px 16px;}
.contact-note-ic{color:var(--blue);flex-shrink:0;}
.contact-note p{color:var(--ink-soft);font-size:.86rem;line-height:1.6;}
.num{direction:ltr;unicode-bidi:isolate;display:inline-block;}

.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px;}
.form-row{display:grid;grid-template-columns:1fr;gap:16px;}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:.86rem;font-weight:700;color:var(--ink);}
.contact-form input,.contact-form textarea{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--font);font-size:.94rem;color:var(--ink);background:var(--cream);resize:vertical;}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;background:#fff;}
.form-note{min-height:1.2em;font-size:.84rem;color:var(--green);font-weight:700;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.85);padding-top:52px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;padding-bottom:32px;}
.footer-brand .logo{color:#fff;margin-bottom:14px;}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.7;}
.footer-col h3{color:#fff;font-size:.96rem;font-weight:800;margin-bottom:14px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{color:rgba(255,255,255,.65);font-size:.88rem;}
.footer-col a:hover{color:#fff;}
.footer-tags{display:flex;flex-wrap:wrap;gap:8px;}
.footer-tags a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:7px 12px;border-radius:999px;font-size:.78rem;color:rgba(255,255,255,.72);}
.footer-tags a:hover{background:rgba(255,255,255,.12);color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;}
.footer-bottom p{text-align:center;font-size:.8rem;color:rgba(255,255,255,.5);}

/* ---------- Floating actions ---------- */
.floating-actions{position:fixed;left:14px;bottom:14px;display:flex;flex-direction:column;gap:10px;z-index:90;}
.fab{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25);color:#fff;}
.fab-call{background:var(--blue);}
.fab-whatsapp{background:var(--wa);}

/* ---------- Lightbox not used, results/testimonials handled via scroller ---------- */

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
[data-reveal].is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  [data-reveal]{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* Prevent body scroll when nav open */
body.nav-open{overflow:hidden;}

/* ==========================================================
   Breakpoints — progressively enhance for larger screens
   ========================================================== */
@media (min-width:560px){
  .hero-actions{flex-direction:row;flex-wrap:wrap;}
  .hero-actions .btn{width:auto;}
  .result-card{flex:0 0 60%;}
  .testi-card{flex:0 0 62%;}
  .packages-grid{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:768px){
  section{padding:80px 0;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(4,1fr);}

  .form-row{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .result-card{flex:0 0 44%;}
  .testi-card{flex:0 0 46%;}
}

@media (min-width:1024px){
  :root{--header-h:76px;}
  .container{padding-inline:32px;}

  /* Desktop nav becomes inline */
  .nav-toggle,.nav-close,.nav-backdrop,.main-nav-head{display:none;}
  .main-nav{
    position:static;transform:none;width:auto;height:auto;background:transparent;
    flex-direction:row;align-items:center;padding:0;gap:28px;overflow:visible;
  }
  .main-nav ul{flex-direction:row;gap:2px;}
  .main-nav a{padding:8px 14px;border-radius:999px;color:rgba(255,255,255,.78);font-size:.92rem;}
  .main-nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
  .nav-cta-group{margin-top:0;flex-direction:row;}
  .nav-cta-group .btn{width:auto;padding:11px 18px;font-size:.86rem;}
  .header-inner{position:relative;}
  .header-cta{display:none;}
  .site-header .container.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;}

  .hero{padding:70px 0 90px;}
  .hero-inner{flex-direction:row-reverse;align-items:center;gap:60px;}
  .hero-copy{flex:1.1;}
  .hero-lead{font-size:1.08rem;max-width:560px;}
  .hero-badges{grid-template-columns:repeat(3,140px);}
  .hero-media{flex:1;max-width:400px;margin:0;}
  .hero-photo-frame{aspect-ratio:1/1.05;}

  .about-single{max-width:760px;}

  .services-grid{grid-template-columns:repeat(3,1fr);}

  .results-track{overflow-x:visible;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .result-card{flex:none;}
  .results-dots{display:none;}

  .packages-grid{grid-template-columns:repeat(3,1fr);gap:24px;}
  .package-card.is-featured{transform:scale(1.04);}

  .areas-grid{flex-direction:row;align-items:center;justify-content:space-between;gap:50px;}
  .areas-copy{flex:1;}
  .areas-chips{flex:1;justify-content:flex-end;}

  .testi-track{overflow-x:visible;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .testi-card{flex:none;}
  .testi-dots{display:none;}

  .contact-grid{flex-direction:row-reverse;gap:60px;align-items:flex-start;}
  .contact-copy{flex:1;}
  .contact-form{flex:1;}

  .footer-grid{grid-template-columns:1.3fr .8fr 1.4fr .9fr;gap:28px;}

  .floating-actions{left:24px;bottom:24px;}
}

@media (min-width:1280px){
  .hero-copy h1{font-size:3.1rem;}
}