/* ==========================================================
   AFLUIX — Stylesheet
   Uses CSS logical properties (inline-start/end) so the layout
   flips correctly for Arabic (RTL) without duplicate rules.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg: #070B14;
  --bg-soft: #0B1120;
  --surface: rgba(255,255,255,0.035);
  --surface-solid: #101A2C;
  --glass: rgba(255,255,255,0.045);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text: #EDF1F7;
  --text-muted: #8D96AC;
  --text-faint: #5C6479;
  --teal: #2FD5C8;
  --blue: #4C8DFF;
  --gold: #EFC066;
  --whatsapp: #25D366;
  --radius: 16px;
  --maxw: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 900px 500px at 12% -8%, rgba(47,213,200,0.09), transparent 60%),
    radial-gradient(ellipse 800px 600px at 100% 8%, rgba(239,192,102,0.06), transparent 55%);
  background-repeat: no-repeat;
  overflow-x: hidden;
}
h1,h2,h3,h4{ font-family:'Space Grotesk','Inter',sans-serif; margin:0 0 .4em; font-weight:600; letter-spacing:-.01em; }
p{ margin:0 0 1em; color: var(--text-muted); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
section{ padding: 96px 24px; }
.wrap{ max-width: var(--maxw); margin:0 auto; }
::selection{ background: var(--teal); color:#04110F; }
button{ font-family:inherit; }

/* language-based text direction */
[dir="rtl"] body, body[dir="rtl"]{ direction: rtl; }
[dir="rtl"] .process-step .n{ inset-inline-start:0; inset-inline-end:auto; }

/* ---------- reveal-on-scroll (single orchestrated effect) ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- NAV ---------- */
header{ position: sticky; top:0; z-index:60; background: rgba(7,11,20,0.78); backdrop-filter: blur(10px); border-block-end:1px solid var(--border); }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:34px; width:auto; }
.brand span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; background: linear-gradient(90deg,var(--teal),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-links{ display:flex; gap:26px; align-items:center; }
.nav-links a.nav-link{ color: var(--text-muted); font-size:.92rem; transition: color .2s; }
.nav-links a.nav-link:hover{ color: var(--text); }
.nav-cta{ background: linear-gradient(90deg,var(--whatsapp),#1EBE5A); color:#05170D; padding:9px 18px; border-radius:999px; font-weight:600; font-size:.86rem; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.lang-switch{ display:flex; gap:4px; background: var(--glass); border:1px solid var(--border); border-radius:999px; padding:3px; }
.lang-btn{ background:none; border:none; color: var(--text-faint); font-size:.8rem; font-weight:600; padding:6px 11px; border-radius:999px; cursor:pointer; transition: all .2s; }
.lang-btn.active{ background: linear-gradient(90deg,var(--teal),var(--blue)); color:#04141F; }
.menu-toggle{ display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; padding:4px; }

@media (max-width: 860px){
  .nav-links{ position:absolute; inset-inline:0; top:100%; background: var(--bg-soft); border-block-end:1px solid var(--border);
    flex-direction:column; align-items:stretch; gap:0; max-height:0; overflow:hidden; transition: max-height .3s var(--ease); }
  .nav-links.open{ max-height: 420px; }
  .nav-links a.nav-link, .nav-links .nav-cta{ width:100%; padding:14px 24px; border-block-end:1px solid var(--border); border-radius:0; text-align:start; }
  .nav-links .lang-switch{ margin: 14px 24px; align-self:flex-start; }
  .menu-toggle{ display:block; }
}

/* ---------- HERO ---------- */
.hero{ padding: 96px 24px 56px; display:grid; grid-template-columns: 1.15fr .85fr; gap:56px; align-items:center; max-width: var(--maxw); margin:0 auto; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; color: var(--teal); font-size:.85rem; font-weight:600; margin-block-end:20px; }
.eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--teal); box-shadow:0 0 10px var(--teal); }
.hero h1{ font-size: clamp(2rem,4vw,3.15rem); line-height:1.14; max-width:16ch; }
.hero p.lead{ font-size:1.06rem; max-width:48ch; }
.hero-ctas{ display:flex; gap:14px; margin-block-start:26px; flex-wrap:wrap; }
.btn{ padding:13px 24px; border-radius:12px; font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: linear-gradient(90deg,var(--whatsapp),#1EBE5A); color:#05170D; box-shadow:0 8px 24px rgba(37,211,102,.25); }
.btn-secondary{ background: var(--glass); color: var(--text); border:1px solid var(--border-strong); }
.btn-secondary:hover{ border-color: var(--teal); }
.hero-stats{ display:flex; gap:28px; margin-block-start:38px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.5rem; }
.hero-stat span{ font-size:.82rem; color: var(--text-faint); }
.hero-visual{ position:relative; aspect-ratio:1/1; max-width:420px; margin:0 auto; }
.hero-visual svg{ width:100%; height:100%; }
@media (max-width: 900px){ .hero{ grid-template-columns:1fr; padding-block-start:56px; } .hero-visual{ order:-1; max-width:240px; } }

/* ---------- SECTION HEADS ---------- */
.section-head{ max-width:640px; margin-block-end:48px; }
.section-head h2{ font-size: clamp(1.55rem,3vw,2.15rem); }
.section-tag{ color: var(--gold); font-size:.85rem; font-weight:600; margin-block-end:10px; display:block; }
.section-alt{ background: var(--bg-soft); border-block:1px solid var(--border); }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.about-grid p{ font-size:1.02rem; }
.about-point{ display:flex; gap:14px; padding-block:16px; border-block-start:1px solid var(--border); }
.about-point:first-child{ border-block-start:none; padding-block-start:0; }
.about-point .num{ font-family:'Space Grotesk',sans-serif; color: var(--teal); font-weight:600; flex-shrink:0; }
.about-point h4{ margin-block-end:4px; font-size:1rem; }
.about-point p{ margin:0; font-size:.92rem; }
@media (max-width: 800px){ .about-grid{ grid-template-columns:1fr; } }

/* ---------- GLASS CARD BASE ---------- */
.glass-card{ background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); border:1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(6px); transition: border-color .25s var(--ease), transform .25s var(--ease); }
.glass-card:hover{ border-color: var(--border-strong); transform: translateY(-3px); }

/* ---------- SERVICES ---------- */
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.service-card{ padding:26px 24px; }
.service-card h3{ font-size:1.03rem; }
.service-card p{ font-size:.92rem; margin-bottom:0; }
.service-icon{ width:40px; height:40px; border-radius:10px; margin-block-end:16px; background: linear-gradient(135deg, rgba(47,213,200,.18), rgba(76,141,255,.14)); display:flex; align-items:center; justify-content:center; color: var(--teal); }
@media (max-width: 900px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .services-grid{ grid-template-columns:1fr; } }

/* ---------- RESULTS ---------- */
.results-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.case-card{ padding:26px 24px 22px; display:flex; flex-direction:column; gap:16px; }
.case-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.case-badge{ font-size:.7rem; font-weight:600; color: var(--gold); background: rgba(239,192,102,.1); border:1px solid rgba(239,192,102,.25); padding:2px 9px; border-radius:999px; }
.case-industry{ font-size:.8rem; color: var(--text-muted); }
.case-platform{ font-size:.72rem; padding:3px 10px; border-radius:999px; background: rgba(76,141,255,.12); color: var(--blue); border:1px solid rgba(76,141,255,.25); }
.case-name{ font-size:1.06rem; font-weight:600; }
.case-metric{ font-family:'Space Grotesk',sans-serif; font-size:2.05rem; font-weight:700; background: linear-gradient(90deg,var(--gold),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.case-metric-label{ font-size:.8rem; color: var(--text-faint); margin-block-start:4px; }
.case-sub{ display:flex; gap:20px; padding-block-start:14px; border-block-start:1px solid var(--border); flex-wrap:wrap; }
.case-sub div b{ display:block; font-size:.96rem; }
.case-sub div span{ font-size:.75rem; color: var(--text-faint); }
@media (max-width: 900px){ .results-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .results-grid{ grid-template-columns:1fr; } }

/* ---------- SCREENSHOTS + LIGHTBOX ---------- */
.shots-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.shot-card{ overflow:hidden; cursor: zoom-in; position:relative; }
.shot-card img{ width:100%; height:250px; object-fit:cover; object-position: top; transition: transform .4s var(--ease); }
.shot-card:hover img{ transform: scale(1.04); }
.shot-caption{ padding:14px 16px; }
.shot-caption b{ font-size:.87rem; display:block; }
.shot-caption span{ font-size:.75rem; color: var(--text-faint); }
@media (max-width: 980px){ .shots-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .shots-grid{ grid-template-columns:1fr; } .shot-card img{ height:auto; } }

.lightbox-overlay{ position:fixed; inset:0; background: rgba(4,6,12,.92); backdrop-filter: blur(6px); z-index:200; display:none; align-items:center; justify-content:center; padding: 40px 20px; opacity:0; transition: opacity .25s var(--ease); }
.lightbox-overlay.show{ display:flex; opacity:1; }
.lightbox-inner{ max-width: 720px; width:100%; transform: scale(.96); transition: transform .25s var(--ease); }
.lightbox-overlay.show .lightbox-inner{ transform: scale(1); }
.lightbox-inner img{ width:100%; border-radius: var(--radius); border:1px solid var(--border-strong); }
.lightbox-cap{ text-align:center; margin-block-start:14px; color: var(--text-muted); font-size:.9rem; }
.lightbox-close{ position:absolute; top:22px; inset-inline-end:26px; background: var(--glass); border:1px solid var(--border-strong); color: var(--text); width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1.1rem; }

/* ---------- PROCESS ---------- */
.process-row{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; }
.process-step{ position:relative; padding-block-start:36px; }
.process-step .n{ font-family:'Space Grotesk',sans-serif; font-size:.78rem; color: var(--bg); background: linear-gradient(135deg,var(--teal),var(--blue)); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:absolute; top:0; inset-inline-start:0; font-weight:700; }
.process-step h4{ font-size:1rem; margin-block-start:2px; }
.process-step p{ font-size:.86rem; margin-bottom:0; }
@media (max-width: 900px){ .process-row{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .process-row{ grid-template-columns:1fr; } }

/* ---------- WHY ---------- */
.why-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; }
.why-card{ padding:22px 18px; text-align:start; }
.why-card h4{ font-size:.98rem; }
.why-card p{ font-size:.85rem; margin-bottom:0; }
@media (max-width: 900px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- CTA ---------- */
.cta-section{ background: linear-gradient(135deg, rgba(47,213,200,.1), rgba(239,192,102,.08)); border-block:1px solid var(--border); text-align:center; }
.cta-section h2{ font-size: clamp(1.6rem,3.2vw,2.4rem); max-width:20ch; margin-inline:auto; margin-block-end:14px; }
.cta-section .btn{ margin-inline:auto; }

/* ---------- CONTACT ---------- */
.contact-card{ padding: 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.contact-card h3{ font-size:1.5rem; margin-block-end:6px; }
.contact-card .subtitle{ color: var(--text-muted); margin-block-end:4px; }
.contact-card .note{ font-size:.86rem; color: var(--text-faint); margin:0; }

/* ---------- FOOTER ---------- */
footer{ padding: 48px 24px 32px; }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; padding-block-end:24px; border-block-end:1px solid var(--border); }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand img{ height:30px; }
.footer-note{ font-size:.82rem; color: var(--text-faint); max-width:320px; margin-block-start:10px; }
.footer-bottom{ display:flex; justify-content:space-between; padding-block-start:20px; font-size:.78rem; color: var(--text-faint); flex-wrap:wrap; gap:10px; }