/* ═══════════════════════════════════════════════════════════════
   OPERINES AI  —  Premium WordPress Theme
   Inspired by lindy.ai design language
   Font: Manrope · Palette: #FCF9F8 cream, #1E0B33 ink, #5B2A86 blue
   UAE spirit: Dubai skyline + Islamic geometry (subtle watermarks)
   ═══════════════════════════════════════════════════════════════ */

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', sans-serif;
  background: #FAF7FC;
  color: #1E0B33;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
svg { display: block; }

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  /* Brand palette derived from the Operines logo (deep royal purple) */
  --cream:      #FAF7FC;
  --cream-2:    #F1EBF5;
  --white:      #FFFFFF;
  --ink:        #1E0B33;   /* deep purple-black — logo dark */
  --ink-80:     rgba(30,11,51,.80);
  --ink-60:     rgba(30,11,51,.60);
  --ink-40:     rgba(30,11,51,.42);
  --ink-12:     rgba(30,11,51,.08);

  --blue:       #5B2A86;   /* brand purple — primary CTA */
  --blue-dark:  #3D1A5E;
  --blue-pale:  rgba(91,42,134,.10);

  --purple:     #7E3D9E;   /* lighter violet accent */
  --purple-pale:rgba(126,61,158,.10);

  --gold:       #C9A227;   /* premium gold secondary */
  --gold-pale:  rgba(201,162,39,.12);

  --green:      #2FA36B;
  --border:     #E7DEEE;
  --border-light: #F1EBF5;

  /* Soft lavender hero gradient — tuned to the brand purple */
  --hero-grad: linear-gradient(120deg,
    rgba(214,196,240,.55) 0%,
    rgba(231,219,248,.50) 52%,
    rgba(205,188,236,.60) 100%);

  --shadow-sm:  0 1px 4px rgba(30,11,51,.08);
  --shadow:     0 4px 20px rgba(30,11,51,.10);
  --shadow-lg:  0 12px 48px rgba(30,11,51,.16);
  --shadow-xl:  0 24px 80px rgba(30,11,51,.20);

  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --ease:       cubic-bezier(.4,0,.2,1);
  --t:          all .25s var(--ease);
}

/* ── TYPOGRAPHY SCALE (lindy.ai exact) ───────────────────────── */
h1 { font-size: 72px; font-weight: 700; letter-spacing: -1.44px; line-height: 1.05; }
h2 { font-size: 48px; font-weight: 700; letter-spacing: -0.96px; line-height: 1.1;  }
h3 { font-size: 32px; font-weight: 700; letter-spacing: -0.48px; line-height: 1.2;  }
h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.22px; }
h5 { font-size: 18px; font-weight: 600; }
p  { font-size: 16px; font-weight: 500; color: var(--ink-80); line-height: 1.7; }

/* ── UTILITY ─────────────────────────────────────────────────── */
.container    { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.container-sm { max-width: 720px;  margin: 0 auto; padding: 0 32px; }
.section      { padding: 112px 0; }
.text-center  { text-align: center; }

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
.reveal               { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.in            { opacity: 1; transform: none; }
.reveal-up            { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-up.in         { opacity: 1; transform: none; }
.reveal-left          { opacity: 0; transform: translateX(-32px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal-left.in       { opacity: 1; transform: none; }
.reveal-right         { opacity: 0; transform: translateX(32px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal-right.in      { opacity: 1; transform: none; }
.d1 { transition-delay:.08s; } .d2 { transition-delay:.16s; } .d3 { transition-delay:.24s; }
.d4 { transition-delay:.32s; } .d5 { transition-delay:.40s; }

/* ── SCROLL PROGRESS BAR ─────────────────────────────────────── */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 9999;
  background: var(--blue); width: 0; transition: width .1s linear;
}

/* ── PAGE LOADER ─────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  z-index: 9997; transition: opacity .5s, visibility .5s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-wrap { text-align: center; }
.loader-wrap img { width: 140px; margin: 0 auto 20px; }
.loader-spinner {
  width: 32px; height: 32px; border-radius: 50%; margin: 0 auto;
  border: 2.5px solid var(--border); border-top-color: var(--blue);
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 100px;
  font-family: 'Manrope',sans-serif; font-size: 16px; font-weight: 600;
  border: none; transition: var(--t); white-space: nowrap; line-height: 1;
}
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.btn-blue {
  background: var(--blue); color: #fff;
  box-shadow: 0 2px 12px rgba(91,42,134,.35);
}
.btn-blue:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(91,42,134,.45); }
.btn-outline {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--ink-60); transform: translateY(-1px); }
.btn-ink {
  background: var(--ink); color: #fff;
  box-shadow: 0 2px 12px rgba(30,11,51,.25);
}
.btn-ink:hover { background: #2E1248; transform: translateY(-1px); }
.btn-ghost-white {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1.5px solid rgba(255,255,255,.25); backdrop-filter: blur(8px);
}
.btn-ghost-white:hover { background: rgba(255,255,255,.22); }
.btn-lg { padding: 15px 32px; font-size: 17px; }
.btn-sm { padding: 9px 18px; font-size: 14px; }

/* Magnetic button wrapper */
.mag { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.btn svg { display: block; }
.btn span { display: inline-flex; align-items: center; line-height: 1; }

/* ── NAV ─────────────────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 32px; transition: var(--t);
}
.site-nav.stuck {
  background: rgba(250,247,252,.92); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.nav-wrap {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; height: 66px;
}
.nav-logo { flex-shrink: 0; margin-inline-end: auto; }
.nav-logo img { height: 36px; width: auto; }

.nav-links {
  display: flex; align-items: center; gap: 2px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a {
  font-size: 15px; font-weight: 500; color: var(--ink-80);
  padding: 7px 14px; border-radius: 8px; transition: var(--t);
}
.nav-links a:hover { color: var(--ink); background: var(--ink-12); }

.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-login { font-size: 15px; font-weight: 500; color: var(--ink-80); padding: 7px 14px; border-radius: 8px; transition: var(--t); }
.nav-login:hover { color: var(--ink); background: var(--ink-12); }

/* Language switch */
.lang-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--ink-60);
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
  transition: var(--t);
}
.lang-btn:hover { color: var(--ink); border-color: var(--ink-40); }

/* Hamburger */
.nav-ham { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.nav-ham span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: var(--t); }
.nav-ham.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-ham.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile menu */
.mobile-nav {
  display: none; position: absolute; top: 66px; left: 0; right: 0;
  background: rgba(250,247,252,.97); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border); padding: 16px 32px 24px;
}
.mobile-nav.open { display: block; }
.mob-link { display: block; padding: 14px 0; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--border-light); color: var(--ink); }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 100px 32px 80px; text-align: center;
  overflow: hidden;
}

/* Lindy's exact soft pink gradient background */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: var(--hero-grad);
}

/* UAE: Dubai skyline watermark — barely visible */
.hero-skyline {
  position: absolute; bottom: 0; left: 0; right: 0; height: 55%;
  opacity: .035; pointer-events: none; z-index: 1; color: var(--ink);
}
.hero-skyline svg { width: 100%; height: 100%; }

/* UAE: Islamic star geometric — top right */
.hero-star {
  position: absolute; top: -60px; right: -60px;
  width: 380px; height: 380px; opacity: .05;
  pointer-events: none; z-index: 1; color: var(--purple);
}
.hero-star svg { width: 100%; height: 100%; }

.hero-inner {
  position: relative; z-index: 2;
  max-width: 800px; width: 100%;
}

/* Eyebrow pill — like lindy's tiny labels */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 100px; padding: 6px 16px 6px 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-80);
  margin-bottom: 28px; box-shadow: var(--shadow-sm);
}
.hero-eyebrow-dot {
  width: 20px; height: 20px; border-radius: 50%; background: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.hero-eyebrow-dot svg { width: 11px; height: 11px; color: #fff; }

/* Huge headline — exactly lindy 72px */
.hero-h1 {
  font-size: 72px; font-weight: 700;
  letter-spacing: -1.44px; line-height: 1.05;
  color: var(--ink); margin-bottom: 24px;
}
.hero-h1 .static  { display: block; }
.hero-h1 .rotator {
  display: block; min-height: 1.05em; overflow: hidden;
  color: var(--blue);
}
.rotator-word {
  display: block;
  transition: opacity .25s ease, transform .25s ease;
}
.rotator-word.out { opacity: 0; transform: translateY(-30px); }
.rotator-word.in  { opacity: 0; transform: translateY(30px); }
.rotator-word.show { opacity: 1; transform: none; }

/* Hero subtitle — lindy's 20px medium */
.hero-sub {
  font-size: 20px; font-weight: 500; color: var(--ink-80);
  max-width: 580px; margin: 0 auto 36px; line-height: 1.6;
}

.hero-ctas {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}

/* Trust note under CTAs — "7-day free trial • no credit card" */
.hero-trust {
  font-size: 13px; color: var(--ink-40); font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hero-trust span { display: flex; align-items: center; gap: 4px; }
.hero-trust svg  { width: 14px; height: 14px; color: var(--green); }

/* Social proof avatars */
.hero-proof {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 48px; padding-top: 36px;
  border-top: 1px solid var(--border);
}
.proof-ava { display: flex; }
.pav {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--cream); margin-right: -10px;
  font-size: 12px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pav-1 { background: #5B2A86; }
.pav-2 { background: #7E3D9E; }
.pav-3 { background: #C9A227; }
.pav-4 { background: #2FA36B; }
.proof-label { font-size: 14px; font-weight: 500; color: var(--ink-60); }
.proof-label strong { color: var(--ink); }

/* Hero product screenshot — below text */
.hero-screen {
  position: relative; z-index: 2; margin-top: 64px;
  max-width: 860px; width: 100%;
}
.hero-screen-wrap {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.screen-bar {
  background: #F5F1EB; padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
}
.screen-dots { display: flex; gap: 5px; }
.screen-dots span { width: 10px; height: 10px; border-radius: 50%; }
.screen-dots span:nth-child(1) { background: #FF5F57; }
.screen-dots span:nth-child(2) { background: #FEBC2E; }
.screen-dots span:nth-child(3) { background: #28C840; }
.screen-url {
  flex: 1; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 12px;
  font-size: 12px; color: var(--ink-40); font-weight: 500;
}
.screen-live {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--green);
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.screen-body { padding: 28px; background: #FAFAF9; }
.screen-grid { display: grid; grid-template-columns: 220px 1fr; gap: 16px; min-height: 280px; }

/* Left sidebar */
.screen-sidebar {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-60);
  transition: var(--t);
}
.sb-item.active { background: var(--blue-pale); color: var(--blue); font-weight: 600; }
.sb-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Main content area */
.screen-main { display: flex; flex-direction: column; gap: 14px; }

.screen-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.kpi-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.kpi-val  { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.kpi-lbl  { font-size: 11px; font-weight: 600; color: var(--ink-40); text-transform: uppercase; letter-spacing: .5px; }
.kpi-delta { font-size: 11px; font-weight: 700; color: var(--green); margin-top: 6px; }
.kpi-blue .kpi-val  { color: var(--blue); }
.kpi-purple .kpi-val { color: var(--purple); }
.kpi-gold .kpi-val  { color: var(--gold); }

.screen-agents { display: flex; flex-direction: column; gap: 8px; }
.agent-row {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.agent-ico {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.agent-ico svg { width: 16px; height: 16px; }
.ico-blue   { background: var(--blue-pale);   color: var(--blue); }
.ico-purple { background: var(--purple-pale);  color: var(--purple); }
.ico-gold   { background: var(--gold-pale);    color: var(--gold); }
.ico-green  { background: rgba(66,176,86,.1);  color: var(--green); }
.agent-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.agent-task { font-size: 11px; color: var(--ink-40); margin-top: 2px; }
.agent-pill {
  margin-left: auto; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px; flex-shrink: 0;
}
.pill-run  { background: var(--blue-pale);  color: var(--blue); }
.pill-done { background: rgba(66,176,86,.1); color: var(--green); }

/* Float cards around screen */
.hero-float {
  position: absolute; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--shadow);
  text-align: left;
}
.hf-top-right { top: -18px; right: -18px; }
.hf-bot-left  { bottom: 24px; left: -20px; }
.hf-lbl  { font-size: 10px; font-weight: 700; color: var(--ink-40); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.hf-val  { font-size: 20px; font-weight: 800; color: var(--blue); letter-spacing: -.5px; }
.hf-sub  { font-size: 11px; font-weight: 600; color: var(--green); margin-top: 2px; }

/* ── LOGOS MARQUEE ───────────────────────────────────────────── */
.logos-wrap {
  padding: 28px 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); background: #fff;
  overflow: hidden;
}
.logos-label { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-40); letter-spacing: .5px; margin-bottom: 22px; }
.marquee { position: relative; overflow: hidden; }
.marquee::before,.marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
}
.marquee::before { left: 0; background: linear-gradient(90deg,#fff,transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg,#fff,transparent); }
.marquee-track { display: flex; gap: 48px; animation: scroll 28s linear infinite; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.logo-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: rgba(30,11,51,.25);
  white-space: nowrap; letter-spacing: -.1px; transition: color .3s;
}
.logo-chip:hover { color: rgba(30,11,51,.6); }
.logo-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── FEATURE SECTIONS (lindy alternating style) ──────────────── */
.features-section { background: var(--cream); }

.feat-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center; padding: 96px 0;
  border-bottom: 1px solid var(--border-light);
}
.feat-row:last-child { border-bottom: none; }
.feat-row.flip { }
.feat-row.flip .feat-text { order: 2; }
.feat-row.flip .feat-visual { order: 1; }

.feat-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--blue);
  letter-spacing: .2px; margin-bottom: 16px;
}
.feat-eyebrow::before {
  content: ''; display: block; width: 18px; height: 2px;
  background: var(--blue); border-radius: 2px;
}
.feat-h3 { font-size: 36px; font-weight: 700; letter-spacing: -.72px; line-height: 1.2; color: var(--ink); margin-bottom: 16px; }
.feat-p  { font-size: 17px; font-weight: 500; color: var(--ink-60); line-height: 1.75; margin-bottom: 28px; }
.feat-bullets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.feat-bullet {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; font-weight: 500; color: var(--ink-80);
}
.feat-bullet-ico {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  background: rgba(66,176,86,.12); display: flex; align-items: center; justify-content: center;
}
.feat-bullet-ico svg { width: 12px; height: 12px; color: var(--green); }

/* Feature visual panel */
.feat-visual {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); position: relative;
}
.feat-visual-inner {
  padding: 32px; min-height: 340px;
  background: #FAFAF9;
  display: flex; flex-direction: column; gap: 14px;
}
/* Top bar for feature panels */
.feat-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.feat-bar-title { font-size: 13px; font-weight: 600; color: var(--ink-60); }

/* UAE arabesque arch accent at top of feature panels */
.feat-visual::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--blue));
}

/* ── SERVICES GRID ───────────────────────────────────────────── */
.services-section { background: #fff; }
.services-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden; margin-top: 60px;
  background: var(--border);
}
.svc-card {
  background: #fff; padding: 36px 30px;
  transition: var(--t); position: relative; overflow: hidden;
}
.svc-card:hover { background: var(--cream); }
.svc-card:hover .svc-ico-wrap { background: var(--blue); }
.svc-card:hover .svc-ico-wrap svg { color: #fff; }
.svc-n { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--ink-40); text-transform: uppercase; margin-bottom: 20px; }
.svc-ico-wrap {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--cream); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; transition: var(--t);
}
.svc-ico-wrap svg { width: 30px; height: 30px; color: var(--ink); transition: var(--t); }
.svc-name { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -.2px; }
.svc-desc { font-size: 14px; color: var(--ink-60); line-height: 1.7; margin-bottom: 20px; }
.svc-lnk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 700; color: var(--blue); transition: gap .2s;
}
.svc-lnk:hover { gap: 9px; }
.svc-lnk svg { width: 14px; height: 14px; }

/* ── INDUSTRIES ──────────────────────────────────────────────── */
.industries-section { background: var(--cream); }
.ind-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 56px; }
.ind-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden; transition: var(--t);
}
.ind-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ind-top {
  height: 160px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ind-top-health  { background: linear-gradient(145deg,#EBF5F5,#D4ECEC); }
.ind-top-realty  { background: linear-gradient(145deg,#EBEEf8,#D8DEEF); }
.ind-top-consult { background: linear-gradient(145deg,#FAF3E7,#F0E6CC); }

/* Building silhouette inside each industry card */
.ind-building { position: absolute; bottom: 0; left: 0; right: 0; opacity: .18; }
.ind-building svg { width: 100%; height: 100%; }
.ind-icon-big { font-size: 0; position: relative; z-index: 2; }
.ind-icon-big svg { width: 56px; height: 56px; }
.ind-icon-blue   { color: var(--blue); }
.ind-icon-purple { color: var(--purple); }
.ind-icon-gold   { color: var(--gold); }

.ind-body { padding: 22px 24px; }
.ind-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--blue);
  margin-bottom: 10px;
}
.ind-name { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; line-height: 1.3; margin-bottom: 8px; }
.ind-desc { font-size: 14px; color: var(--ink-60); line-height: 1.65; }
.ind-foot {
  padding: 14px 24px; border-top: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
}
.ind-lnk {
  font-size: 14px; font-weight: 700; color: var(--blue);
  display: flex; align-items: center; gap: 4px; transition: gap .2s;
}
.ind-lnk:hover { gap: 8px; }
.ind-lnk svg { width: 14px; height: 14px; }

/* ── STATS — dark blue section (only dark one, like lindy) ────── */
.stats-section {
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
}
/* Dubai skyline ghost in stats dark section */
.stats-skyline {
  position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
  opacity: .05; color: #fff; pointer-events: none;
}
.stats-skyline svg { width: 100%; height: 100%; }
/* Islamic star watermark */
.stats-star {
  position: absolute; right: -80px; top: 50%; transform: translateY(-50%);
  width: 420px; height: 420px; opacity: .04; color: var(--gold); pointer-events: none;
}
.stats-star svg { width: 100%; height: 100%; }

.stats-section .section-eyebrow { color: rgba(255,255,255,.5); }
.stats-section .section-eyebrow::before { background: rgba(255,255,255,.4); }
.stats-section h2 { color: #fff; margin-bottom: 4px; }
.stats-section > .container > p { color: rgba(255,255,255,.5); max-width: 480px; margin: 12px auto 0; }

.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; margin-top: 64px;
  background: rgba(255,255,255,.08);
}
.stat-box {
  padding: 48px 32px; text-align: center;
  background: var(--ink); transition: background .25s;
  position: relative;
}
.stat-box:hover { background: rgba(255,255,255,.03); }
.stat-box::after {
  content: ''; position: absolute; bottom: 0; left: 32px; right: 32px;
  height: 2px; background: var(--blue); transform: scaleX(0);
  transition: transform .4s var(--ease);
}
.stat-box:hover::after { transform: scaleX(1); }
.stat-num {
  font-size: 58px; font-weight: 800; letter-spacing: -3px; line-height: 1;
  color: #fff; display: block;
}
.stat-unit { font-size: 30px; }
.stat-lbl  { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.45); margin-top: 10px; }
.stat-note { font-size: 12px; color: rgba(255,255,255,.22); margin-top: 4px; }

/* ── TESTIMONIALS ────────────────────────────────────────────── */
.testi-section { background: #fff; }
.testi-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 56px; }
.testi-card {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 32px; transition: var(--t); position: relative;
}
.testi-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* Islamic arch micro-accent */
.testi-card::after {
  content: '';
  position: absolute; top: 0; right: 0; width: 60px; height: 60px;
  background: radial-gradient(circle at top right, var(--blue-pale), transparent 70%);
  pointer-events: none; border-radius: 0 var(--radius-xl) 0 0;
}
.testi-stars { display: flex; gap: 2px; margin-bottom: 16px; }
.testi-stars svg { width: 16px; height: 16px; color: var(--gold); }
.testi-q {
  font-size: 17px; font-weight: 500; color: var(--ink-80);
  line-height: 1.75; margin-bottom: 24px;
}
.testi-q::before { content: '"'; color: var(--blue); font-size: 28px; line-height: 0; vertical-align: -12px; margin-right: 3px; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.t-av {
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.av-b { background: linear-gradient(135deg,#5B2A86,#9B4DC0); }
.av-p { background: linear-gradient(135deg,#3D1A5E,#7E3D9E); }
.av-g { background: linear-gradient(135deg,#7E3D9E,#C9A227); }
.av-t { background: linear-gradient(135deg,#5B2A86,#C9A227); }
.t-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.t-role { font-size: 13px; color: var(--ink-40); margin-top: 2px; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-section { background: var(--cream); }
.faq-list { max-width: 660px; margin: 56px auto 0; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; transition: border-color .25s; }
.faq-item.open { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; width: 100%; background: none; border: none;
  text-align: left; gap: 16px;
}
.faq-q:hover { background: rgba(30,11,51,.02); }
.faq-qt { font-size: 16px; font-weight: 600; color: var(--ink); flex: 1; }
.faq-ic {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--ink-40); flex-shrink: 0; transition: var(--t);
  line-height: 1;
}
.faq-item.open .faq-ic { background: var(--blue); border-color: var(--blue); color: #fff; transform: rotate(45deg); }
.faq-ans { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-ans-in { padding: 0 22px 20px; font-size: 15px; color: var(--ink-60); line-height: 1.8; }
.faq-item.open .faq-ans { max-height: 300px; }

/* ── CTA SECTION ─────────────────────────────────────────────── */
.cta-section { background: #fff; padding: 80px 0 112px; }
.cta-wrap {
  background: var(--ink); border-radius: var(--radius-xl);
  padding: 96px 48px; text-align: center; position: relative; overflow: hidden;
}
/* Dubai skyline ghost in CTA */
.cta-sky {
  position: absolute; bottom: 0; left: 0; right: 0; height: 55%;
  opacity: .05; color: #fff; pointer-events: none;
}
.cta-sky svg { width: 100%; height: 100%; }
/* Islamic star watermark left */
.cta-star {
  position: absolute; left: -80px; top: 50%; transform: translateY(-50%);
  width: 360px; height: 360px; opacity: .05; color: var(--gold); pointer-events: none;
}
.cta-star svg { width: 100%; height: 100%; }

.cta-eyebrow { color: rgba(255,255,255,.45); }
.cta-eyebrow::before { background: rgba(255,255,255,.35); }
.cta-wrap h2 { color: #fff; font-size: 52px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.1; margin: 12px 0 18px; position: relative; z-index: 1; }
.cta-wrap > p { font-size: 18px; color: rgba(255,255,255,.5); max-width: 480px; margin: 0 auto 36px; position: relative; z-index: 1; }
.cta-btns { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-fine { font-size: 13px; color: rgba(255,255,255,.25); margin-top: 18px; position: relative; z-index: 1; }

/* ── SECTION EYEBROW ─────────────────────────────────────────── */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--blue);
  letter-spacing: .3px; margin-bottom: 14px;
}
.section-eyebrow::before {
  content: ''; display: block; width: 18px; height: 2px;
  background: var(--blue); border-radius: 2px;
}
.section-title {
  font-size: 48px; font-weight: 700; letter-spacing: -.96px;
  color: var(--ink); line-height: 1.1; margin-bottom: 12px;
}
.section-sub {
  font-size: 18px; font-weight: 500; color: var(--ink-60); line-height: 1.7;
  max-width: 560px;
}
.text-center .section-sub { margin: 0 auto; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer {
  background: var(--cream); border-top: 1px solid var(--border);
  padding: 72px 0 40px;
}
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 56px; margin-bottom: 56px; }
.foot-logo img { height: 34px; margin-bottom: 14px; }
.foot-about { font-size: 14px; color: var(--ink-60); line-height: 1.75; max-width: 240px; }
.foot-social { display: flex; gap: 8px; margin-top: 18px; }
.soc-btn {
  width: 36px; height: 36px; border-radius: 9px;
  background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-60); transition: var(--t);
}
.soc-btn svg { width: 15px; height: 15px; }
.soc-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.foot-col-h { font-size: 12px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.foot-links { display: flex; flex-direction: column; gap: 9px; }
.foot-links a { font-size: 14px; color: var(--ink-60); transition: color .2s; }
.foot-links a:hover { color: var(--blue); }
.foot-contact-list { display: flex; flex-direction: column; gap: 10px; }
.foot-contact-list li { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; color: var(--ink-60); }
.foot-contact-list a { color: var(--ink-60); transition: color .2s; }
.foot-contact-list a:hover { color: var(--blue); }
.fci { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--blue); }
.nl-form { display: flex; gap: 6px; margin-top: 12px; }
.nl-input {
  flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; font-size: 13px;
  font-family: 'Manrope',sans-serif; color: var(--ink); outline: none;
}
.nl-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }
.nl-input::placeholder { color: var(--ink-40); }
.nl-btn {
  background: var(--ink); color: #fff; border: none; border-radius: 10px;
  padding: 10px 16px; font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--t);
}
.nl-btn:hover { background: var(--blue); }
.foot-bottom {
  border-top: 1px solid var(--border); padding-top: 26px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.foot-copy { font-size: 13px; color: var(--ink-40); }
.foot-legal { display: flex; gap: 18px; }
.foot-legal a { font-size: 13px; color: var(--ink-40); transition: color .2s; }
.foot-legal a:hover { color: var(--ink-60); }

/* ── BLOG/ARCHIVE ────────────────────────────────────────────── */
.archive-main,.single-main,.page-main { padding: 110px 0 80px; background: var(--cream); }
.archive-h { font-size: 40px; font-weight: 700; letter-spacing: -.8px; color: var(--ink); margin-bottom: 48px; }
.posts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.post-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; transition: var(--t); }
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.post-thumb { width: 100%; height: 200px; object-fit: cover; }
.post-body { padding: 22px; }
.post-tag { font-size: 11px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 9px; }
.post-title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.4; margin-bottom: 8px; }
.post-title a { color: inherit; } .post-title a:hover { color: var(--blue); }
.post-excerpt { font-size: 14px; color: var(--ink-60); line-height: 1.65; margin-bottom: 14px; }
.post-meta { display: flex; align-items: center; justify-content: space-between; }
.post-date { font-size: 12px; color: var(--ink-40); }
.post-more { font-size: 13px; font-weight: 700; color: var(--blue); }

/* ── 404 ─────────────────────────────────────────────────────── */
.error-404 { padding: 140px 0; background: var(--cream); text-align: center; }
.error-num { font-size: 120px; font-weight: 800; color: var(--blue); opacity: .15; line-height: 1; letter-spacing: -6px; }

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-40); }
::selection { background: var(--blue-pale); color: var(--ink); }

/* ── RTL (Arabic mode) ───────────────────────────────────────── */
.is-rtl { direction: rtl; font-family: 'Cairo','Manrope',sans-serif; }
.is-rtl .nav-wrap    { direction: rtl; }
.is-rtl .nav-links   { left: auto; right: 50%; transform: translateX(50%); }
.is-rtl .hero-inner  { direction: rtl; }
.is-rtl .feat-row    { direction: rtl; }
.is-rtl .feat-row.flip .feat-text   { order: 1; }
.is-rtl .feat-row.flip .feat-visual { order: 2; }
.is-rtl .section-eyebrow, .is-rtl .feat-eyebrow { flex-direction: row-reverse; }
.is-rtl .feat-bullet { flex-direction: row-reverse; }
.is-rtl .svc-card    { text-align: right; }
.is-rtl .faq-q       { flex-direction: row-reverse; text-align: right; }
.is-rtl .testi-author { flex-direction: row-reverse; }
.is-rtl .foot-grid   { direction: rtl; }
.is-rtl .foot-bottom { flex-direction: row-reverse; }
.is-rtl .section-title,.is-rtl .section-sub,.is-rtl h2,.is-rtl h3 { text-align: right; }
.is-rtl .hero-h1,.is-rtl .hero-sub { text-align: right; }
.is-rtl .hero-inner { text-align: right; }
.is-rtl .hero-ctas,.is-rtl .hero-trust,.is-rtl .hero-proof { justify-content: flex-end; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:1024px) {
  h1 { font-size: 54px; }
  .section-title { font-size: 38px; }
  .feat-row { grid-template-columns: 1fr; gap: 40px; }
  .feat-row.flip .feat-text,.feat-row.flip .feat-visual { order: unset; }
  .screen-grid { grid-template-columns: 1fr; }
  .screen-sidebar { display: none; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .ind-grid { grid-template-columns: repeat(2,1fr); }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .testi-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width:768px) {
  h1 { font-size: 40px; letter-spacing: -.8px; }
  h2,.section-title { font-size: 30px; letter-spacing: -.4px; }
  h3,.feat-h3 { font-size: 24px; }
  .section { padding: 72px 0; }
  .nav-links,.nav-login { display: none; }
  .nav-ham { display: flex; }
  .services-grid { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .cta-wrap { padding: 52px 24px; }
  .cta-wrap h2 { font-size: 34px; }
  .hero-h1 { font-size: 42px; }
  .posts-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .hero-screen { display: none; }
}
@media (max-width:480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn { justify-content: center; }
}

/* ═══ WhatsApp AI button + floating ═══════════════════════════ */
.nav-wa{display:inline-flex;align-items:center;gap:7px;background:#1FA855;color:#fff;padding:9px 16px;border-radius:100px;font-size:14px;font-weight:600;transition:var(--t);box-shadow:0 2px 10px rgba(31,168,85,.3)}
.nav-wa:hover{background:#178c46;transform:translateY(-1px);box-shadow:0 5px 16px rgba(31,168,85,.4)}
.nav-wa svg{width:17px;height:17px;flex-shrink:0}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:900;width:58px;height:58px;border-radius:50%;background:#1FA855;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(31,168,85,.45);transition:var(--t);animation:waPulse 2.6s infinite}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;color:#fff}
@keyframes waPulse{0%,100%{box-shadow:0 8px 28px rgba(31,168,85,.45)}50%{box-shadow:0 8px 28px rgba(31,168,85,.45),0 0 0 12px rgba(31,168,85,0)}}
.trend{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-right:1px}

/* ═══ Blog section ════════════════════════════════════════════ */
.blog-section{background:#fff}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.bcard{background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;transition:var(--t);display:flex;flex-direction:column}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.bthumb{height:180px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bthumb svg{width:64px;height:64px;color:#fff;opacity:.9;position:relative;z-index:2}
.bthumb-1{background:linear-gradient(135deg,#5B2A86,#9B4DC0)}
.bthumb-2{background:linear-gradient(135deg,#3D1A5E,#7E3D9E)}
.bthumb-3{background:linear-gradient(135deg,#7E3D9E,#C9A227)}
.bthumb::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 80% 20%,rgba(255,255,255,.18),transparent 60%)}
.bbody{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.btag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.btag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue)}
.btitle{font-size:18px;font-weight:700;color:var(--ink);line-height:1.35;letter-spacing:-.3px;margin-bottom:8px}
.btitle a{color:inherit}.btitle a:hover{color:var(--blue)}
.bexc{font-size:14px;color:var(--ink-60);line-height:1.6;margin-bottom:18px;flex:1}
.bmeta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border-light);padding-top:14px}
.bdate{font-size:12px;color:var(--ink-40);font-weight:500}
.bread{font-size:13px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:5px}
.bread svg{width:14px;height:14px}

/* ═══ Testimonial owner photo ═════════════════════════════════ */
.t-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--white);box-shadow:0 2px 8px rgba(30,11,51,.15)}

/* ═══ Responsive for new components ═══════════════════════════ */
@media (max-width:1024px){ .blog-grid{grid-template-columns:1fr 1fr} }
@media (max-width:768px){ .blog-grid{grid-template-columns:1fr} .nav-wa span{display:none} .nav-wa{padding:9px 11px} }
.is-rtl .wa-float{right:auto;left:22px}
.is-rtl .btag{flex-direction:row-reverse}
.is-rtl .bread{flex-direction:row-reverse}

/* ═══ RTL (Arabic) — applies on JS toggle (dir=rtl) and AR locale ═══ */
[dir="rtl"] body{font-family:'Cairo','Manrope',sans-serif}
[dir="rtl"] .nav-links{left:auto;right:50%;transform:translateX(50%)}
[dir="rtl"] .svc-card{text-align:right}
[dir="rtl"] .bbody,[dir="rtl"] .btitle,[dir="rtl"] .bexc{text-align:right}
[dir="rtl"] .footer-links,[dir="rtl"] .foot-about,[dir="rtl"] .footer-contact-list{text-align:right}
[dir="rtl"] .faq-qt{text-align:right}
[dir="rtl"] .testi-q,[dir="rtl"] .t-name,[dir="rtl"] .t-role{text-align:right}
[dir="rtl"] .testi-q::before{margin-right:0;margin-left:3px}
[dir="rtl"] .wa-float{right:auto;left:22px}
[dir="rtl"] .feat-row{direction:rtl}
[dir="rtl"] .feat-text,[dir="rtl"] .feat-h3,[dir="rtl"] .feat-p{text-align:right}
/* Flip directional arrows to point left in RTL (not play/check icons) */
[dir="rtl"] .btn-blue svg,[dir="rtl"] .btn-ink svg,[dir="rtl"] .svc-lnk svg,[dir="rtl"] .bread svg,[dir="rtl"] .ind-lnk svg{transform:scaleX(-1)}