/* ═══════════════════════════════════════════════════════════
   الوقّاد — wakkad.com
   Arabic-first · RTL · dual theme · "ignite and settle"
   ═══════════════════════════════════════════════════════════ */

:root{
  /* daylight */
  --paper:#F7F1E3; --raised:#FCF8EC; --sunken:#EFE6CF;
  --ink:#241C0F; --muted:#5F5238; --faint:#8A7A58;
  --border:#D8CAA6; --hairline:#E4D8BA;
  --gold:#B9831F; --gold-deep:#8F6312; --ember:#C2570E; --ember-hover:#A34A0B;
  --success:#4C6B22; --warning:#9A6212; --danger:#A33B24;
  --r-md:8px; --r-lg:12px; --r-xl:16px;
  /* translucent panel so content floats over the cosmos */
  --panel:color-mix(in srgb, var(--raised) 80%, transparent);

  --ar-display:"Amiri",serif;
  --ar-text:"Tajawal",sans-serif;
  --la-display:"Fraunces",Georgia,serif;
  --la-text:"Manrope","Segoe UI",sans-serif;

  /* the promise band is night even in daylight */
  --ebony:#16110A; --night-text:#F2E9D5; --night-gold:#D9A441; --night-muted:#C2B292;

  /* ember palette (hero embers, dark only) */
  --p-hot:255,233,176; --p-gold:185,131,31; --p-ember:194,87,14;

  /* cosmos — LIGHT (day): ink stars drifting over warm paper, inverted night sky */
  --cosmos-star:74,62,40;
  --cosmos-bg-1:#FCF8EC; --cosmos-bg-2:#F4EDDB; --cosmos-bg-3:#E7DBBE;
  --neb-opacity:0;

  --ease-settle:cubic-bezier(.22,1,.36,1);
}
[data-theme="night"]{
  /* deep black surfaces (neutral, faint cool tint — no brown) */
  --paper:#0A0A0C; --raised:#141418; --sunken:#1B1B20;
  --ink:#F2E9D5; --muted:#BEB29A; --faint:#897E66;
  --border:#2A2A31; --hairline:#1E1E24;
  --gold:#D9A441; --gold-deep:#B9831F; --ember:#E58E2B; --ember-hover:#D9801F;
  --success:#8FB05A; --warning:#E6B968; --danger:#D96B4A;
  --ebony:#08080A;

  --p-hot:255,240,200; --p-gold:217,164,65; --p-ember:229,142,43;

  /* cosmos — DARK (night): white-blue stars over deep black */
  --cosmos-star:220,228,255;
  --cosmos-bg-1:#101016; --cosmos-bg-2:#070709; --cosmos-bg-3:#000000;
  --neb-opacity:.42;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; background:var(--cosmos-bg-2)}
body{
  background:transparent; color:var(--ink);
  font-family:var(--ar-text); font-size:17px; line-height:1.8;
  transition:color .5s ease;
  overflow-x:hidden;
}
::selection{background:var(--gold); color:var(--paper)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

a{color:inherit; text-decoration:none}
section{scroll-margin-block-start:90px; position:relative}

/* ── the cosmos — fixed flight-through-space backdrop ───────── */
.cosmos-bg{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 20%, var(--cosmos-bg-1), var(--cosmos-bg-2) 52%, var(--cosmos-bg-3));
  transition:background .6s ease;
}
.cosmos-neb{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url("../img/night-sky.jpg") center/cover no-repeat;
  mix-blend-mode:screen; opacity:var(--neb-opacity);
  transition:opacity .6s ease; will-change:opacity, transform;
}
#cosmos{position:fixed; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none}

/* ── zigzag band — page edges only ─────────────────────────── */
.zigzag{height:26px; pointer-events:none}
.zigzag svg{display:block; width:100%; height:100%}
.zigzag--top{position:absolute; top:0; inset-inline:0; z-index:30}
.zigzag--top path{stroke-dasharray:1; stroke-dashoffset:1}
.zigzag--top .zig-dot{opacity:0}
body.is-loaded .zigzag--top path{animation:draw .7s var(--ease-settle) forwards}
body.is-loaded .zigzag--top .zig-dot{animation:ignite .25s ease-out .65s forwards}

/* ── header ────────────────────────────────────────────────── */
.site-header{
  position:fixed; top:0; inset-inline:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:40px clamp(20px,4vw,44px) 16px; /* top clears the zigzag band at page-top */
  transition:padding .4s ease, background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
  opacity:0;
}
body.is-loaded .site-header{animation:rise .5s var(--ease-settle) 1.5s forwards}
.site-header.is-scrolled{
  padding-top:14px; padding-bottom:14px; /* condenses to a flush bar pinned to the very top */
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--hairline);
}
.header-brand{display:flex; align-items:center; gap:10px}
.header-mark{color:var(--gold)}
.header-name{font-family:var(--ar-display); font-weight:700; font-size:24px; line-height:1}
.theme-toggle{
  background:var(--raised); color:var(--ink);
  border:1px solid var(--border); border-radius:999px;
  padding:7px 17px; font-family:var(--ar-text); font-size:14px; font-weight:500;
  transition:transform .15s ease, background .5s ease, color .5s ease, border-color .5s ease;
}
.theme-toggle:active{transform:scale(.98)}

/* ── shared type ───────────────────────────────────────────── */
h2{
  font-family:var(--ar-display); font-weight:700;
  font-size:clamp(28px,4.2vw,44px); line-height:1.6;
}
h3{font-family:var(--ar-text); font-weight:700; font-size:19px; line-height:1.6}
.eyebrow{
  font-family:var(--la-text); font-size:12px; font-weight:600;
  letter-spacing:3px; text-transform:lowercase; color:var(--gold-deep);
  margin-bottom:10px;
}
.eyebrow--night{color:var(--night-gold)}
.en-mirror{
  font-family:var(--la-display); font-size:14px; color:var(--faint);
  direction:ltr; letter-spacing:.4px;
}
.en-mirror--night{color:#8F805F}
.lit{color:var(--gold-deep)}
[data-theme="night"] .lit{color:var(--night-gold)}

/* ── buttons — ember acts, gold is identity ────────────────── */
.btn{
  display:inline-block; border-radius:var(--r-md);
  padding:13px 30px; font-family:var(--ar-text); font-weight:500; font-size:16px;
  transition:background .25s ease, border-color .25s ease, transform .15s ease;
}
.btn:active{transform:scale(.98)}
.btn--ember{background:var(--ember); color:#FCF8EC}
.btn--ember:hover{background:var(--ember-hover)}
.btn--ghost{border:1px solid var(--border); color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold)}

/* ── hero — floats over the cosmos; the W kindles the dark ───── */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 70px;
}
.hero-content{display:contents}
.hero-lockup{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:26px}
/* the pool of warm light the W casts — fire in the dark, so dark mode only */
.hero-glow{
  position:absolute; top:-40%; left:50%; z-index:-1;
  width:min(70vw,560px); aspect-ratio:1; transform:translate(-50%,-10%) scale(.4);
  border-radius:50%; opacity:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle,
    rgba(255,214,140,.55) 0%, rgba(217,164,65,.32) 22%,
    rgba(194,87,14,.16) 42%, rgba(194,87,14,0) 68%);
  filter:blur(6px); display:none;
}
[data-theme="night"] .hero-glow{display:block}
[data-theme="night"] body.is-loaded .hero-glow{animation:glow-bloom 1.4s var(--ease-settle) 1.1s forwards}
.hero-mark{width:clamp(78px,9.5vw,108px); color:var(--gold); position:relative}
.hero-mark .wmark-path{stroke-dasharray:1; stroke-dashoffset:1}
.hero-mark .wmark-dot{opacity:0; transform-box:fill-box; transform-origin:center}
body.is-loaded .hero-mark .wmark-path{animation:draw .6s var(--ease-settle) .55s forwards}
body.is-loaded .hero-mark .wmark-dot{animation:ignite-glow .3s ease-out 1.15s forwards}
/* once lit, the mark keeps a soft living flicker (dark mode — a flame in the night) */
[data-theme="night"] body.is-loaded .hero-mark{animation:mark-flicker 4.5s ease-in-out 1.9s infinite}
.hero-wordmark{
  font-family:var(--ar-display); font-weight:700;
  font-size:clamp(30px,4vw,40px); line-height:1.4; color:var(--ink); opacity:0;
}
.hero-caption{
  font-family:var(--la-display); font-size:13px; font-weight:600;
  letter-spacing:6px; color:var(--ink); padding-inline-start:6px; opacity:0;
}
.hero-caption .cap-amber{color:var(--gold)}
body.is-loaded .hero-wordmark{animation:rise .5s var(--ease-settle) 1.25s forwards}
body.is-loaded .hero-caption{animation:rise .5s var(--ease-settle) 1.33s forwards}
.hero-h1{
  font-family:var(--ar-display); font-weight:700;
  font-size:clamp(38px,6.5vw,72px); line-height:1.55; color:var(--ink); opacity:0;
}
[data-theme="night"] .hero-h1{text-shadow:0 2px 30px rgba(5,3,13,.6)}
body.is-loaded .hero-h1{animation:rise .5s var(--ease-settle) 1.45s forwards}
.hero-en{margin-top:8px; font-size:clamp(14px,1.5vw,17px); color:var(--faint); opacity:0}
body.is-loaded .hero-en{animation:rise .5s var(--ease-settle) 1.53s forwards}
.hero-sub{max-width:560px; color:var(--muted); margin-top:18px; opacity:0}
body.is-loaded .hero-sub{animation:rise .5s var(--ease-settle) 1.61s forwards}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:34px; opacity:0}
body.is-loaded .hero-ctas{animation:rise .5s var(--ease-settle) 1.69s forwards}

/* ── sections ──────────────────────────────────────────────── */
.section{max-width:980px; margin:0 auto; padding:clamp(56px,9vh,110px) 24px; text-align:center}

/* rule & diamond — section dividers, expand outward on reveal */
.divider{display:flex; align-items:center; gap:12px; margin:0 auto 44px; max-width:520px}
.divider .line{flex:1; height:1px; background:var(--gold); transform:scaleX(0); transition:transform .8s var(--ease-settle) .15s}
.divider .line:first-child{transform-origin:left center}
.divider .line:last-child{transform-origin:right center}
.divider .diamond{width:9px; height:9px; background:var(--gold); transform:rotate(45deg) scale(0); flex:none; transition:transform .45s var(--ease-settle)}
.divider.in .line{transform:scaleX(1)}
.divider.in .diamond{transform:rotate(45deg) scale(1)}

/* scroll reveals — ignite and settle, once */
.rv{opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease-settle), transform .55s var(--ease-settle); transition-delay:calc(var(--i,0)*75ms)}
.rv.in{opacity:1; transform:none}
.divider.rv{transform:none}

/* gold sheen — one light sweep on big titles, never looping */
.sheen{position:relative}
.sheen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(var(--p-gold),.28) 50%, transparent 62%);
  background-size:280% 100%; background-position:140% 0; background-repeat:no-repeat;
}
.sheen.sheen-go::after{animation:sheen 1.1s ease-out .35s 1 both}

/* ── 2 · transformation ────────────────────────────────────── */
.arc{
  display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:center;
  margin-top:44px; text-align:start;
}
.arc-card{
  background:var(--panel); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:26px 26px 22px; color:var(--muted); font-size:16px;
  transition:transform .25s ease, border-color .25s ease, background .5s ease,
             opacity .55s var(--ease-settle);
}
.arc-card:hover{transform:translateY(-2px); border-color:var(--faint)}
.arc-tag{font-size:13px; font-weight:700; color:var(--faint); margin-bottom:8px}
.arc-tag--gold{color:var(--gold-deep)}
.arc-card--after{border-color:var(--gold)}
.arc-arrow{width:48px}
.arc-arrow svg{display:block; width:100%}
.triple{
  font-family:var(--ar-display); font-weight:700; font-size:clamp(22px,3vw,30px);
  color:var(--gold-deep); margin-top:46px;
}

/* ── 3 · how it works — ember progress connects the steps ──── */
.ember-track{
  display:flex; justify-content:space-between; align-items:center;
  max-width:760px; margin:48px auto 26px;
}
.ember-track .e-dot{
  width:7px; height:7px; border-radius:50%; background:var(--border);
  transition:background .3s ease, transform .3s ease;
  transition-delay:calc(var(--i,0)*80ms);
}
.ember-track .e-dot--step{width:13px; height:13px}
.ember-track.in .e-dot{background:var(--gold)}
.ember-track.in .e-dot--step{transform:scale(1.25)}
.ember-track.in .e-dot--current{transform:scale(1.6); background:var(--ember)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:start}
.step{
  background:var(--panel); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:26px 24px 22px;
  transition:transform .25s ease, border-color .25s ease, background .5s ease,
             opacity .55s var(--ease-settle);
  transition-delay:calc(var(--i,0)*75ms), 0s, 0s, calc(var(--i,0)*75ms);
}
.step:hover{transform:translateY(-2px); border-color:var(--faint)}
.step-num{
  font-family:var(--ar-display); font-weight:700; font-size:26px;
  color:var(--gold); line-height:1; margin-bottom:14px;
}
.step p{color:var(--muted); font-size:15.5px; margin-top:6px}

/* ── 4 · industries ────────────────────────────────────────── */
.industries-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px;
}
/* flip card: front = icon + title, back = automation services. tap to flip. */
.ind-card{
  position:relative; min-height:186px; perspective:1000px; cursor:pointer;
  background:transparent; border:0; padding:0; color:inherit; font:inherit;
  transition:transform .25s ease, opacity .55s var(--ease-settle);
  transition-delay:calc(var(--i,0)*60ms), calc(var(--i,0)*60ms);
}
.ind-card:hover{transform:translateY(-3px)}
.ind-inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .55s var(--ease-settle);
}
.ind-card.flipped .ind-inner{transform:rotateY(180deg)}
.ind-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:22px 16px; text-align:center; border-radius:var(--r-lg);
  background:var(--panel); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--border); transition:border-color .25s ease, background .5s ease;
}
.ind-card:hover .ind-face{border-color:var(--faint)}
.ind-card.flipped .ind-front{border-color:var(--gold)}
.ind-front::after{
  content:"⟳"; position:absolute; bottom:9px; inset-inline-start:12px;
  font-size:13px; color:var(--faint); opacity:.55; transition:color .25s ease, opacity .25s ease;
}
.ind-card:hover .ind-front::after{color:var(--gold); opacity:1}
.ind-back{transform:rotateY(180deg); gap:12px; border-color:var(--gold)}
.ind-back p{color:var(--muted); font-size:13.5px; line-height:1.7; font-weight:400}
.ind-more-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; color:var(--gold-deep);
  border:1px solid var(--border); border-radius:999px; padding:6px 14px;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.ind-more-btn svg{width:15px; height:15px}
.ind-more-btn:hover{border-color:var(--gold); color:var(--ember); background:color-mix(in srgb, var(--gold) 9%, transparent)}
[data-theme="night"] .ind-more-btn{color:var(--night-gold)}
.ind-card h3{font-size:16px; font-weight:500}
.ind-icon{
  width:40px; height:40px; stroke:var(--ink); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; fill:none;
  transition:stroke .5s ease;
}
.ind-icon .g{fill:var(--gold); stroke:none}
.ind-more{margin-top:30px; color:var(--faint); font-size:15px}
.diag-en{margin-top:12px}

/* ── 5 · two paths — equal weight ──────────────────────────── */
.paths-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; text-align:start}
.path-card{
  background:var(--panel); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:34px 30px 30px;
  transition:transform .25s ease, border-color .25s ease, background .5s ease,
             opacity .55s var(--ease-settle);
  transition-delay:calc(var(--i,0)*75ms), 0s, 0s, calc(var(--i,0)*75ms);
}
.path-card:hover{transform:translateY(-2px); border-color:var(--gold)}
.path-card h3{font-family:var(--ar-display); font-size:24px; margin-bottom:12px}
.path-card p{color:var(--muted); font-size:16px}

/* ── 6 · the promise band — night even in daylight ─────────── */
.promise{
  text-align:center;
  padding:clamp(70px,12vh,130px) 24px;
}
.promise-line{
  font-family:var(--ar-display); font-weight:700;
  font-size:clamp(42px,8.5vw,104px); line-height:1.6; color:var(--ink);
}
.promise-b{color:var(--gold-deep)}
[data-theme="night"] .promise-b{color:var(--night-gold)}
.promise .en-mirror{margin-top:14px; font-size:clamp(14px,1.6vw,18px)}

/* ── 7 · the diagnosis session ─────────────────────────────── */
.diag-lede{max-width:580px; margin:14px auto 0; color:var(--muted)}
.diag-list{
  list-style:none; max-width:420px; margin:34px auto 0; text-align:start;
}
.diag-list li{
  display:flex; align-items:baseline; gap:14px;
  padding:14px 4px; border-bottom:1px solid var(--hairline); font-size:16.5px;
}
.diag-list li:last-child{border-bottom:none}
.d-dot{width:9px; height:9px; border-radius:50%; background:var(--border); flex:none; position:relative; top:-2px}
.d-dot--lit{background:var(--gold)}
.diag-cta{margin-top:40px}

/* ── 8 · footer ────────────────────────────────────────────── */
.site-footer{padding-top:0}
.zigzag--footer{margin-bottom:clamp(40px,7vh,64px)}
.footer-inner{text-align:center; padding:0 24px clamp(48px,7vh,72px)}
.footer-mark{color:var(--gold); margin-bottom:18px}
.footer-watch{font-family:var(--ar-display); font-weight:700; font-size:24px; margin-bottom:22px}
.footer-legal{font-weight:500; font-size:15.5px}
.footer-latin{font-family:var(--la-text); font-size:13px; color:var(--faint); margin-top:4px}
.footer-links{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:24px; font-size:15px}
.footer-links a{color:var(--muted); transition:color .25s ease}
.footer-links a:hover{color:var(--gold-deep)}
.footer-sep{width:7px; height:7px; background:var(--gold); transform:rotate(45deg)}
.footer-copy{margin-top:26px; font-size:13px; color:var(--faint)}

/* ── floating WhatsApp ─────────────────────────────────────── */
.wa-float{
  position:fixed; bottom:24px; inset-inline-start:24px; z-index:45;
  width:56px; height:56px; border-radius:50%;
  background:var(--ink); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  transition:transform .2s ease, background .5s ease, color .5s ease;
}
.wa-float:hover{transform:translateY(-2px)}
.wa-float:active{transform:scale(.98)}
[data-theme="night"] .wa-float{background:var(--raised); border:1px solid var(--border)}

/* ── keyframes — ignite and settle ─────────────────────────── */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ignite{from{opacity:0; transform:scale(0)} to{opacity:1; transform:scale(1)}}
/* the lit dot ignites and KEEPS a soft glow — it's the flame's tip in the dark */
@keyframes ignite-glow{
  0%{opacity:0; transform:scale(0)}
  70%{opacity:1; transform:scale(1.4); filter:drop-shadow(0 0 12px rgba(255,214,140,.95))}
  100%{opacity:1; transform:scale(1); filter:drop-shadow(0 0 7px rgba(217,164,65,.8))}
}
@keyframes rise{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
@keyframes sheen{from{background-position:140% 0} to{background-position:-140% 0}}
/* hero-only: the W breathes like a living flame; the glow blooms then holds */
@keyframes mark-flicker{
  0%,100%{filter:drop-shadow(0 0 10px rgba(217,164,65,.45))}
  35%{filter:drop-shadow(0 0 18px rgba(255,201,107,.7))}
  55%{filter:drop-shadow(0 0 8px rgba(217,164,65,.4))}
  78%{filter:drop-shadow(0 0 22px rgba(255,201,107,.78))}
}
@keyframes glow-bloom{
  from{opacity:0; transform:translate(-50%,-10%) scale(.4)}
  60%{opacity:1; transform:translate(-50%,-10%) scale(1.05)}
  to{opacity:.92; transform:translate(-50%,-10%) scale(1)}
}

/* ── responsive — verify at 380px ──────────────────────────── */
@media (max-width:900px){
  .industries-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .ember-track{max-width:420px}
  .arc{grid-template-columns:1fr}
  .arc-arrow{transform:rotate(-90deg); margin:0 auto}
  .paths-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  body{font-size:16px}
  .hero{padding-top:104px}
  .hero-ctas .btn{width:100%; text-align:center}
  .industries-grid{gap:12px}
  .site-header{padding:34px 16px 12px}
  .wa-float{bottom:18px; inset-inline-start:18px; width:52px; height:52px}
}

/* ── reduced motion — everything degrades to simple fades ──── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; transition-delay:0ms !important}
  .rv, .hero-h1, .hero-en, .hero-sub, .hero-ctas, .hero-wordmark, .hero-caption, .site-header{opacity:1; transform:none}
  .hero-mark .wmark-path, .zigzag--top path{stroke-dashoffset:0}
  .hero-mark .wmark-dot, .zigzag--top .zig-dot{opacity:1}
  [data-theme="night"] .hero-glow{opacity:.9; transform:translate(-50%,-10%) scale(1)}
  .divider .line{transform:scaleX(1)}
  .divider .diamond{transform:rotate(45deg) scale(1)}
  /* #cosmos stays — JS paints one static starfield, no travel */
}