/* OpsWithAI — site styles (v3 design) */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Arabic glyphs only; Latin text on the Arabic page falls through to Manrope / Instrument Sans. */
@font-face {
  font-family: "Readex Pro";
  src: url("/fonts/readex-pro-arabic.woff2") format("woff2");
  font-weight: 160 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  --ink: #0b0b12; --body: #5c5f72; --paper: #ffffff; --mist: #f5f6fa;
  --line: #e7e8ef; --indigo: #7c3aed; --cyan: #e8478f; --violet: #a855f7;
  --magenta: #c02f74; --emerald: #00996f; --amber: #c4690f;
  --grad: linear-gradient(100deg, #7c3aed 0%, #b13ad0 45%, #e8478f 100%);
  --ease: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
/* The header wraps onto three rows on narrow screens, so in-page links need more room. */
@media (max-width: 640px) { html { scroll-padding-top: 170px; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1,h2,h3,h4 { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--indigo); text-underline-offset: 3px; }
a:hover { color: #6d28d9; }
::selection { background: rgba(124,58,237,0.18); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Motion ---------- */
@keyframes float1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6%,-8%,0) scale(1.18); } }
@keyframes float2 { 0%,100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-7%,6%,0) scale(0.95); } }
@keyframes sheen { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes rise { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.grad-text { background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s linear infinite; }

.rise-1 { animation: rise .8s .05s both; }
.rise-2 { animation: rise .9s .12s both; }
.rise-3 { animation: rise .9s .26s both; }
.rise-4 { animation: rise .9s .4s both; }
.rise-5 { animation: rise .9s .54s both; }
.rise-card { animation: rise 1s .45s both; }
.rise-sub-0 { animation: rise .8s both; }
.rise-sub-1 { animation: rise .9s .1s both; }
.rise-sub-2 { animation: rise .9s .22s both; }

/* Content stays visible without JS; reveal only arms once site.js runs. */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal="in"] { opacity: 1; transform: none; }

[data-card] { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease; }
[data-card]:hover { transform: translateY(-8px); box-shadow: 0 26px 60px -22px rgba(11,11,18,0.28); border-color: #cfd2e6; }

[data-cta] { position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s ease; }
[data-cta]:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -14px rgba(124,58,237,0.7); }
[data-cta]::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent); transform: skewX(-18deg); transition: left .6s ease; }
[data-cta]:hover::after { left: 160%; }

[data-link] { position: relative; }
[data-link]::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
[data-link]:hover::after { transform: scaleX(1); transform-origin: left; }

[data-row] { transition: background .35s ease, padding-inline-start .35s var(--ease); }
[data-row]:hover { background: var(--mist); padding-inline-start: 14px; }

/* ---------- Layout ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { max-width: 1180px; margin: 0 auto; padding: 104px 24px; }
.subpage { max-width: 1180px; margin: 0 auto; padding: 84px 24px 40px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr)); gap: var(--gap, 22px); }

.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--grad); z-index: 60; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-inline-end: auto; }
.brand:hover { color: var(--ink); }
.brand svg { display: block; overflow: visible; }
.brand span { font-family: Manrope, sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.site-nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.site-nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--body); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 16.5px; padding: 15px 28px; border-radius: 999px; }
.btn .arrow { font-size: 13px; }
.btn--dark { background: var(--ink); color: #fff; gap: 7px; font-size: 14.5px; padding: 10px 18px; }
.btn--dark .arrow { font-size: 12px; }
.btn--dark:hover { color: #fff; }
.btn--grad { background: var(--grad); color: #fff; }
.btn--grad:hover { color: #fff; }
.btn--glow { box-shadow: 0 14px 34px -16px rgba(124,58,237,0.85); }
.btn--outline { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.btn--outline:hover { color: var(--ink); }
.btn--white { background: #fff; color: var(--ink); padding: 14px 26px; }
.btn--white:hover { color: var(--ink); }

/* ---------- Type helpers ---------- */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo); margin-bottom: 16px; }
.eyebrow--on-dark { color: #9aa0ff; }
.h2 { font-size: clamp(34px, 4.2vw, 52px); }
.h1-sub { font-size: clamp(42px, 5.6vw, 72px); margin-bottom: 22px; max-width: 19ch; text-wrap: balance; }
.lede { font-size: 19px; line-height: 1.6; color: var(--body); max-width: 58ch; }
.muted { color: var(--body); }
.label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.blobs { position: absolute; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; }
.hero .blobs { inset: -20% -10% auto -10%; height: 130%; filter: blur(90px); opacity: 0.42; }
.hero__fade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, transparent 40%, #ffffff 90%); }
.hero__inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 92px 24px 84px; --min: 340px; --gap: 60px; align-items: center; }
.pill-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.8); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; padding: 7px 15px 7px 9px; font-size: 13.5px; font-weight: 500; color: var(--body); margin-bottom: 28px; }
.pill-badge i { width: 7px; height: 7px; border-radius: 50%; background: #00c07a; }
.hero h1 { font-size: clamp(46px, 6.4vw, 84px); margin: 0 0 26px; text-wrap: balance; }
.hero h1 > span { display: block; }
.hero__intro { font-size: 19px; line-height: 1.62; max-width: 47ch; color: var(--body); margin: 0 0 34px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.engagement { background: rgba(255,255,255,0.78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 24px; padding: 30px 28px; box-shadow: 0 30px 70px -34px rgba(11,11,18,0.35); }
.engagement__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.engagement__head .label { letter-spacing: 0.1em; color: var(--body); }
.tag { font-size: 12.5px; font-weight: 600; color: var(--indigo); background: rgba(124,58,237,0.09); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.steps { display: flex; flex-direction: column; gap: 22px; }
.steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 15px; align-items: start; }
.num-chip { width: 34px; height: 34px; border-radius: 12px; background: var(--chip); color: var(--accent); font-family: Manrope, sans-serif; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.steps strong { font-family: Manrope, sans-serif; font-weight: 700; font-size: 18.5px; letter-spacing: -0.02em; display: block; margin-bottom: 3px; }
.steps li > span > span { font-size: 15px; color: var(--body); }

.marquee { position: relative; border-top: 1px solid var(--line); overflow: hidden; background: rgba(245,246,250,0.6); }
.marquee__track { display: flex; width: max-content; animation: marquee 30s linear infinite; padding: 15px 0; }
.marquee__group { display: flex; gap: 40px; padding-right: 40px; font-size: 13.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--body); white-space: nowrap; }

/* ---------- Accents (set per element) ---------- */
.a-indigo  { --accent: var(--indigo);  --chip: rgba(124,58,237,0.09); }
.a-violet  { --accent: var(--violet);  --chip: rgba(168,85,247,0.1); }
.a-magenta { --accent: var(--magenta); --chip: rgba(232,71,143,0.12); }
.a-emerald { --accent: var(--emerald); --chip: rgba(0,153,111,0.11); }
.a-emerald-2 { --accent: var(--emerald); --chip: rgba(0,192,122,0.12); }
.a-amber   { --accent: var(--amber);   --chip: rgba(214,116,26,0.12); }

/* ---------- Cards ---------- */
.section-intro { max-width: 640px; margin-bottom: 56px; }
.section-intro .h2 { margin-bottom: 18px; }
.section-intro p { font-size: 18px; line-height: 1.6; color: var(--body); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; }
.card h2, .card h3 { font-size: 27px; }
.card p { font-size: 16px; line-height: 1.6; color: var(--body); }

.service { gap: 16px; }
.service__icon { width: 46px; height: 46px; border-radius: 15px; background: var(--chip); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 21px; }
.service .label { color: var(--accent); margin-bottom: 8px; }
.service h3 { font-size: 26px; margin-bottom: 10px; }
.service ul { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); flex: 1; }
.service li { font-size: 15px; color: var(--body); display: flex; gap: 10px; }
.service li::before { content: "—"; color: var(--accent); }
.card-link { align-self: flex-start; font-weight: 600; font-size: 15.5px; text-decoration: none; color: var(--accent); }
.card-link:hover { color: var(--accent); }

.pill-label { align-self: flex-start; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: var(--chip); border-radius: 999px; padding: 5px 13px; }

.step-card { background: var(--mist); border: 1px solid transparent; border-radius: 20px; padding: 28px 24px; }
.step-card__num { font-family: Manrope, sans-serif; font-weight: 800; font-size: 15px; color: var(--accent); margin-bottom: 16px; }
.step-card h3 { font-size: 22px; margin-bottom: 9px; }
.step-card p { font-size: 15.5px; line-height: 1.6; color: var(--body); }

.check-card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; }
.check-card .num-chip { display: flex; width: 38px; height: 38px; border-radius: 13px; margin-bottom: 18px; }
.check-card h2 { font-size: 23px; margin-bottom: 9px; }
.check-card p { font-size: 15.5px; line-height: 1.6; color: var(--body); }

.stat-card { background: var(--mist); border-radius: 20px; padding: 30px 26px; }
.stat-card__title { font-family: Manrope, sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.03em; margin-bottom: 8px; }
.stat-card p { font-size: 15.5px; color: var(--body); }

/* ---------- Dark panels ---------- */
.dark-band { position: relative; overflow: hidden; max-width: 1180px; margin: 0 auto; background: var(--ink); border-radius: 34px; color: #fff; }
.dark-band h2, .dark-band h3 { color: #fff; }
.dark-band .blobs { inset: 0; }
.dark-copy { color: #b9bbcc; }

.exec { padding: 0 24px; }
.exec .blobs { filter: blur(80px); opacity: 0.5; }
.exec__inner { position: relative; padding: clamp(40px, 6vw, 88px) clamp(24px, 4.5vw, 56px); --min: 320px; --gap: 60px; align-items: start; }
.exec h2 { margin-bottom: 20px; }
.exec__copy { font-size: 18px; line-height: 1.65; margin-bottom: 32px; max-width: 46ch; }
.questions li { border-top: 1px solid rgba(255,255,255,0.14); padding: 22px 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; border-radius: 10px; }
.questions li:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.questions li > span:first-child { font-size: 13px; font-weight: 600; color: #9aa0ff; }
.questions li > span:last-child { font-family: Manrope, sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -0.025em; line-height: 1.3; }
.questions li[data-row]:hover { color: var(--ink); }

.cta-band { padding: 104px 24px; }
.cta-band .dark-band { text-align: center; }
.cta-band .blobs { filter: blur(90px); opacity: 0.55; }
.cta-band__inner { position: relative; padding: 96px 32px; }
.cta-band .eyebrow { margin-bottom: 18px; }
.cta-band h2 { font-size: clamp(38px, 5.2vw, 64px); margin: 0 auto 20px; max-width: 15ch; }
.cta-band p { font-size: 18px; line-height: 1.6; margin: 0 auto 34px; max-width: 50ch; }
.cta-band .btn--white { font-size: 17px; padding: 16px 32px; }

.score { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: 28px; padding: 44px 40px; max-width: 800px; }
.score h2 { font-size: 34px; margin-bottom: 12px; color: #fff; }
.score p { font-size: 17px; line-height: 1.6; margin-bottom: 26px; }
.score__blob { position: absolute; right: -12%; top: -60%; width: 50%; height: 220%; border-radius: 50%; background: #7c3aed; filter: blur(80px); opacity: 0.5; animation: float2 22s ease-in-out infinite; }

/* ---------- Region ---------- */
.region { background: var(--mist); border-block: 1px solid var(--line); }
.region__inner { max-width: 1180px; margin: 0 auto; padding: 90px 24px; --min: 320px; --gap: 60px; align-items: center; }
.region h2 { font-size: clamp(32px, 3.8vw, 46px); margin-bottom: 18px; }
.region__copy { font-size: 17px; line-height: 1.65; color: var(--body); margin-bottom: 24px; max-width: 50ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-size: 14px; font-weight: 500; color: var(--body); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; }
.guide-card { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 32px 30px; }
.guide-card .label { color: var(--violet); margin-bottom: 12px; }
.guide-card h3 { font-size: 30px; margin-bottom: 12px; }
.guide-card p { font-size: 16px; line-height: 1.6; color: var(--body); margin-bottom: 22px; }
.guide-card a { font-weight: 600; font-size: 16px; text-decoration: none; color: var(--violet); }

/* ---------- Table ---------- */
.table-wrap { border: 1px solid var(--line); border-radius: 20px; overflow-x: auto; }
.table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 16px; }
.table-wrap thead tr { background: var(--mist); }
.table-wrap th { text-align: start; padding: 15px 22px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body); }
.table-wrap td { padding: 17px 22px; border-top: 1px solid var(--line); color: var(--body); }
.table-wrap td:first-child { font-weight: 600; color: var(--ink); }

/* ---------- About ---------- */
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 32px 30px; }
.contact-card h2 { font-size: 28px; margin-bottom: 22px; }
.contact-list { display: flex; flex-direction: column; gap: 14px; margin: 0 0 26px; }
.contact-list div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; font-size: 16px; }
.contact-list dt { color: var(--body); }
.contact-list dd { margin: 0; }
.contact-card .btn { font-size: 16px; padding: 13px 24px; }

/* ---------- Long-form sections (FAQ, preparation steps) ---------- */
.long-section { max-width: 880px; margin-top: 88px; }
.long-section > h2 { font-size: clamp(30px, 3.6vw, 38px); margin-bottom: 12px; }
.long-section > .intro { font-size: 17px; line-height: 1.65; color: var(--body); margin-bottom: 28px; max-width: 62ch; }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: Manrope, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 500; font-size: 26px; line-height: 1; color: var(--indigo); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--indigo); }
.faq details p { font-size: 16px; line-height: 1.65; color: var(--body); padding: 0 0 24px; max-width: 68ch; }

.prep ol { list-style: none; margin: 0; padding: 0; }
.prep li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 26px 0; border-top: 1px solid var(--line); }
.prep li:last-child { border-bottom: 1px solid var(--line); }
.prep li > span { font-family: Manrope, sans-serif; font-weight: 800; font-size: 15px; color: var(--accent, var(--indigo)); padding-top: 5px; }
.prep h3 { font-size: 22px; margin-bottom: 8px; }
.prep p { font-size: 16px; line-height: 1.65; color: var(--body); }

.prose h2 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 14px; }
.prose p { font-size: 17px; line-height: 1.65; color: var(--body); }
.prose p + p { margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--paper); }
.site-footer__grid { max-width: 1180px; margin: 0 auto; padding: 56px 24px 34px; --min: 200px; --gap: 40px; }
.site-footer .brand { margin: 0 0 14px; }
.site-footer .brand span { font-size: 18px; }
.site-footer__col { display: flex; flex-direction: column; gap: 11px; }
.site-footer__col .label { color: var(--body); }
.site-footer__col a { align-self: flex-start; font-size: 15px; text-decoration: none; color: var(--ink); }
.site-footer__bottom { max-width: 1180px; margin: 0 auto; padding: 0 24px 36px; font-size: 14px; color: var(--body); }

/* ---------- Arabic (RTL) ---------- */
html[lang="ar"] body { font-family: "Readex Pro", "Instrument Sans", system-ui, sans-serif; }
html[lang="ar"] :is(h1, h2, h3, h4, .steps strong, .brand span, .questions li > span:last-child) { font-family: "Readex Pro", "Manrope", system-ui, sans-serif; }
/* Letter-spacing breaks the joins between Arabic letters. */
html[lang="ar"] * { letter-spacing: normal !important; }
html[lang="ar"] :is(h1, h2, h3, h4) { font-weight: 700; line-height: 1.3; }
html[lang="ar"] .hero h1 { line-height: 1.22; }
html[lang="ar"] :is(.hero__intro, .section-intro p, .card p, .step-card p, .exec__copy, .region__copy, .guide-card p, .cta-band p) { line-height: 1.85; }
html[lang="ar"] .questions li > span:last-child { line-height: 1.55; }
html[lang="ar"] .grad-text { padding-block: .1em; }
.marquee__track { direction: ltr; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}