/* ADFRATRES — product-studio landing (dark-first, dir-agnostic: logical properties)
   colour: bg #04070d / ink #eef4f2 / accent emerald #19d694 (flag nod) / steel-blue #4fb1f0 / amber #f0c674
   type: Unbounded (display, hero only) + Sora (body) + Space Mono (eyebrows) + Readex Pro (arabic)
   layout: sticky glass nav + scroll bar, big hero, mono ticker, KPI band,
           4-expertise grid, featured flagship card + 3-card portfolio, trust strip, contact */
:root{
  color-scheme:dark;
  --bg:#04070d; --bg2:#081019; --card:rgba(16,26,38,.72); --line:rgba(125,165,195,.16);
  --ink:#eef4f2; --muted:#93a6b5; --acc:#19d694; --acc2:#4fb1f0; --amber:#f0c674;
  --font-d:"Sora",system-ui,sans-serif; --font-h:"Unbounded","Sora",system-ui,sans-serif;
  --font-m:"Space Mono",monospace; --font-a:"Readex Pro","Sora",system-ui,sans-serif;
  --r:18px; --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-d);line-height:1.65;overflow-x:hidden}
[lang="ar"] body, html[dir="rtl"] body{font-family:var(--font-a)}
html[dir="rtl"]{--font-m:var(--font-a)}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.12;margin:0 0 .45em;text-wrap:balance}
h1{font-family:var(--font-h);font-weight:700}
h2{font-family:var(--font-h);font-weight:500;font-size:clamp(1.4rem,3vw,2.1rem)}
p{margin:.3em 0}
section{padding:96px 22px;max-width:var(--maxw);margin:0 auto;position:relative}
.eyebrow{color:var(--acc);font-family:var(--font-m);text-transform:uppercase;letter-spacing:4px;font-size:.7rem;margin-bottom:.5em}
.grad{background:linear-gradient(100deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* progress line */
#prog{position:fixed;top:0;inset-inline-start:0;height:2px;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));z-index:60}

/* FX — constellation canvas, perspective floor, drifting glows */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.6}
.floor{position:fixed;left:-25vw;right:-25vw;bottom:-16vh;height:50vh;z-index:-2;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(90deg,rgba(25,214,148,.14) 0 1px,transparent 1px 84px),
             repeating-linear-gradient(0deg,rgba(79,177,240,.09) 0 1px,transparent 1px 64px);
  transform:perspective(700px) rotateX(62deg);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 82%);
          mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 82%)}
.orb{position:fixed;border-radius:50%;filter:blur(100px);z-index:-2;opacity:.45;pointer-events:none}
.orb-a{width:44vw;height:44vw;inset-inline-start:-14vw;top:-16vw;background:radial-gradient(circle,#0d4a37,transparent 70%);animation:drift 30s ease-in-out infinite alternate}
.orb-b{width:38vw;height:38vw;inset-inline-end:-12vw;bottom:-14vw;background:radial-gradient(circle,#123c63,transparent 70%);animation:drift 36s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,5vh) scale(1.12)}}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;gap:24px;padding:12px 26px;background:rgba(4,7,13,.75);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-h);font-weight:700;letter-spacing:2px;font-size:.85rem}
.links{display:flex;gap:22px;font-size:.88rem;color:var(--muted)}
.links a:hover{color:var(--ink)}
.nav-right{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{background:transparent;color:var(--muted);border:0;padding:6px 11px;cursor:pointer;font:inherit;font-size:.8rem}
.lang button.on{background:var(--acc);color:#04121b}
.lang button:not(.on):hover{color:var(--ink)}

/* ctas */
.cta{display:inline-block;border-radius:999px;font-weight:600;transition:transform .2s, box-shadow .2s}
.cta-s{padding:8px 16px;font-size:.78rem}
.cta-m{padding:13px 28px;font-size:.95rem}
.cta-s,.cta-m{background:linear-gradient(100deg,var(--acc),#0fae78);color:#04121b;box-shadow:0 4px 26px rgba(25,214,148,.3)}
.cta-ghost{padding:12px 26px;font-size:.95rem;border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.02)}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(25,214,148,.4)}

/* hero */
.hero{min-height:88vh;display:flex;align-items:center;text-align:center;padding-top:140px;padding-inline:20px}
.hero-inner{max-width:880px;margin:0 auto}
.hero .badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.74rem;font-family:var(--font-m);letter-spacing:1px;color:var(--muted);background:rgba(255,255,255,.03);margin-bottom:24px}
.hero h1{font-size:clamp(1.7rem,5.4vw,3.5rem);letter-spacing:-.5px}
.hero h1 .line{display:block}
.hero .sub{color:var(--muted);font-size:clamp(.96rem,1.5vw,1.12rem);max-width:640px;margin:20px auto 32px}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.scroll-hint{display:block;width:26px;height:44px;border:2px solid var(--line);border-radius:999px;margin:52px auto 0;position:relative}
.scroll-hint span{position:absolute;inset-inline-start:50%;top:9px;width:4px;height:9px;border-radius:2px;background:var(--acc);transform:translateX(-50%);animation:drop 1.6s infinite}
@keyframes drop{0%{opacity:0;translate:0 -4px}30%{opacity:1}100%{opacity:0;translate:0 12px}}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.02);padding:11px 0}
.ticker-track{display:flex;white-space:nowrap;animation:tick 30s linear infinite;width:max-content}
.ticker-track span{padding-inline-end:64px;font-size:.82rem;font-family:var(--font-m);letter-spacing:1px;color:var(--muted)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] .ticker-track{animation-name:tick-rtl}
@keyframes tick-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* studio statement */
.studio-p{color:var(--muted);max-width:820px;font-size:clamp(1rem,1.8vw,1.2rem)}

/* cards */
.cards,.feat-grid,.port-grid{display:grid;gap:14px;margin-top:38px}
.cards{grid-template-columns:repeat(3,1fr)}
.feat-grid{grid-template-columns:repeat(2,1fr)}
.port-grid{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;backdrop-filter:blur(10px);transition:border-color .25s, transform .25s}
.card:hover{border-color:var(--acc);transform:translateY(-3px)}
.card.k{text-align:center}
.kv b{font-size:3.1rem;font-family:var(--font-h);background:linear-gradient(100deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.kv .unit{font-size:1.1rem;color:var(--acc);margin-inline-start:4px;font-family:var(--font-h)}
.card.k p{color:var(--muted);font-size:.88rem}
.card.f .ic{width:44px;height:44px;border-radius:12px;background:rgba(25,214,148,.1);display:grid;place-items:center;color:var(--acc);margin-bottom:14px}
.card.f .ic svg{width:24px;height:24px}
.card.f h3{font-size:1.02rem}
.card.f p{color:var(--muted);font-size:.9rem}

/* featured flagship + portfolio */
.flag{margin-top:38px;border-radius:20px;padding:1px;background:linear-gradient(120deg,rgba(25,214,148,.65),rgba(79,177,240,.28),rgba(25,214,148,.15))}
.flag-in{background:rgba(8,16,25,.92);border-radius:19px;padding:26px 28px}
.flag-in p{color:var(--muted);font-size:.95rem;max-width:760px}
.port-grid{margin-top:14px}
.port-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.st{font-size:.66rem;font-weight:600;padding:4px 10px;border-radius:999px;letter-spacing:.5px;white-space:nowrap}
.st-flag{background:rgba(25,214,148,.14);color:var(--acc);border:1px solid rgba(25,214,148,.45)}
.st-done{background:rgba(240,198,116,.14);color:var(--amber);border:1px solid rgba(240,198,116,.4)}
.st-dev{background:rgba(79,177,240,.12);color:var(--acc2);border:1px solid rgba(79,177,240,.35)}
.st-soon{background:rgba(25,214,148,.12);color:var(--acc);border:1px solid rgba(25,214,148,.35)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chips span{font-size:.7rem;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted)}
.port-grid .card h3{font-size:1.05rem}
.port-grid .card p{color:var(--muted);font-size:.88rem}

/* trust */
.trust{text-align:center}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.trust-row>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.trust-row b{display:block;font-size:.92rem;margin-bottom:4px}
.trust-row span{color:var(--muted);font-size:.8rem}

/* contact */
.contact{text-align:center;padding-top:64px;padding-bottom:116px}
.contact .sub{color:var(--muted)}
.ct-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.area{color:var(--muted);font-size:.82rem;margin-top:20px}

/* footer */
footer{border-top:1px solid var(--line);padding:26px 22px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}

/* reveal: default visible, animated in only when GSAP is present */
[data-reveal]{opacity:1}
@media(max-width:900px){.cards,.feat-grid,.port-grid,.trust-row{grid-template-columns:1fr}.links{display:none}}
@media(prefers-reduced-motion:reduce){.floor,.orb,.ticker-track,.scroll-hint span{animation:none}html{scroll-behavior:auto}}