/* ProTech Innovations — Arabic (RTL) homepage presentation.
   Agent 17 scope: ar/index.html only. System fonts only, no webfonts,
   no external requests. All visible copy is untouched (CSS only).
   Shared token names per DESIGN-CONTRACT.md. */
:root{
  --navy:#0B1220; --teal:#20C9C0; --blue:#0E5BD6; --ink:#0B1220;
  --muted:#5B6472; --paper:#FFFFFF; --line:#E5E7EB;
  --radius-sm:8px; --radius-md:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 24px 48px rgba(11,18,32,.16);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.15s; --dur-normal:.5s; --dur-slow:.8s;
}

/* Arabic-friendly system stack. Letter-spacing is removed from Arabic
   headings: tracking can break Arabic letter joining in some renderers,
   and uppercase is meaningless for Arabic script. */
body{
  font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic",system-ui,-apple-system,Arial,sans-serif;
  font-size:17px; line-height:1.9; text-align:start;
}
.hero h1{font-size:clamp(32px,5vw,50px); line-height:1.35; letter-spacing:0; max-width:780px}
h2,h3{letter-spacing:0}
h2{line-height:1.4}
h3{line-height:1.5}
.eyebrow{letter-spacing:0; text-transform:none; font-size:14px}
.hero p.lead{line-height:1.85}

/* Hero: layered glows over the existing dot pattern, plus an abstract
   geometric SVG (aria-hidden, no text) on the inline-end side. The SVG
   is absolutely positioned with reserved space, so it never shifts layout,
   and it is hidden below 1200px so it can never collide with the text. */
.hero{
  background-image:
    radial-gradient(600px 300px at 15% 20%,rgba(32,201,192,.16),transparent 70%),
    radial-gradient(500px 260px at 8% 85%,rgba(14,91,214,.22),transparent 70%),
    radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:auto,auto,22px 22px;
  overflow:hidden;
}
.hero .notice{max-width:780px}
.hero-art{
  position:absolute; inset-block-start:50%; inset-inline-end:8px;
  transform:translateY(-50%); width:240px; height:240px;
  opacity:.5; pointer-events:none; display:none;
}
@media(min-width:1200px){ .hero-art{display:block} }

/* Hero call-to-action row: flex wrap (with the shared ≤640px column rule
   in main.css still applying). The .btn margin override keeps the row
   tight; the paragraph's own inline margin-top stays. */
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.hero-cta .btn{margin-top:0}
.btn:hover{transform:translateY(-1px)}

/* Section rhythm: a small teal marker above each section heading.
   Decorative only (CSS-generated, no text). In RTL it sits at the
   inline-start (right) edge automatically. */
main h2::before{
  content:""; display:block; width:36px; height:4px;
  background:var(--teal); border-radius:2px; margin-bottom:14px;
}

/* Cards: teal top accent + gentle lift on hover (transform + shadow only). */
.card{
  border-block-start:3px solid var(--teal);
  transition:transform var(--dur-normal) var(--ease-out),
             box-shadow var(--dur-normal) var(--ease-out);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}

/* Methodology pills (rules moved from the old inline <style>, polished).
   Pills are plain spans on this page, not interactive controls. */
.steps{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.step-pill{
  display:inline-block; padding:12px 18px;
  border:1px solid var(--line); border-radius:999px;
  background:#fff; font-weight:700; box-shadow:var(--shadow-sm);
}
.step-pill.active{background:var(--navy); color:#fff; border-color:var(--navy)}

/* Notices: keep the amber draft-notice treatment, add a stronger
   inline-start accent so it reads as a callout in RTL flow. */
.notice{
  background:#FFF7E6; border:1px solid #E8C87A;
  border-inline-start:4px solid #D9A441;
  padding:18px 20px; border-radius:12px; color:var(--navy); line-height:1.8;
}

/* Footer: teal top rule; link blocks already come from main.css. */
footer.site{border-block-start:4px solid var(--teal)}
footer.site .grid a{display:block; margin:6px 0}

/* Skip link: logical positioning so it appears at the inline-start
   (right) edge in RTL instead of the physical left edge. */
.skip-link{left:auto; inset-inline-start:-9999px}
.skip-link:focus{left:auto; inset-inline-start:12px}

/* Reveal motion (contract classes). Content is hidden ONLY once JS has
   added .js-reveal to <html>, so a JS failure still shows everything.
   Stagger applies to cards inside a grid only. */
.js-reveal .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-normal) var(--ease-out),
             transform var(--dur-normal) var(--ease-out);
}
.js-reveal .reveal.is-visible{opacity:1; transform:none}
.js-reveal .grid .reveal:nth-child(2){transition-delay:.07s}
.js-reveal .grid .reveal:nth-child(3){transition-delay:.14s}
.js-reveal .grid .reveal:nth-child(4){transition-delay:.21s}

@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1 !important; transform:none !important; transition:none !important}
}