/* Darb Al Najah - Main Stylesheet
   NAVY + GOLD | RTL-first | Light/Dark | Premium minimal
*/

:root {
  --color-primary: #02132C;
  --color-primary-2: #0A2141;
  --color-accent: #CF8A1E;
  --color-accent-hover: #DDA051;
  --color-bg: #FBFBFB;
  --color-surface: #FFFFFF;
  --color-text: #101828;
  --color-text-muted: #667085;
  --color-border: #E9EAEA;
  --color-blue: #1E5AAB;
  --color-green: #16754B;
  --color-purple: #5F3599;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(2,19,44,0.08);
  --shadow-md: 0 4px 16px rgba(2,19,44,0.08);
  --shadow-lg: 0 8px 32px rgba(2,19,44,0.12);
  --container: 1280px;
  --header-height: 72px;
  --transition: 0.22s ease;
}

/* Dark mode — supports both automatic (OS preference) and manual [data-theme="dark"] with corrected contrast */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #020B18;
    --color-surface: #0A2141;
    --color-text: #F8FAFC;
    --color-text-muted: #B8C2D0;
    --color-border: #1C3553;
    --color-accent: #DDA051;
    --color-accent-hover: #F0B95A;
  }
  /* Headings must be light on dark backgrounds, not dark primary */
  .hero__title, .section-title, .service-card__title, .stat__number, .feature-card h3, .page-header h1, .prose h2, .prose h3, .feature-card h3 { color: var(--color-text) !important; }
  .navbar { background: rgba(6,21,42,0.96) !important; }
  .navbar__nav a { color: var(--color-text); }
  .navbar__nav a:hover, .navbar__nav a.active { color: var(--color-accent) !important; }
  .navbar__toggle { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.22) !important; }
  .navbar__toggle span { background: #fff !important; }
  .btn--outline { color: var(--color-text) !important; border-color: rgba(248,250,252,0.45) !important; background: rgba(255,255,255,0.06); }
  .btn--outline:hover { background: #fff !important; color: #02132C !important; border-color: #fff !important; }
  .btn--outline-light { color: #fff !important; border-color: rgba(255,255,255,0.55) !important; background: transparent; }
  .btn--outline-light:hover { background: #fff !important; color: #02132C !important; }
  .utility-bar { background: #06152A; }
  .hero { background: linear-gradient(180deg, #0A2141 0%, #020B18 100%); }
  .hero::before { opacity: 0.15; }
}

[data-theme="dark"] {
  --color-bg: #020B18;
  --color-surface: #0A2141;
  --color-text: #F8FAFC;
  --color-text-muted: #B8C2D0;
  --color-border: #1C3553;
  --color-accent: #DDA051;
  --color-accent-hover: #F0B95A;
}
[data-theme="dark"] .hero__title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .service-card__title,
[data-theme="dark"] .stat__number { color: var(--color-text) !important; }
[data-theme="dark"] .navbar { background: rgba(6,21,42,0.96) !important; }
[data-theme="dark"] .btn--outline { color: var(--color-text) !important; border-color: rgba(248,250,252,0.45) !important; background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .btn--outline:hover { background: #fff !important; color: #02132C !important; border-color: #fff !important; }

/* Reset / Base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  font-family:'Tajawal','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit}
.container{max-width:var(--container);margin:0 auto;padding-inline:20px}
@media(min-width:1280px){.container{padding-inline:24px}}

/* Utility bar */
.utility-bar{background:var(--color-primary);color:#fff;font-size:13px;padding:8px 0}
.utility-bar__inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.utility-bar__msg{font-weight:500}
.utility-bar__hours{opacity:0.85;white-space:nowrap}

/* Navbar */
.navbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border)}
[data-theme="dark"] .navbar{background:rgba(10,33,65,0.88)}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-height)}
.navbar__logo img{height:42px;width:auto;object-fit:contain}
.navbar__nav{display:flex;align-items:center;gap:28px}
.navbar__nav a{font-size:15px;font-weight:500;color:var(--color-text);position:relative;padding:6px 0;transition:color var(--transition)}
.navbar__nav a::after{content:"";position:absolute;bottom:-2px;right:0;width:0;height:2px;background:var(--color-accent);transition:width var(--transition)}
.navbar__nav a:hover,.navbar__nav a.active{color:var(--color-primary)}
.navbar__nav a:hover::after,.navbar__nav a.active::after{width:100%}
.navbar__actions{display:flex;align-items:center;gap:12px}
.navbar__toggle{display:none;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--color-border);cursor:pointer;padding:8px;width:44px;height:44px;justify-content:center;align-items:center;border-radius:10px;box-shadow:0 1px 4px rgba(2,19,44,0.08)}
.navbar__toggle span{display:block;width:22px;height:2px;background:var(--color-primary);border-radius:2px;transition:var(--transition)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border-radius:999px;font-weight:700;font-size:14px;line-height:1;border:1.5px solid transparent;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.btn--primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
.btn--primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 6px 20px rgba(207,138,30,0.28)}
.btn--outline{background:transparent;color:var(--color-primary);border-color:var(--color-border)}
.btn--outline:hover{border-color:var(--color-primary);background:var(--color-primary);color:#fff}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,0.5)}
.btn--outline-light:hover{background:#fff;color:var(--color-primary)}
.btn--lg{padding:14px 28px;font-size:15px}
.btn--block{width:100%}

/* Floating contacts */
.floating-contacts{position:fixed;inset:0;pointer-events:none;z-index:90}
.floating-btn{position:fixed;bottom:24px;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:var(--shadow-lg);pointer-events:auto;transition:transform var(--transition),box-shadow var(--transition);border:none;cursor:pointer;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.floating-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(2,19,44,0.18)}
.floating-btn--phone{right:20px;background:#fff;color:#02132C;left:auto;border:1px solid #E9EAEA}
.floating-btn--phone:hover{background:#f8fafc}
.floating-btn--whatsapp{left:20px;background:#25D366;color:#fff;right:auto}
.floating-btn__label{font-size:13px}
@media(max-width:640px){
  .floating-btn{bottom:16px;padding:12px 14px}
  .floating-btn__label{display:none}
  .floating-btn{width:52px;height:52px;justify-content:center;border-radius:50%;padding:0}
}

/* Hero */
.hero{padding:56px 0 48px;overflow:hidden;background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-bg) 100%);position:relative}
.hero--single{padding:72px 0 32px;text-align:center}
.hero--single .hero__inner--single{grid-template-columns:1fr;max-width:800px;margin:0 auto}
.hero--single .hero__content{text-align:center;margin:0 auto}
.hero--single .hero__desc{margin-inline:auto}
.hero--single .hero__actions{justify-content:center}
.hero--single .hero__trust{justify-content:center}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 70% 10%, rgba(207,138,30,0.07) 0%, transparent 60%), radial-gradient(800px 600px at 10% 90%, rgba(2,19,44,0.04) 0%, transparent 60%);pointer-events:none}
.hero__inner{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;position:relative}
.hero__eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:0.08em;color:var(--color-accent);background:rgba(207,138,30,0.1);padding:6px 14px;border-radius:999px;margin-bottom:16px}
.hero__title{font-size:42px;font-weight:800;line-height:1.25;color:var(--color-primary);margin-bottom:16px;max-width:600px}
.hero__desc{font-size:17px;color:var(--color-text-muted);line-height:1.8;margin-bottom:28px;max-width:560px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.hero__trust{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--color-text-muted)}
.hero__trust .dot{width:4px;height:4px;background:var(--color-accent);border-radius:50%}
.hero__visual{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center}
.hero__visual img{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:520px;object-fit:cover}
.hero__placeholder{position:relative;width:100%;max-width:480px;height:360px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden;padding:24px}
.hero__card{position:absolute;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--shadow-md)}
.hero__card--analytics{top:24px;right:24px;left:120px}
.hero__card--ads{bottom:24px;left:24px;right:120px}
.hero__growth-line{position:absolute;left:12%;right:12%;top:50%;height:3px;background:linear-gradient(90deg,var(--color-accent) 0%, var(--color-blue) 100%);border-radius:999px;opacity:0.8}
.hero__progress{height:6px;background:var(--color-border);border-radius:999px;overflow:hidden;margin-top:8px}
.hero__progress div{height:100%;background:var(--color-green);border-radius:999px}

/* Section header */
.section-header{text-align:center;max-width:680px;margin:0 auto 36px}
.section-eyebrow{display:inline-block;font-size:13px;font-weight:700;color:var(--color-accent);margin-bottom:8px;letter-spacing:0.06em}
.section-title{font-size:32px;font-weight:800;color:var(--color-primary);line-height:1.3;margin-bottom:12px}
.section-desc{color:var(--color-text-muted);font-size:16px;line-height:1.8}

/* Dynamic sections */
.dynamic-section{padding:48px 0}
.dynamic-section--hero{padding:0}

/* Cards */
.service-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition);display:flex;flex-direction:column;height:100%}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(207,138,30,0.2)}
.service-card__image img{width:100%;height:200px;object-fit:cover}
.service-card__body{padding:20px;flex:1;display:flex;flex-direction:column;gap:10px}
.service-card__icon{width:44px;height:44px;display:grid;place-items:center;background:rgba(207,138,30,0.1);color:var(--color-accent);border-radius:12px;font-size:20px}
.service-card__title{font-size:17px;font-weight:700;color:var(--color-primary)}
.service-card__desc{font-size:14px;color:var(--color-text-muted);line-height:1.7;flex:1}
.service-card__link{font-size:14px;font-weight:700;color:var(--color-accent)}
.service-card__link:hover{color:var(--color-accent-hover)}

.project-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition)}
.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.project-card__image{position:relative;height:220px;overflow:hidden;background:linear-gradient(135deg,var(--color-primary) 0%, var(--color-primary-2) 100%)}
.project-card__image img{width:100%;height:100%;object-fit:cover}
.project-card__badge{position:absolute;top:12px;right:12px;background:var(--color-accent);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.project-card__body{padding:16px}
.project-card__body h3{font-size:16px;font-weight:700;margin-bottom:4px}
.project-card__body p{font-size:13px;color:var(--color-text-muted)}
.project-card__link{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--color-accent)}

/* Grids */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1024px){.services-grid,.projects-grid,.features-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.services-grid,.projects-grid,.features-grid,.stats-grid{grid-template-columns:1fr}}

/* Feature card */
.feature-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:22px;text-align:right}
.feature-card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.feature-card p{font-size:14px;color:var(--color-text-muted)}

/* Stat */
.stat{text-align:center;padding:24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.stat__number{font-size:32px;font-weight:800;color:var(--color-primary);direction:ltr}
.stat__label{font-size:13px;color:var(--color-text-muted);margin-top:4px}

/* Process */
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.process-step{text-align:center;position:relative}
.process-step__num{width:48px;height:48px;margin:0 auto 12px;display:grid;place-items:center;background:var(--color-primary);color:#fff;border-radius:50%;font-weight:800}
.process-step h3{font-size:15px;font-weight:700;margin-bottom:6px}
.process-step p{font-size:13px;color:var(--color-text-muted)}
@media(max-width:768px){.process-steps{grid-template-columns:1fr 1fr}}

/* Testimonials */
.testimonial{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px}
.testimonial p{font-size:14px;line-height:1.8;color:var(--color-text)}
.testimonial cite{font-size:13px;font-weight:700;color:var(--color-primary);margin-top:12px;display:block}

/* FAQ */
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden;background:var(--color-surface)}
.faq-item summary{padding:16px 20px;cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::after{content:"+";font-size:20px;color:var(--color-accent);transition:var(--transition)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item__answer{padding:0 20px 16px;color:var(--color-text-muted);font-size:14px;line-height:1.8;border-top:1px solid var(--color-border);margin-top:4px;padding-top:12px}

/* CTA */
.cta-section{background:var(--color-primary);color:#fff;padding:48px 0;position:relative;overflow:hidden}
.cta-section::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 80% 20%, rgba(207,138,30,0.18) 0%, transparent 60%);pointer-events:none}
.cta__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative}
.cta__content h2{font-size:28px;font-weight:800;margin-bottom:8px}
.cta__content p{opacity:0.85;max-width:520px}
.cta__actions{display:flex;gap:12px;flex-wrap:wrap}

/* Breadcrumbs */
.breadcrumbs{font-size:13px;color:var(--color-text-muted);margin-bottom:16px}
.breadcrumbs ol{display:flex;gap:8px;flex-wrap:wrap}
.breadcrumbs li+li::before{content:"/";margin-inline-end:8px;opacity:0.5}
.breadcrumbs a:hover{color:var(--color-accent)}

/* Prose */
.prose{color:var(--color-text);font-size:15px;line-height:1.9}
.prose h2,.prose h3{color:var(--color-primary);margin:16px 0 8px}
.prose p{margin-bottom:12px}
.prose a{color:var(--color-accent);text-decoration:underline}

/* Image-text grid */
.image-text-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
@media(max-width:768px){.image-text-grid{grid-template-columns:1fr}}

/* Footer */
.footer{background:var(--color-primary);color:#fff;padding:48px 0 24px;margin-top:48px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;margin-bottom:32px}
.footer__logo img{height:42px;width:auto;filter:brightness(0) invert(1)}
.footer__desc{font-size:13px;opacity:0.85;line-height:1.8;margin:12px 0}
.footer__nationwide{font-size:12px;font-weight:700;color:var(--color-accent);margin-bottom:12px}
.footer__social{display:flex;gap:8px}
.footer__social a{width:36px;height:36px;display:grid;place-items:center;background:rgba(255,255,255,0.1);border-radius:50%;font-size:12px;font-weight:700}
.footer__col h4{font-size:15px;font-weight:700;margin-bottom:14px}
.footer__col ul{display:flex;flex-direction:column;gap:8px}
.footer__col a{font-size:13px;opacity:0.85;transition:opacity var(--transition)}
.footer__col a:hover{opacity:1;color:var(--color-accent)}
.footer__bottom{border-top:1px solid rgba(255,255,255,0.12);padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;opacity:0.7}
@media(max-width:1024px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.footer__grid{grid-template-columns:1fr}}

/* Contact form */
.form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-field label{font-size:13px;font-weight:700}
.form-field input,.form-field textarea,.form-field select{padding:12px 14px;border:1px solid var(--color-border);border-radius:10px;font-size:14px;background:var(--color-bg);color:var(--color-text);font-family:inherit}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(207,138,30,0.12)}
.error{color:#c00;font-size:12px}
.success{background:#e6f4ea;border:1px solid #a3d9b1;color:#16754B;padding:12px 16px;border-radius:10px;margin-bottom:16px}

/* Mobile menu */
.mobile-menu{position:fixed;inset:var(--header-height) 0 auto 0;background:var(--color-surface);border-top:1px solid var(--color-border);padding:20px;box-shadow:var(--shadow-lg);z-index:99}
.mobile-menu__nav{display:flex;flex-direction:column;gap:12px}
.mobile-menu__nav a{padding:12px 16px;border-radius:10px;font-weight:600}
.mobile-menu__nav a:hover{background:var(--color-bg)}

/* Animations - subtle */
@media(prefers-reduced-motion:no-preference){
  .service-card,.project-card,.feature-card{animation:fadeUp 0.5s ease both}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}

/* Focus */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* RTL tweaks */
html[dir="rtl"] .service-card__link::after{content:""}