/* ============================================================
   DIGITAL FLEXING — shared stylesheet
   Edit the tokens in :root below to re-theme the entire site.
   ============================================================ */

:root{
  /* ---- BRAND: from the Digital Flexing identity study ----
     #5D35B5 is the brand violet. It is strong as a button fill
     but too dark for small text on a dark background, so a
     lighter violet is used for accent text and the deep tone
     for depth. All combinations below meet WCAG AA. */
  --bg: #15131B;          /* identity dark ("reverse") */
  --bg-soft: #1A1822;
  --surface: #201D2A;
  --surface-2: #272332;
  --line: rgba(251,250,248,0.10);
  --line-strong: rgba(251,250,248,0.18);

  --brand: #5D35B5;       /* primary brand violet, button fills */
  --brand-deep: #3F2280;  /* identity deep violet */
  --brand-lift: #7C4DDB;  /* gradient top end */
  --purple: #A78BFA;      /* accent text on dark, AA at 6.76:1 */
  --purple-dim: #5D35B5;
  --green: #34D399;       /* kept for success states and WhatsApp only */
  --green-dim: #17795A;

  --text: #FBFAF8;        /* identity off-white */
  --text-muted: #A8A4AC;
  --text-faint: #7A757F;

  --display: 'Big Shoulders Display', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--body); line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; }
::selection{ background: var(--purple); color: #FFFFFF; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.texture{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(124,77,219,0.07) 0, rgba(124,77,219,0.07) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(-45deg, rgba(124,77,219,0.04) 0, rgba(124,77,219,0.04) 1px, transparent 1px, transparent 46px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 0%, transparent 75%);
}

.wrap{ max-width: var(--container); margin:0 auto; padding: 0 24px; position:relative; z-index:1; }
section{ position:relative; z-index:1; }

h1,h2,h3{ font-family: var(--display); font-weight:800; letter-spacing:-0.01em; margin:0; }
.eyebrow{
  font-family: var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--purple); display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{ content:''; width:20px; height:1px; background: var(--purple); display:block; }
.chapter-tag{ font-family:var(--mono); font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.12em; margin-bottom:10px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: 999px; font-weight:600; font-size:15px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  font-family: var(--body);
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--purple); color:#FFFFFF; }
.btn-primary:hover{ box-shadow: 0 10px 30px -8px rgba(124,77,219,0.6); transform: translateY(-1px); }
.btn-ghost{ background:transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover{ border-color: var(--green); color: var(--green); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }

/* ---------- nav ---------- */
header{
  position: sticky; top:0; z-index: 50;
  background: rgba(21,19,27,0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 16px 24px; }
.logo{ font-family: var(--display); font-weight:900; font-size:22px; letter-spacing:-0.01em; display:flex; align-items:center; gap:8px; text-decoration:none; }

.logo-img{ height:42px; width:auto; display:block; }
.footer-logo-img{ height:74px; width:auto; display:block; margin-bottom:10px; }
@media (max-width: 600px){ .logo-img{ height:34px; } }
.nav-links{ display:flex; align-items:center; gap:28px; font-size:14px; color: var(--text-muted); }
.nav-links a{ text-decoration:none; transition:color .15s ease; }
.nav-links a:hover{ color: var(--text); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:none; color:var(--text); font-size:26px; cursor:pointer; padding:4px 8px; }

@media (max-width: 900px){
  .nav-links{
    position:fixed; inset: 64px 0 auto 0; background: var(--bg-soft);
    flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--line);
    padding: 8px 24px 20px; transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-links.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding: 12px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:block; }
  .nav-cta .btn-ghost{ display:none; }
}

/* ---------- hero ---------- */
.hero{ padding: 96px 0 66px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items:center; }
.hero h1{ font-size: clamp(36px, 5.2vw, 62px); line-height:0.98; }
.hero h1 em{ font-style:normal; color: var(--purple); }
.hero p.lead{ margin-top:22px; max-width:50ch; color: var(--text-muted); font-size:17px; }
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-services-note{ margin-top:26px; font-size:13.5px; color:var(--text-faint); }
.hero-services-note b{ color: var(--text-muted); font-weight:500; }

.chart-card{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius: var(--radius); padding:26px 22px 18px;
}
.chart-card .chart-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; gap:10px; flex-wrap:wrap; }
.chart-card .chart-head span{ font-family: var(--mono); font-size:11px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.08em; }
#flexPath{ stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: stroke-dashoffset 2s cubic-bezier(.16,.84,.44,1); }
.in-view #flexPath{ stroke-dashoffset: 0; }
.chart-labels{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-top:4px; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:52px; }
}

/* ---------- markets ---------- */
.markets{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 30px 0; }
.markets .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap: 14px 34px; justify-content:space-between; }
.markets-label{ font-family:var(--mono); font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
.market-list{ display:flex; flex-wrap:wrap; gap: 10px; }
.market-pill{
  display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  border:1px solid var(--line-strong); font-size:14px; font-weight:500; color:var(--text-muted);
}

/* ---------- section heads ---------- */
.section{ padding: 90px 0; }
.section-head{ max-width: 660px; margin-bottom: 52px; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 40px); }
.section-head p{ color:var(--text-muted); margin-top:14px; font-size:16px; }

/* ---------- story teaser (home page) ---------- */
.story-teaser{
  background: linear-gradient(135deg, rgba(124,77,219,0.12), rgba(52,211,153,0.07));
  border:1px solid var(--line-strong); border-radius: var(--radius);
  padding: 44px 40px; display:grid; grid-template-columns: 1fr auto; gap:32px; align-items:center;
}
.story-teaser h2{ font-size: clamp(24px,3vw,34px); margin-bottom:12px; }
.story-teaser p{ color: var(--text-muted); margin:0; max-width:58ch; font-size:15.5px; }
@media (max-width: 820px){
  .story-teaser{ grid-template-columns:1fr; padding: 34px 26px; }
}

/* ---------- services ---------- */
.services{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.service-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; transition: border-color .2s ease, transform .2s ease;
}
.service-card:hover{ transform: translateY(-4px); border-color: var(--line-strong); }
.service-icon{
  width:56px; height:56px; display:block; margin-bottom:18px;
  transition: transform .25s cubic-bezier(.16,.84,.44,1);
}
.service-card:hover .service-icon{ transform: scale(1.07); }
.service-card .num{ font-family:var(--mono); font-size:12px; color: var(--purple); margin-bottom:10px; }
.service-card h3{ font-family:var(--body); font-weight:700; font-size:19px; margin-bottom:10px; letter-spacing:0; }
.service-card p.desc{ color:var(--text-muted); font-size:14px; margin:0; }
.service-card.highlight{ border-color: var(--purple-dim); background: linear-gradient(180deg, rgba(124,77,219,0.10), var(--surface) 60%); }
.service-card.highlight .num{ color: var(--green); }

@media (max-width: 900px){ .services{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .services{ grid-template-columns: 1fr; } }

/* ---------- process ---------- */
.process-list{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.process-item{ padding: 28px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.process-item:last-child{ border-right:none; }
.process-num{ font-family:var(--mono); font-size:13px; color: var(--purple); margin-bottom:14px; }
.process-item h4{ font-family:var(--body); font-weight:600; font-size:17px; margin:0 0 8px; }
.process-item p{ font-size:13.5px; color:var(--text-muted); margin:0; }
.process-item .when{ display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--text-faint); }

@media (max-width: 860px){
  .process-list{ grid-template-columns:1fr 1fr; }
  .process-item{ border-right:1px solid var(--line); }
  .process-item:nth-child(2n){ border-right:none; }
}
@media (max-width: 520px){
  .process-list{ grid-template-columns:1fr; }
  .process-item{ border-right:none !important; }
}

/* ---------- stats ---------- */
.stats{ background: var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 46px 0; }
.stats .wrap{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat-num{ font-family:var(--display); font-weight:900; font-size: clamp(26px,3.2vw,38px); color:var(--purple); line-height:1; }
.stat-label{ font-size:13px; color:var(--text-muted); margin-top:8px; }
@media (max-width: 760px){ .stats .wrap{ grid-template-columns: 1fr 1fr; } }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items:start; }
.contact-info h2{ font-size: clamp(28px,3.6vw,40px); }
.contact-info p{ color:var(--text-muted); margin-top:16px; max-width:42ch; }
.contact-detail{ margin-top:32px; display:grid; gap:16px; }
.contact-detail a{ text-decoration:none; }
.contact-detail .row{ display:flex; gap:12px; align-items:center; font-size:15px; }
.contact-detail .row span.k{ font-family:var(--mono); font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; width:64px; flex-shrink:0; }

form.card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 34px; display:grid; gap:22px;
}
.field{ display:grid; gap:8px; }
.field label{ font-size:13.5px; font-weight:600; color:var(--text); }
.field .hint, p.hint{ font-size:12px; color:var(--text-faint); margin-top:-4px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea{
  width:100%; background: var(--bg-soft); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--text); font-family: var(--body); font-size:14.5px; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea{ resize: vertical; min-height:96px; }
input:focus, select:focus, textarea:focus{ border-color: var(--green); box-shadow: 0 0 0 3px rgba(52,211,153,0.22); }
select{
  appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1L7 7L13 1' stroke='%23C3BBD8' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position: right 14px center; padding-right:36px;
}

.slider-row{ display:flex; align-items:center; gap:16px; }
input[type="range"]{
  -webkit-appearance:none; appearance:none; flex:1; height:6px; border-radius:999px;
  background: linear-gradient(90deg, var(--green-dim), var(--purple)); outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background: var(--purple); border:3px solid #15131B; box-shadow: 0 0 0 4px rgba(124,77,219,0.25); cursor:pointer;
}
input[type="range"]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background: var(--purple); border:3px solid #15131B; cursor:pointer; }
.slider-value{ font-family: var(--display); font-weight:800; font-size:26px; color: var(--purple); min-width:46px; text-align:center; }
.slider-scale{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--text-faint); margin-top:-2px; }

.form-msg{ font-size:13.5px; padding: 12px 14px; border-radius: var(--radius-sm); display:none; }
.form-msg.success{ display:block; background: rgba(52,211,153,0.16); color: var(--green); border:1px solid var(--green-dim); }
.form-msg.error{ display:block; background: rgba(231,90,79,0.14); color:#F19E96; border:1px solid rgba(231,90,79,0.4); }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:none; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding: 40px 0; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
footer .foot-logo{ font-family:var(--display); font-weight:800; font-size:18px; }
footer p{ color: var(--text-faint); font-size:13px; margin:0; }

/* ============================================================
   STORY PAGE ONLY
   ============================================================ */
.story-hero{ padding: 80px 0 50px; border-bottom:1px solid var(--line); }
.story-hero h1{ font-size: clamp(32px, 4.6vw, 56px); line-height:1.02; max-width: 17ch; }
.story-hero p.lead{ margin-top:20px; color: var(--text-muted); font-size:17px; max-width:58ch; }
.back-link{ font-family:var(--mono); font-size:12px; color: var(--text-faint); text-decoration:none; letter-spacing:.08em; text-transform:uppercase; display:inline-block; margin-bottom:22px; transition:color .15s ease; }
.back-link:hover{ color: var(--green); }

.story-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:56px; align-items:start; }
.founder-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px; position:sticky; top:100px;
}
.founder-photo{
  width:180px; height:180px; border-radius:50%; object-fit: cover; object-position: center center;
  margin-bottom:20px; border:2px solid var(--line-strong);
}
.founder-card h4{ font-family:var(--display); font-weight:800; font-size:24px; margin:0 0 4px; letter-spacing:-0.01em; }
.founder-card .role{ font-family:var(--mono); font-size:11.5px; color: var(--green); text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; }
.founder-card p{ font-size:14px; color:var(--text-muted); margin:0 0 14px; }
.founder-card .bio{ padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.founder-credentials{ display:grid; gap:10px; margin-bottom:18px; }
.founder-credentials .cred{ display:flex; gap:10px; font-size:13.5px; color:var(--text-muted); align-items:flex-start; }
.founder-credentials .cred::before{ content:'▹'; color: var(--purple); flex-shrink:0; }
.founder-credentials .cred b{ color: var(--text); font-weight:600; }
.founder-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.founder-tag{ font-size:11.5px; font-family:var(--mono); padding:5px 10px; border-radius:6px; background: rgba(255,255,255,0.05); color: var(--text-muted); border:1px solid var(--line); }

.story-copy p{ font-size:16px; color: var(--text-muted); margin: 0 0 20px; }
.story-copy p strong{ color: var(--text); font-weight:600; }
.story-copy .callout{
  border-left: 3px solid var(--green); padding: 4px 0 4px 20px; margin: 32px 0;
  font-family: var(--display); font-weight:600; font-size: clamp(20px,2.4vw,26px); color: var(--text); line-height:1.25;
}

.timeline{ display:grid; gap:0; border-top:1px solid var(--line); margin-top:10px; }
.timeline-item{ display:grid; grid-template-columns: 110px 1fr; gap:24px; padding: 24px 0; border-bottom:1px solid var(--line); }
.timeline-year{ font-family:var(--mono); font-size:13px; color: var(--purple); }
.timeline-item h4{ font-family:var(--body); font-weight:600; font-size:16px; margin:0 0 6px; }
.timeline-item p{ font-size:14px; color:var(--text-muted); margin:0; }
@media (max-width: 600px){
  .timeline-item{ grid-template-columns:1fr; gap:6px; }
}

.story-cta{
  background: linear-gradient(135deg, rgba(124,77,219,0.14), rgba(52,211,153,0.08));
  border:1px solid var(--line-strong); border-radius: var(--radius);
  padding: 44px 40px; text-align:center; margin-top: 20px;
}
.story-cta h2{ font-size: clamp(24px,3vw,34px); margin-bottom:12px; }
.story-cta p{ color: var(--text-muted); margin:0 auto 26px; max-width:52ch; }

@media (max-width: 900px){
  .story-grid{ grid-template-columns:1fr; }
  .founder-card{ position:static; }
}

/* ============================================================
   HERO VIDEO BACKGROUND
   Drop dubai-jlt.mp4 into this folder to activate. Until then
   the gradient below shows and nothing looks broken.
   ============================================================ */
.hero{ position:relative; }
.hero-video-wrap{
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 120% 90% at 70% 20%, rgba(124,77,219,0.30), transparent 60%),
              linear-gradient(160deg, #1B1236 0%, #15131B 60%);
}
.hero-video-wrap video{
  width:100%; height:100%; object-fit: cover; display:block;
  opacity:0; transition: opacity 1.2s ease;
}
.hero-video-wrap video.loaded{ opacity:0.42; }
/* Scrim keeps text readable over moving footage */
.hero-video-wrap::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(21,19,27,0.94) 0%, rgba(21,19,27,0.80) 45%, rgba(21,19,27,0.55) 100%),
    linear-gradient(180deg, rgba(21,19,27,0.55) 0%, transparent 30%, rgba(21,19,27,0.85) 100%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero-location{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
  background: rgba(255,255,255,0.07); border:1px solid var(--line-strong);
  padding:6px 13px; border-radius:999px; margin-bottom:18px;
}
.hero-location .pin{ width:6px; height:6px; border-radius:50%; background:var(--green); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ============================================================
   SERVICE CARD BACKGROUND IMAGES
   Add images to images/services/ to activate (see comments in HTML).
   ============================================================ */
.service-card{ position:relative; overflow:hidden; isolation:isolate; }
.service-bg{
  position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center;
  opacity:0; transition: opacity .35s ease, transform .5s cubic-bezier(.16,.84,.44,1);
  transform: scale(1.02);
}
.service-card.has-bg .service-bg{ opacity:0.20; }
.service-card.has-bg:hover .service-bg{ opacity:0.32; transform: scale(1.06); }
.service-card.has-bg::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(34,25,66,0.55) 0%, rgba(34,25,66,0.92) 70%);
}

/* ============================================================
   SOCIAL ICONS
   ============================================================ */
.socials{ display:flex; align-items:center; gap:10px; }
.social-btn{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); color: var(--text-muted); text-decoration:none;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.social-btn svg{ width:19px; height:19px; fill: currentColor; }
.social-btn:hover{ transform: translateY(-2px); color: var(--text); border-color: var(--purple); background: rgba(124,77,219,0.14); }
.social-btn.wa:hover{ color:#25D366; border-color:#25D366; background: rgba(37,211,102,0.14); }

/* WhatsApp CTA button in the hero */
.btn-whatsapp{ background:#25D366; color:#0B2E1A; }
.btn-whatsapp:hover{ box-shadow: 0 10px 30px -8px rgba(37,211,102,0.6); transform: translateY(-1px); }
.btn-whatsapp svg{ width:18px; height:18px; fill: currentColor; }

/* Floating WhatsApp bubble, always reachable */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:54px; height:54px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.6); transition: transform .2s ease;
}
.wa-float svg{ width:28px; height:28px; fill:#fff; }
.wa-float:hover{ transform: scale(1.08); }
@media (max-width: 600px){ .wa-float{ right:14px; bottom:14px; width:50px; height:50px; } }

footer .foot-socials{ display:flex; gap:10px; }

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switch{
  display:inline-flex; align-items:center; border:1px solid var(--line-strong);
  border-radius:999px; overflow:hidden; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
}
.lang-switch a{
  padding:7px 12px; text-decoration:none; color:var(--text-faint); transition: background .16s ease, color .16s ease;
}
.lang-switch a.active{ background: var(--purple); color:#fff; }
.lang-switch a:not(.active):hover{ color: var(--text); background: rgba(255,255,255,0.06); }

/* ============================================================
   ARABIC / RTL
   ============================================================ */
html[dir="rtl"] body{ font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4{
  font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight:700; letter-spacing:0; line-height:1.3;
}
html[dir="rtl"] .hero h1{ font-size: clamp(30px, 4.4vw, 52px); line-height:1.2; }
html[dir="rtl"] .eyebrow::before{ order:2; }
html[dir="rtl"] .eyebrow{ flex-direction: row-reverse; justify-content:flex-end; }
html[dir="rtl"] .service-card li::before{ content:'←'; }
html[dir="rtl"] .founder-credentials .cred::before{ content:'◃'; }
html[dir="rtl"] .story-copy .callout{ border-left:none; border-right:3px solid var(--green); padding: 4px 20px 4px 0; }
html[dir="rtl"] .back-link:hover{ color: var(--green); }
html[dir="rtl"] .process-item{ border-right:none; border-left:1px solid var(--line); }
html[dir="rtl"] .process-item:last-child{ border-left:none; }
html[dir="rtl"] .hero-video-wrap::after{
  background:
    linear-gradient(270deg, rgba(21,19,27,0.94) 0%, rgba(21,19,27,0.80) 45%, rgba(21,19,27,0.55) 100%),
    linear-gradient(180deg, rgba(21,19,27,0.55) 0%, transparent 30%, rgba(21,19,27,0.85) 100%);
}
html[dir="rtl"] .wa-float{ right:auto; left:20px; }
html[dir="rtl"] .contact-detail .row span.k{ width:70px; }
html[dir="rtl"] select{ background-position: left 14px center; padding-right:14px; padding-left:36px; }
html[dir="rtl"] .timeline-item{ grid-template-columns: 130px 1fr; }

/* ============================================================
   AI FEATURE CARD (AI Agent Building)
   ============================================================ */
.service-feature{
  grid-column: 1 / -1;
  background: linear-gradient(120deg, rgba(124,77,219,0.20), rgba(52,211,153,0.10) 70%, var(--surface));
  border:1px solid var(--purple-dim); border-radius: var(--radius);
  padding: 34px 32px; display:grid; grid-template-columns: 72px 1fr auto; gap:26px; align-items:center;
  position:relative; overflow:hidden;
}
.service-feature .service-icon{ width:72px; height:72px; margin:0; }
.service-feature h3{ font-family:var(--body); font-weight:700; font-size:21px; margin:0 0 8px; }
.service-feature p{ color:var(--text-muted); font-size:14.5px; margin:0; max-width:62ch; }
.service-feature .badge{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  background: var(--green); color:#08281B; padding:6px 12px; border-radius:999px; white-space:nowrap;
}
@media (max-width: 780px){
  .service-feature{ grid-template-columns: 1fr; gap:16px; text-align:start; }
  .service-feature .badge{ justify-self:start; }
}

/* ============================================================
   AI STRIP
   ============================================================ */
.ai-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 26px 0; background: rgba(124,77,219,0.05);
}
.ai-strip .wrap{ display:flex; align-items:center; gap:20px 40px; flex-wrap:wrap; justify-content:space-between; }
.ai-strip .label{ font-family:var(--mono); font-size:12px; color:var(--green); text-transform:uppercase; letter-spacing:.1em; }
.ai-strip p{ margin:0; color:var(--text-muted); font-size:14.5px; max-width:72ch; }

/* ============================================================
   PROCESS FLOW (visual, animated)
   ============================================================ */
.flow{ position:relative; padding: 20px 0 10px; }
.flow-track{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0; position:relative;
}
.flow-line{
  position:absolute; top:46px; left:12.5%; right:12.5%; height:2px;
  background: var(--line-strong); overflow:hidden; border-radius:2px;
}
.flow-line span{
  position:absolute; inset:0; width:0%;
  background: linear-gradient(90deg, var(--green), var(--purple));
  transition: width 1.6s cubic-bezier(.16,.84,.44,1);
}
.flow.in-view .flow-line span{ width:100%; }
html[dir="rtl"] .flow-line span{ background: linear-gradient(270deg, var(--green), var(--purple)); }
html[dir="rtl"] .flow-line{ direction:rtl; }
html[dir="rtl"] .flow-line span{ left:auto; right:0; }

.flow-step{ text-align:center; padding: 0 14px; position:relative; }
.flow-node{
  width:64px; height:64px; margin:14px auto 18px; border-radius:50%;
  background: var(--surface); border:2px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; position:relative; z-index:2;
  transition: border-color .4s ease, transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .4s ease;
}
.flow-node svg{ width:26px; height:26px; stroke: var(--text-muted); fill:none; stroke-width:1.8; transition: stroke .4s ease; }
.flow-num{
  position:absolute; top:-8px; inset-inline-end:-6px; width:24px; height:24px; border-radius:50%;
  background: var(--bg-soft); border:1px solid var(--line-strong); color: var(--text-faint);
  font-family:var(--mono); font-size:11px; display:flex; align-items:center; justify-content:center;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.flow.in-view .flow-step:nth-child(1) .flow-node{ transition-delay:.15s; }
.flow.in-view .flow-step:nth-child(2) .flow-node{ transition-delay:.5s; }
.flow.in-view .flow-step:nth-child(3) .flow-node{ transition-delay:.85s; }
.flow.in-view .flow-step:nth-child(4) .flow-node{ transition-delay:1.2s; }
.flow.in-view .flow-node{
  border-color: var(--purple); transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(124,77,219,0.12);
}
.flow.in-view .flow-node svg{ stroke: var(--text); }
.flow.in-view .flow-num{ background: var(--purple); color:#fff; border-color: var(--purple); }
.flow-step:hover .flow-node{ transform: scale(1.12); box-shadow: 0 0 0 8px rgba(52,211,153,0.16); border-color: var(--green); }
.flow-step:hover .flow-node svg{ stroke: var(--green); }

.flow-step h4{ font-family:var(--body); font-weight:600; font-size:17px; margin:0 0 8px; }
.flow-step p{ font-size:13.5px; color:var(--text-muted); margin:0 0 12px; }
.flow-when{
  font-family:var(--mono); font-size:11px; color:var(--text-faint);
  border:1px solid var(--line); padding:4px 10px; border-radius:999px; display:inline-block;
}
.flow-ai{
  display:block; margin-top:10px; font-family:var(--mono); font-size:10.5px;
  color: var(--green); letter-spacing:.06em;
}

@media (max-width: 860px){
  .flow-track{ grid-template-columns:1fr; gap:8px; }
  .flow-line{
    top:0; bottom:0; left:31px; right:auto; width:2px; height:auto;
  }
  html[dir="rtl"] .flow-line{ left:auto; right:31px; }
  .flow-line span{ width:100%; height:0; transition: height 1.6s cubic-bezier(.16,.84,.44,1);
    background: linear-gradient(180deg, var(--green), var(--purple)); }
  .flow.in-view .flow-line span{ width:100%; height:100%; }
  .flow-step{
    display:grid; grid-template-columns:64px 1fr; gap:18px; text-align:start; padding:14px 0; align-items:start;
  }
  .flow-node{ margin:0; }
  .flow-step .flow-body{ padding-top:4px; }
}

/* ============================================================
   CIRCUIT-STYLE BUTTONS & CTAs
   Visual language borrowed from the logo: thin traces, node
   dots, violet-to-purple gradient. Appended last so these
   rules win over the plainer button styles above.
   ============================================================ */

:root{
  --logo-violet: #3F2280;   /* deep end of the logo gradient */
  --logo-purple: var(--brand-lift);   /* bright end */
  --trace: rgba(255,255,255,0.55);
}

/* ---------- PRIMARY: solid gradient with circuit etching ---------- */
.btn-primary{
  background: linear-gradient(135deg, var(--logo-violet) 0%, var(--logo-purple) 100%);
  color:#fff; position:relative; overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,0.18);
  padding-inline: 30px;
}
/* faint diagonal traces etched across the face, like the D's circuitry */
.btn-primary::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 13px);
}
/* node dots at each end of the pill, joined by a trace that lights on hover */
.btn-primary::after{
  content:''; position:absolute; z-index:-1;
  inset-inline-start:12px; inset-inline-end:12px; top:6px; height:1px;
  background: linear-gradient(90deg, transparent, var(--trace), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .45s cubic-bezier(.16,.84,.44,1);
}
.btn-primary:hover::after{ transform: scaleX(1); }
.btn-primary:hover{
  box-shadow: 0 10px 32px -8px rgba(124,77,219,0.65), 0 0 0 1px rgba(124,77,219,0.4);
  transform: translateY(-1px);
}

/* ---------- GHOST: trace outline with corner nodes ---------- */
.btn-ghost{
  position:relative; border-color: rgba(124,77,219,0.42); color: var(--text);
  background: rgba(124,77,219,0.05);
}
.btn-ghost::before,
.btn-ghost::after{
  content:''; position:absolute; width:5px; height:5px; border-radius:50%;
  background: var(--logo-purple); opacity:.55;
  transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;
}
.btn-ghost::before{ inset-inline-start:10px; top:50%; margin-top:-2.5px; }
.btn-ghost::after{ inset-inline-end:10px; top:50%; margin-top:-2.5px; }
.btn-ghost:hover{ border-color: var(--green); color: var(--green); background: rgba(52,211,153,0.07); }
.btn-ghost:hover::before,
.btn-ghost:hover::after{
  background: var(--green); opacity:1; transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.22);
}

/* ---------- WHATSAPP: keeps brand green, gains the circuit language ---------- */
.btn-whatsapp{
  background: linear-gradient(135deg, #1EA855 0%, #25D366 100%);
  color:#062E18; position:relative; overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,0.20);
}
.btn-whatsapp::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.45;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 9px);
}
.btn-whatsapp:hover{
  box-shadow: 0 10px 32px -8px rgba(37,211,102,0.6), 0 0 0 1px rgba(37,211,102,0.45);
  transform: translateY(-1px);
}

/* ---------- SOCIAL BUTTONS: node on the ring ---------- */
.social-btn{
  position:relative; border-color: rgba(124,77,219,0.30);
  background: rgba(124,77,219,0.04);
}
.social-btn::after{
  content:''; position:absolute; top:2px; inset-inline-end:2px;
  width:5px; height:5px; border-radius:50%; background: var(--logo-purple);
  opacity:.6; transition: opacity .2s ease, box-shadow .2s ease;
}
.social-btn:hover::after{ opacity:1; box-shadow: 0 0 0 3px rgba(124,77,219,0.25); }
.social-btn.wa::after{ background:#25D366; }
.social-btn.wa:hover::after{ box-shadow: 0 0 0 3px rgba(37,211,102,0.28); }

/* ---------- FLOATING WHATSAPP: pulsing trace ring ---------- */
.wa-float{
  background: linear-gradient(135deg, #1EA855, #25D366);
  border:1px solid rgba(255,255,255,0.22);
}
.wa-float::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(37,211,102,0.5); animation: traceRing 2.8s ease-out infinite;
}
@keyframes traceRing{
  0%   { transform: scale(0.92); opacity:.75; }
  70%  { transform: scale(1.22); opacity:0; }
  100% { transform: scale(1.22); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .wa-float::before{ animation:none; opacity:.4; } }

/* ---------- SUBMIT BUTTON: full-width, trace underline ---------- */
.btn-block.btn-primary{ letter-spacing:.01em; }
.btn-block.btn-primary::after{ top:auto; bottom:6px; }

/* ---------- CTA PANELS: circuit corners ---------- */
.story-teaser, .story-cta, .service-feature{ position:relative; }
.story-teaser::before, .story-cta::before, .service-feature::after{
  content:''; position:absolute; top:14px; inset-inline-end:14px;
  width:7px; height:7px; border-radius:50%;
  background: var(--logo-purple); opacity:.5;
  box-shadow: -16px 0 0 -2px rgba(124,77,219,0.45), -30px 0 0 -3px rgba(124,77,219,0.35);
}


/* ============================================================
   FAIL-SAFE REVEALS
   .reveal used to start at opacity:0 and rely on JavaScript to
   show it. If the script failed, the page looked empty. Now
   content is visible by default and only hidden for animation
   when JS has confirmed it is running.
   ============================================================ */
.reveal{ opacity:1; transform:none; }
.js-anim .reveal{ opacity:0; transform: translateY(18px); }
.js-anim .reveal.in-view{ opacity:1; transform:none; }

/* same protection for the process flow and hero chart */
.flow-line span{ width:100%; }
.js-anim .flow-line span{ width:0%; }
.js-anim .flow.in-view .flow-line span{ width:100%; }
#flexPath{ stroke-dashoffset: 0; }
.js-anim #flexPath{ stroke-dashoffset: 1500; }
.js-anim .in-view #flexPath{ stroke-dashoffset: 0; }
@media (max-width: 860px){
  .flow-line span{ height:100%; }
  .js-anim .flow-line span{ height:0; }
  .js-anim .flow.in-view .flow-line span{ height:100%; }
}

/* ============================================================
   LOGO LOCKUP
   The mark is inline SVG so it inherits colour and stays sharp
   at any size. The wordmark is live text in Inter, matching the
   identity study, which keeps it crisp and keeps the file tiny.
   ============================================================ */
.logo{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  font-family: var(--body); letter-spacing:-0.015em; line-height:1;
}
.logo-mark{
  width:26px; height:34px; flex:none; color: var(--brand-lift);
  transition: color .2s ease, transform .2s ease;
}
.logo:hover .logo-mark{ color: var(--purple); transform: translateY(-1px); }
.logo-word{ font-size:20px; font-weight:700; color: var(--text); white-space:nowrap; }
.logo-word i{ font-style:normal; color: var(--brand-lift); }
.logo:hover .logo-word i{ color: var(--purple); }

@media (max-width: 600px){
  .logo-mark{ width:22px; height:29px; }
  .logo-word{ font-size:17px; }
}

/* footer lockup: mark above the wordmark, with the identity tagline */
.foot-brand{ display:flex; align-items:center; gap:13px; }
.foot-brand .logo-mark{ width:30px; height:39px; }
.foot-brand .logo-word{ font-size:19px; }
.foot-tagline{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--text-faint); margin-top:7px;
}

/* the old raster logo classes are retired */
.logo-img, .footer-logo-img{ display:none !important; }

/* ============================================================
   FAQ PAGE
   Built on <details>/<summary> so questions open and close with
   no JavaScript at all, stay keyboard accessible, and remain
   readable to crawlers even with scripts disabled.
   ============================================================ */
.faq-hero{ padding: 76px 0 44px; border-bottom:1px solid var(--line); }
.faq-hero h1{ font-size: clamp(32px,4.6vw,52px); line-height:1.03; max-width:20ch; }
.faq-hero p.lead{ margin-top:18px; color:var(--text-muted); font-size:17px; max-width:60ch; }

.faq-nav{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;
}
.faq-nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 15px; border-radius:999px; border:1px solid var(--line-strong);
  color:var(--text-muted); text-decoration:none; transition:all .18s ease;
}
.faq-nav a:hover{ border-color:var(--brand-lift); color:var(--text); background:rgba(124,77,219,0.10); }

.faq-group{ margin-bottom:54px; }
.faq-group > h2{
  font-size: clamp(22px,2.8vw,30px); margin-bottom:6px;
  scroll-margin-top: 96px;
}
.faq-group > p.intro{ color:var(--text-faint); font-size:14px; margin:0 0 22px; }

.faq-item{
  border:1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin-bottom:12px; overflow:hidden;
  transition: border-color .2s ease;
}
.faq-item[open]{ border-color: var(--brand-lift); }
.faq-item summary{
  cursor:pointer; list-style:none; padding: 20px 56px 20px 24px;
  font-weight:600; font-size:16.5px; color:var(--text); position:relative;
  transition: color .18s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color: var(--purple); }
.faq-item summary::after{
  content:''; position:absolute; top:50%; inset-inline-end:24px;
  width:11px; height:11px; margin-top:-7px;
  border-right:2px solid var(--purple); border-bottom:2px solid var(--purple);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq-item[open] summary::after{ transform: rotate(-135deg); margin-top:-3px; }
.faq-item .answer{ padding: 0 24px 22px; color:var(--text-muted); font-size:15px; line-height:1.62; }
.faq-item .answer p{ margin:0 0 13px; }
.faq-item .answer p:last-child{ margin-bottom:0; }
.faq-item .answer strong{ color:var(--text); font-weight:600; }
.faq-item .answer ul{ margin:0 0 13px; padding-inline-start:20px; }
.faq-item .answer li{ margin-bottom:7px; }
.faq-item .answer a{ color: var(--purple); }

html[dir="rtl"] .faq-item summary{ padding: 20px 24px 20px 56px; }
html[dir="rtl"] .faq-item summary::after{ border-right:none; border-left:2px solid var(--purple); transform: rotate(-45deg); }
html[dir="rtl"] .faq-item[open] summary::after{ transform: rotate(135deg); }

.faq-cta{
  background: linear-gradient(135deg, rgba(93,53,181,0.22), rgba(124,77,219,0.08));
  border:1px solid var(--line-strong); border-radius: var(--radius);
  padding: 40px 36px; text-align:center;
}
.faq-cta h2{ font-size: clamp(23px,3vw,32px); margin-bottom:10px; }
.faq-cta p{ color:var(--text-muted); margin:0 auto 24px; max-width:52ch; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-intro{ max-width:680px; margin-bottom:14px; }
.pricing-note{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--green);
  background:rgba(52,211,153,0.10); border:1px solid var(--green-dim);
  padding:7px 14px; border-radius:999px; margin-bottom:20px;
}
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }
@media (max-width:900px){ .price-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .price-grid{ grid-template-columns:1fr; } }

.price-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; transition:border-color .2s ease, transform .2s ease;
}
.price-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
.price-card h4{ font-family:var(--body); font-weight:600; font-size:16px; margin:0 0 12px; }
.price-was{
  font-family:var(--mono); font-size:12.5px; color:var(--text-faint);
  text-decoration:line-through; text-decoration-color:rgba(255,255,255,0.35);
}
.price-now{
  font-family:var(--display); font-weight:800; font-size:31px; color:var(--text);
  line-height:1; margin:5px 0 2px;
}
.price-now .cur{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--purple); margin-inline-end:5px; }
.price-per{ font-family:var(--mono); font-size:11px; color:var(--text-faint); letter-spacing:.06em; }
.price-quote{ font-family:var(--display); font-weight:700; font-size:19px; color:var(--text-muted); margin:8px 0 2px; }

.price-bundle{
  background:linear-gradient(135deg, rgba(93,53,181,0.24), rgba(124,77,219,0.07));
  border:1px solid var(--purple-dim); border-radius:var(--radius);
  padding:30px 28px; margin:26px 0 18px;
}
.price-bundle h3{ font-family:var(--body); font-weight:700; font-size:20px; margin:0 0 6px; }
.price-bundle > p{ color:var(--text-muted); font-size:14.5px; margin:0 0 22px; max-width:64ch; }
.bundle-rows{ display:grid; gap:12px; }
.bundle-row{
  display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--line);
}
.bundle-row:first-child{ border-top:none; }
.bundle-row .label{ font-size:15px; font-weight:600; }
.bundle-row .label span{ display:block; font-weight:400; font-size:13px; color:var(--text-faint); margin-top:3px; }
.bundle-row .was{ font-family:var(--mono); font-size:13px; color:var(--text-faint); text-decoration:line-through; }
.bundle-row .now{ font-family:var(--display); font-weight:800; font-size:25px; color:var(--text); white-space:nowrap; }
.bundle-row.total .now{ color:var(--purple); font-size:29px; }
@media (max-width:640px){
  .bundle-row{ grid-template-columns:1fr auto; }
  .bundle-row .was{ grid-column:2; }
  .bundle-row .now{ grid-column:2; }
}
.price-terms{ font-size:12.5px; color:var(--text-faint); margin-top:16px; line-height:1.7; }

/* PDF download strip */
.dl-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
@media (max-width:820px){ .dl-strip{ grid-template-columns:1fr; } }
.dl-card{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.dl-card:hover{ border-color:var(--purple); transform:translateY(-2px); background:rgba(124,77,219,0.07); }
.dl-icon{
  width:38px; height:38px; flex:none; border-radius:10px;
  background:linear-gradient(135deg,var(--brand-deep),var(--brand-lift));
  display:flex; align-items:center; justify-content:center;
}
.dl-icon svg{ width:19px; height:19px; stroke:#fff; fill:none; stroke-width:1.9; }
.dl-card .meta{ display:flex; flex-direction:column; min-width:0; }
.dl-card .t{ display:block; font-size:14.5px; font-weight:600; color:var(--text); line-height:1.35; }
.dl-card .m{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--text-faint); letter-spacing:.08em; text-transform:uppercase; margin-top:5px; }
/* Arabic titles inside the English page need their own direction so the
   label and the PDF tag do not reorder around each other. */
.dl-card .t[lang="ar"]{ direction:rtl; text-align:start; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal{ max-width:800px; }
.legal h2{ font-size:clamp(21px,2.6vw,27px); margin:40px 0 12px; scroll-margin-top:96px; }
.legal h3{ font-family:var(--body); font-weight:700; font-size:17px; margin:26px 0 8px; letter-spacing:0; }
.legal p, .legal li{ color:var(--text-muted); font-size:15.5px; line-height:1.68; }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 16px; padding-inline-start:22px; }
.legal li{ margin-bottom:8px; }
.legal strong{ color:var(--text); font-weight:600; }
.legal a{ color:var(--purple); }
.legal .updated{
  font-family:var(--mono); font-size:11.5px; color:var(--text-faint);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:26px; display:block;
}
.legal-note{
  background:var(--surface); border:1px solid var(--line-strong); border-inline-start:3px solid var(--purple);
  border-radius:var(--radius-sm); padding:18px 20px; margin:22px 0;
}
.legal-note p{ margin:0; font-size:14.5px; }

/* footer legal links */
.foot-legal{ display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; }
.foot-legal a{ font-size:12.5px; color:var(--text-faint); text-decoration:none; transition:color .15s ease; }
.foot-legal a:hover{ color:var(--purple); }

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie-bar{
  position:fixed; inset-inline:16px; bottom:16px; z-index:80;
  max-width:560px; background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:20px 22px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.7);
  display:none;
}
.cookie-bar.show{ display:block; animation:cookieIn .3s cubic-bezier(.16,.84,.44,1); }
@keyframes cookieIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .cookie-bar.show{ animation:none; } }
.cookie-bar p{ margin:0 0 16px; font-size:14px; color:var(--text-muted); line-height:1.6; }
.cookie-bar p a{ color:var(--purple); }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions .btn{ padding:11px 20px; font-size:14px; }
@media (max-width:600px){
  .cookie-bar{ inset-inline:10px; bottom:10px; padding:18px; }
  .cookie-actions .btn{ flex:1; }
}

.field-error{
  color:#F19E96; font-size:12.5px; margin-top:6px;
  display:flex; align-items:center; gap:6px;
}
.field-error::before{ content:'!'; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; background:rgba(231,90,79,.22);
  font-family:var(--mono); font-size:10px; flex:none; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]{
  border-color:rgba(231,90,79,.65) !important;
  box-shadow:0 0 0 3px rgba(231,90,79,.14) !important;
}


/* ============================================================
   v13 — service pages, The Flex Blogs, navigation, bug fixes
   ============================================================ */

/* ---------- fixes ---------- */
/* Spam-trap field: visually hidden without a huge offset. The old
   left:-9999px made right-to-left pages scroll sideways. */
.hp-field{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* While the cookie bar is up on phones, hide the WhatsApp bubble so the
   two never overlap. It comes back the moment a choice is made. */
@media (max-width:600px){
  .cookie-bar.show ~ .wa-float{ opacity:0; pointer-events:none; }
}
.wa-float{ transition: transform .2s ease, opacity .2s ease; }
:focus-visible{ outline:2px solid var(--purple); outline-offset:3px; border-radius:4px; }
.skip-link{
  position:absolute; inset-inline-start:12px; top:-60px; z-index:100;
  background:var(--brand); color:#fff; padding:10px 16px; border-radius:8px; text-decoration:none;
}
.skip-link:focus{ top:12px; }

/* ---------- navigation ---------- */
.nav-links{ gap:24px; }
.nav-links a[aria-current="page"], .nav-drop[aria-current="true"]{ color:var(--text); }
.nav-item{ position:relative; }
.nav-drop{
  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:color .15s ease;
}
.nav-drop:hover{ color:var(--text); }
.nav-drop svg{ width:10px; height:10px; transition:transform .2s ease; }
.nav-drop[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-menu{
  position:absolute; top:calc(100% + 14px); inset-inline-start:-18px; z-index:60;
  min-width:290px; padding:10px; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid var(--line-strong);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.75);
  display:grid; gap:2px;
}
.nav-menu[hidden]{ display:none; }
.nav-menu a{
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:9px;
  color:var(--text-muted); font-size:14px;
}
.nav-menu a:hover, .nav-menu a:focus-visible{ background:rgba(124,77,219,.14); color:var(--text); }
.nav-menu a img{ width:26px; height:26px; flex:none; }
.nav-menu .menu-all{
  margin-top:4px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--purple);
}
@media (max-width: 900px){
  .nav-links{ max-height:calc(100vh - 64px); overflow-y:auto; }
  .nav-item{ width:100%; border-bottom:1px solid var(--line); }
  .nav-drop{ width:100%; justify-content:space-between; padding:12px 0; }
  .nav-menu{ position:static; min-width:0; padding:0 0 10px; background:none; border:0; box-shadow:none; }
  .nav-menu a{ border-bottom:0 !important; padding:9px 4px; width:auto; }
}

/* ---------- breadcrumbs ---------- */
.crumbs{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:22px; }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.crumbs li{ display:flex; gap:8px; align-items:center; }
.crumbs li + li::before{ content:'/'; color:var(--line-strong); }
.crumbs a{ color:var(--text-faint); text-decoration:none; }
.crumbs a:hover{ color:var(--purple); }

/* ---------- service landing pages ---------- */
.svc-hero{ padding:64px 0 60px; border-bottom:1px solid var(--line); overflow:hidden; }
.svc-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.svc-hero h1{ font-size:clamp(34px,4.8vw,58px); line-height:1.02; }
.svc-hero h1 em{ font-style:normal; color:var(--purple); display:block; }
.svc-hero .lead{ margin-top:20px; color:var(--text-muted); font-size:17.5px; max-width:56ch; }
.facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; padding:0; list-style:none; }
.facts li{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid rgba(167,139,250,.38); border-radius:999px; padding:7px 13px; color:var(--text-muted);
}
.svc-hero .hero-actions{ margin-top:30px; }
.svc-visual{
  position:relative; aspect-ratio:4/3.4; border-radius:18px; overflow:hidden;
  border:1px solid var(--line-strong); background:var(--surface);
}
.svc-visual img.bg{ width:100%; height:100%; object-fit:cover; opacity:.62; }
.svc-visual::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,19,27,0) 30%, rgba(21,19,27,.92)); }
.svc-visual .badge-row{ position:absolute; inset-inline:22px; bottom:20px; z-index:2; display:flex; align-items:center; gap:14px; }
.svc-visual .badge-row img{ width:58px; height:58px; }
.svc-visual .badge-row span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text); }
@media (max-width:900px){
  .svc-hero-grid{ grid-template-columns:1fr; gap:34px; }
  .svc-visual{ aspect-ratio:16/10; }
}

.svc-section{ padding:78px 0; border-bottom:1px solid var(--line); }
.svc-section:last-of-type{ border-bottom:0; }
.svc-section h2{ font-size:clamp(26px,3.2vw,38px); max-width:24ch; }
.svc-intro{ color:var(--text-muted); font-size:16.5px; max-width:64ch; margin-top:16px; }
.svc-two{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.svc-two .prose p{ color:var(--text-muted); font-size:16.5px; line-height:1.72; margin:0 0 16px; }
@media (max-width:900px){ .svc-two{ grid-template-columns:1fr; gap:22px; } }

.deliver-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; }
.deliver{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; transition:border-color .2s ease, transform .2s ease;
}
.deliver:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.deliver .k{ font-family:var(--mono); font-size:11px; color:var(--purple); letter-spacing:.1em; }
.deliver h3{ font-family:var(--body); font-weight:700; font-size:17px; margin:10px 0 8px; letter-spacing:0; }
.deliver p{ color:var(--text-muted); font-size:14.5px; margin:0; line-height:1.6; }
@media (max-width:900px){ .deliver-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .deliver-grid{ grid-template-columns:1fr; } }

/* numbered steps, from the Travel Flex playbook */
.steps{ margin-top:34px; display:grid; gap:0; border-top:1px solid var(--line); }
.steps .step{ display:grid; grid-template-columns:64px 1fr; gap:6px 18px; padding:22px 0; border-bottom:1px solid var(--line); }
.steps .step .n{ font-family:var(--mono); font-size:13px; color:var(--purple); padding-top:3px; }
.steps .step h3{ font-family:var(--body); font-weight:700; font-size:18px; margin:0 0 6px; letter-spacing:0; }
.steps .step p{ color:var(--text-muted); font-size:15px; margin:0; line-height:1.6; }

.ai-panel{
  background:linear-gradient(135deg, rgba(93,53,181,.22), rgba(124,77,219,.06));
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:30px 30px 26px;
}
.ai-panel .label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--purple); }
.ai-panel ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
.ai-panel li{ display:flex; gap:12px; color:var(--text-muted); font-size:15px; line-height:1.6; }
.ai-panel li::before{ content:''; flex:none; width:7px; height:7px; border-radius:50%; background:var(--purple); margin-top:9px; box-shadow:0 0 0 4px rgba(124,77,219,.2); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding:0; list-style:none; }
.chips li{ background:rgba(124,77,219,.14); color:#D9CCFF; border-radius:999px; padding:6px 14px; font-size:13.5px; }

.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.related{
  display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  transition:border-color .2s ease, transform .2s ease;
}
.related:hover{ border-color:var(--purple); transform:translateY(-2px); }
.related img{ width:44px; height:44px; flex:none; }
.related strong{ display:block; font-size:15px; }
.related span{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-top:4px; }
@media (max-width:820px){ .related-grid{ grid-template-columns:1fr; } }

/* dark call-to-action box, from the Travel Flex playbook */
.cta-box{
  background:#0E0D12; border:1px solid var(--line-strong); border-radius:18px;
  padding:clamp(26px,4vw,44px); position:relative; overflow:hidden;
}
.cta-box::before{
  content:''; position:absolute; inset-inline-end:-120px; top:-140px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,77,219,.35), transparent 70%); pointer-events:none;
}
.cta-box .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--purple); position:relative; }
.cta-box h2, .cta-box h3{ font-size:clamp(24px,3vw,34px); margin:10px 0 12px; position:relative; }
.cta-box p, .cta-box li{ color:#D6D1DE; font-size:15.5px; line-height:1.65; position:relative; }
.cta-box ul{ margin:14px 0 0; padding-inline-start:20px; }
.cta-box a{ color:#D9CCFF; }
.cta-box .hero-actions{ margin-top:24px; position:relative; }

/* service card links on the homepage */
a.service-card, a.service-feature{ color:inherit; text-decoration:none; display:block; }
a.service-feature{ display:grid; }
.card-more{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--purple);
}
.card-more::after{ content:'→'; transition:transform .2s ease; }
html[dir="rtl"] .card-more::after{ content:'←'; }
a.service-card:hover .card-more::after, a.service-feature:hover .card-more::after{ transform:translateX(4px); }
html[dir="rtl"] a.service-card:hover .card-more::after, html[dir="rtl"] a.service-feature:hover .card-more::after{ transform:translateX(-4px); }

/* ---------- The Flex Blogs ---------- */
.blog-mast{ padding:64px 0 54px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, #0E0D12, var(--bg)); }
.blog-mast .series{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--purple); }
.blog-mast h1{ font-size:clamp(34px,5.4vw,62px); line-height:1.02; margin-top:18px; max-width:18ch; }
.blog-mast h1 em{ font-style:normal; color:var(--purple); }
.blog-mast .lead{ margin-top:18px; color:#C9C4D2; font-size:18px; max-width:60ch; }

.post-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.post-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.post-card:hover{ border-color:var(--purple); transform:translateY(-3px); }
.post-card img{ width:100%; height:auto; aspect-ratio:1400/788; object-fit:cover; display:block; }
.post-card .body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.post-card h2{ font-size:clamp(21px,2.3vw,26px); line-height:1.15; }
.post-card p{ color:var(--text-muted); font-size:15px; margin:0; }
.post-card.featured{ grid-column:1 / -1; display:grid; grid-template-columns:1.2fr 1fr; }
.post-card.featured .body{ justify-content:center; padding:32px 34px; }
.post-card.featured h2{ font-size:clamp(24px,2.8vw,34px); }
@media (max-width:900px){ .post-grid{ grid-template-columns:1fr; } .post-card.featured{ grid-template-columns:1fr; } }

.upcoming{ list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--line); }
.upcoming li{ display:grid; grid-template-columns:110px 1fr auto; gap:16px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line); }
.upcoming .k{ font-family:var(--mono); font-size:12px; color:var(--purple); letter-spacing:.1em; }
.upcoming .t{ font-size:16.5px; font-weight:600; }
.upcoming .s{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
@media (max-width:600px){ .upcoming li{ grid-template-columns:1fr; gap:4px; } }

/* article */
.post-hero{ padding:56px 0 34px; }
.post-hero .series{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--purple); }
.post-hero h1{ font-size:clamp(30px,4.4vw,50px); line-height:1.08; margin-top:14px; max-width:24ch; }
.post-hero .byline{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:24px; color:var(--text-muted); font-size:14px; }
.post-hero .byline img{ width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:center 20%; border:1px solid var(--line-strong); }
.post-hero .byline .dot{ width:4px; height:4px; border-radius:50%; background:var(--text-faint); }
.post-cover{ border-radius:18px; overflow:hidden; border:1px solid var(--line-strong); }
.post-cover img{ width:100%; height:auto; display:block; }

.post-layout{ display:grid; grid-template-columns:180px minmax(0,720px); gap:56px; justify-content:center; padding:48px 0 30px; }
.post-toc{ position:sticky; top:96px; align-self:start; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; }
.post-toc p{ color:var(--text-faint); margin:0 0 12px; }
.post-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:10px; border-inline-start:1px solid var(--line-strong); }
.post-toc a{ display:block; padding-inline-start:14px; margin-inline-start:-1px; border-inline-start:1px solid transparent; color:var(--text-muted); text-decoration:none; }
.post-toc a:hover, .post-toc a.on{ color:var(--text); border-inline-start-color:var(--purple); }
@media (max-width:980px){ .post-layout{ grid-template-columns:minmax(0,720px); } .post-toc{ display:none; } }

.article{ font-size:17.5px; line-height:1.75; color:#D7D2DF; }
.article > * + *{ margin-top:18px; }
.article p{ margin-bottom:0; }
.article > p{ margin-top:18px; }
.article > p:first-child{ margin-top:0; }
.article .lead-in{ font-size:21px; color:var(--text); font-weight:600; }
.article h2{ font-size:clamp(24px,2.8vw,31px); line-height:1.2; margin-top:52px; scroll-margin-top:96px; color:var(--text); }
.article h2 .tag{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--purple); margin-bottom:10px; font-weight:500; }
.article ul{ padding-inline-start:22px; margin-bottom:0; }
.article li + li{ margin-top:8px; }
.article strong{ color:var(--text); }
.article a{ color:#C4B2FF; text-underline-offset:3px; }
.article figure{ margin:30px 0; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.article figure img{ width:100%; height:auto; display:block; }
.article .stat-list{ list-style:none; padding:0; display:grid; gap:10px; }
.article .stat-list li{ background:var(--surface); border:1px solid var(--line); border-inline-start:3px solid var(--purple); border-radius:10px; padding:14px 18px; margin:0; }
.article .step{ display:grid; grid-template-columns:auto 1fr; gap:4px 16px; padding:16px 0; border-top:1px solid var(--line); margin-top:0; }
.article .step + p{ margin-top:26px; }
.article .step .n{ font-family:var(--mono); color:var(--purple); font-size:13px; padding-top:5px; }
.article .cta-box{ margin-top:48px; }
.article .sources{ font-size:13px; line-height:1.7; color:var(--text-faint); margin-top:34px; }
.article .sources a{ color:var(--text-muted); }
.post-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; padding:0; list-style:none; }
.post-tags li{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line-strong); border-radius:999px; padding:6px 12px; color:var(--text-muted); }
html[dir="rtl"] .article{ font-size:18px; line-height:1.9; }

/* ---------- footer ---------- */
footer .foot-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; width:100%; padding-bottom:28px; border-bottom:1px solid var(--line); margin-bottom:22px; }
footer .foot-col h4{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin:0 0 14px; }
footer .foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
footer .foot-col a{ color:var(--text-muted); text-decoration:none; font-size:14px; }
footer .foot-col a:hover{ color:var(--purple); }
footer .foot-bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; width:100%; }
@media (max-width:820px){ footer .foot-top{ grid-template-columns:1fr 1fr; } footer .foot-brand-col{ grid-column:1 / -1; } }
@media (max-width:480px){ footer .foot-top{ grid-template-columns:1fr; } }