/* © RIVAANTECH SOLUTION L.L.C. All rights reserved. */
:root{
  --bg:#F6F5F1; --card:#FFFFFF; --ink:#121211; --muted:#5E5D59; --line:#E2E0D9; --soft:#EDEBE5;
  --live:#1F9D55; --accent:#FF5B1F;
  --sans:"Geist","Segoe UI",system-ui,-apple-system,sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --max:1280px; --pad:clamp(20px,4vw,40px); --r:24px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{top:12px}
.container{width:100%;max-width:calc(var(--max) + var(--pad) * 2);margin-inline:auto;padding-inline:var(--pad)}
.serif{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
.eyebrow{font:500 .8125rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,245,241,.82);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600}
.mono{width:40px;height:40px;display:block;flex:0 0 auto}
.mono img{width:40px;height:40px;display:block;border-radius:10px}
.wordmark{display:flex;flex-direction:column;line-height:1.15}
.wordmark .wm-1{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.wordmark .wm-2{font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.9375rem;color:var(--muted)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);background:var(--soft)}

/* Mobile nav toggle (hidden by default; shown under the .nav-links breakpoint below) */
.nav-toggle{display:none;position:relative;flex:0 0 auto;width:40px;height:40px;padding:0;border-radius:999px;border:1px solid #8C8A82;background:var(--card);cursor:pointer}
.nav-toggle:hover{border-color:#6E6D69}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{position:absolute;left:50%;width:18px;height:2px;background:var(--ink);border-radius:2px;transform:translateX(-50%);transition:transform .2s ease,opacity .2s ease,background-color .2s ease}
.nav-toggle-bars{top:50%;margin-top:-1px}
.nav-toggle-bars::before{content:"";top:-6px}
.nav-toggle-bars::after{content:"";top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:0;transform:translateX(-50%) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:0;transform:translateX(-50%) rotate(-45deg)}
.mobile-nav{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--ink);font:500 .9375rem var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s ease, background-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-dark:hover{background:#2A2A28}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--soft)}
.btn-sm{min-height:40px;padding:0 18px}
.arrow{display:inline-block;transition:transform .2s}
.btn:hover .arrow,.card:hover .arrow{transform:translateX(3px)}

/* ===== Hero ===== */
.hero{padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,72px)}
.status{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.875rem;font-weight:500}
.status i{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px rgba(31,157,85,.15)}
.hero h1{margin-top:28px;font:600 clamp(2.6rem,7.2vw,6.2rem)/.98 var(--sans);letter-spacing:-.045em;max-width:17ch}
.hero h1 .serif{font-size:1.08em;letter-spacing:-.02em}
.hero-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end;margin-top:36px}
.hero-row p{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--muted);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line)}
.facts div{padding-block-start:22px;padding-inline-end:20px}
.facts div + div{padding-inline-start:20px;border-inline-start:1px solid var(--line)}
.facts b{display:block;font:600 clamp(1.8rem,3vw,2.6rem)/1 var(--sans);letter-spacing:-.03em}
.facts span{display:block;margin-top:8px;color:var(--muted);font-size:.9375rem}

/* Marquee of covers */
.marquee{margin-top:clamp(40px,5vw,64px);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:16px;width:max-content;animation:scroll 70s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track img{width:clamp(240px,24vw,340px);aspect-ratio:4/3;object-fit:cover;border-radius:16px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ===== Sections ===== */
.section{padding-block:clamp(64px,9vw,120px)}
.section + .section{border-top:1px solid var(--line)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font:600 clamp(2rem,4.4vw,3.6rem)/1.02 var(--sans);letter-spacing:-.035em;margin-top:10px}
.sec-head p{color:var(--muted);max-width:46ch}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid #8C8A82;background:var(--card);font:500 .875rem var(--sans);color:var(--ink);cursor:pointer}
.filters button span{color:var(--muted);font-size:.8125rem}
.filters button:hover{border-color:#BDBAB1}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.filters button[aria-pressed="true"] span{color:#B9B7B0}
.count{color:var(--muted);font-size:.9375rem;margin:-20px 0 24px}

/* Work grid */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(20px,2.5vw,32px);list-style:none;margin:0;padding:0}
.card{position:relative;display:flex;flex-direction:column;gap:18px}
.card .media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .media img{transform:scale(1.035)}
.card .view{position:absolute;inset-inline-start:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--card);color:var(--ink);font:500 .875rem var(--sans);box-shadow:0 8px 24px rgba(0,0,0,.14);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.card:hover .view,.card:focus-within .view{opacity:1;transform:none}
.card .meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:var(--muted);font-size:.875rem}
.card .meta .dot{width:4px;height:4px;border-radius:50%;background:#B5B2A9}
.card h3{font:600 clamp(1.4rem,2.2vw,1.75rem)/1.15 var(--sans);letter-spacing:-.025em}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card p{color:var(--muted);max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.8125rem;font-weight:500}
.tag.ar{background:#FBF1DC;border-color:#EFD9A8}
.tag.fig{background:#EFEAFB;border-color:#DCD2F5}

/* Services */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svc{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.svc .n{font:500 .875rem var(--sans);color:var(--muted)}
.svc h3{font:600 1.375rem/1.2 var(--sans);letter-spacing:-.02em}
.svc p{color:var(--muted);font-size:.9375rem}
.svc ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.9375rem}
.svc li{display:flex;gap:10px}
.svc li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--ink)}
.svc .time{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-weight:500;font-size:.9375rem;display:flex;justify-content:space-between}
.svc .time span{color:var(--muted);font-weight:400}

/* Process */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;padding-top:20px;border-top:2px solid var(--ink)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:500 .875rem var(--sans);color:var(--muted);margin-bottom:14px}
.steps b{display:block;font:600 1.25rem var(--sans);letter-spacing:-.02em;margin-bottom:6px}
.steps span{color:var(--muted);font-size:.9375rem}

/* About */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.about blockquote{margin:0;font:400 clamp(1.9rem,3.6vw,3rem)/1.12 var(--serif);font-style:italic;letter-spacing:-.01em}
.about .body p + p{margin-top:16px}
.about .body p{color:var(--muted)}
.about h3{font:600 .8125rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:32px 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:.875rem;font-weight:500}

/* Contact */
.contact{position:relative;overflow:hidden;border-radius:32px;background:var(--ink);color:var(--bg);padding:clamp(40px,7vw,96px) clamp(28px,6vw,80px)}
.contact h2{font:600 clamp(2.4rem,6vw,5rem)/1 var(--sans);letter-spacing:-.045em;max-width:14ch}
.contact h2 .serif{color:#F2C9B6}
.contact p{margin-top:20px;color:#BDBBB4;font-size:1.125rem;max-width:48ch}
.contact .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.contact .btn-light{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.contact .btn-outline{background:transparent;color:var(--bg);border-color:#79776F}
.contact .btn-outline:hover{background:#242422}
.contact :focus-visible{outline-color:var(--bg)}
.contact .orb{position:absolute;inset-inline-end:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;border:1px solid #3A3936}
.contact .orb::after{content:"";position:absolute;inset:60px;border-radius:50%;border:1px solid #2E2D2B}
.copied{margin-top:12px;font-size:.875rem;color:#9FD8B5;min-height:1.3em}

/* Footer */
.footer{padding-block:40px 56px}
.footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;color:var(--muted);font-size:.875rem}
.footer nav{display:flex;flex-wrap:wrap;gap:20px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* ===== Case study ===== */
.case-head{padding-block:clamp(40px,6vw,72px) clamp(28px,4vw,40px)}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-weight:500;font-size:.9375rem}
.back:hover{color:var(--ink)}
.case-head h1{margin-top:22px;font:600 clamp(2.6rem,7vw,5.6rem)/.98 var(--sans);letter-spacing:-.045em}
.case-head .lede{margin-top:20px;font-size:clamp(1.125rem,1.8vw,1.5rem);line-height:1.45;color:var(--muted);max-width:40ch}
.case-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:20px;align-items:start;margin-top:clamp(28px,4vw,48px);padding-top:24px;border-top:1px solid var(--line)}
.case-meta dt{font-size:.8125rem;color:var(--muted);margin-bottom:4px}
.case-meta dd{margin:0;font-weight:500}
.case-meta .cta{align-self:center}
.case-cover{border-radius:var(--r);overflow:hidden;background:var(--soft)}
.case-cover img{width:100%}
.block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,80px);padding:clamp(48px,7vw,96px) 0;border-bottom:1px solid var(--line)}
.block h2{font:600 clamp(1.5rem,2.4vw,2rem)/1.15 var(--sans);letter-spacing:-.025em}
.block .big{font-size:clamp(1.25rem,2vw,1.625rem);line-height:1.45;letter-spacing:-.01em}
.hl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hl div{padding:24px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.hl b{display:block;font:600 1.125rem/1.3 var(--sans);letter-spacing:-.01em;margin-bottom:8px}
.hl p{color:var(--muted);font-size:.9375rem}
.hl .k{display:block;font:500 .8125rem var(--sans);color:var(--muted);margin-bottom:18px}
.screens{padding:clamp(48px,7vw,96px) 0;border-bottom:1px solid var(--line)}
.screens h2{font:600 clamp(1.5rem,2.4vw,2rem)/1.15 var(--sans);letter-spacing:-.025em;margin-bottom:28px}
.stage{border-radius:var(--r);padding:clamp(20px,4vw,56px);display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center}
.stage.apps{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.stage.wins{grid-template-columns:minmax(0,1fr)}
.frame{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 24px 60px -24px rgba(0,0,0,.45)}
.frame .bar{display:flex;gap:6px;align-items:center;height:34px;padding:0 14px;background:#F1F2F4}
.frame .bar i{width:10px;height:10px;border-radius:50%;background:#D5D7DB}
.device{border-radius:34px;padding:9px;background:#0E0F12;box-shadow:0 24px 60px -24px rgba(0,0,0,.55)}
.device img{border-radius:26px;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top}
.win{border-radius:12px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(0,0,0,.5)}
.stage figcaption{grid-column:1 / -1;font-size:.875rem;opacity:.75}
.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:clamp(48px,7vw,96px) 0}
.next a{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.next .media{border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.next .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.next a:hover .media img{transform:scale(1.035)}
.next small{color:var(--muted);font-size:.875rem}
.next b{font:600 1.5rem var(--sans);letter-spacing:-.02em}
.notfound{padding:120px 0;text-align:center}

/* ===== Responsive ===== */
@media (max-width:1080px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
  .hl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-actions .btn.nav-cta{display:none}
  .mobile-nav:not([hidden]){display:block;position:absolute;inset-inline:0;top:100%;background:var(--card);border-bottom:1px solid var(--line);padding:8px var(--pad) 20px;box-shadow:0 20px 40px -24px rgba(0,0,0,.25);max-height:calc(100vh - 72px);overflow-y:auto}
  .mobile-nav-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .mobile-nav-links a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;text-decoration:none;font-weight:500;font-size:1rem;color:var(--ink)}
  .mobile-nav-links a:hover,.mobile-nav-links a[aria-current="page"]{background:var(--soft)}
  .mobile-nav-cta{display:flex;width:100%;margin-top:14px}
  .hero-row{grid-template-columns:minmax(0,1fr)}
  .hero-cta{justify-content:flex-start}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts div:nth-child(3){padding-inline-start:0;border-inline-start:0}
  .facts div:nth-child(n+3){padding-top:22px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .about{grid-template-columns:minmax(0,1fr)}
  .block{grid-template-columns:minmax(0,1fr)}
  .case-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-meta .cta{grid-column:1 / -1}
  .stage{grid-template-columns:minmax(0,1fr)}
  .stage .device{max-width:280px;margin-inline:auto}
  .stage.apps .device{max-width:none}
}
@media (max-width:560px){
  .services,.steps{grid-template-columns:minmax(0,1fr)}
  .next{grid-template-columns:minmax(0,1fr)}
  .stage.apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px}
  .stage.apps .device{padding:4px;border-radius:18px}
  .stage.apps .device img{border-radius:14px}
  .nav .btn-sm span.long{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .track{animation:none;flex-wrap:nowrap}
  .marquee{overflow-x:auto}
}

/* ===== Language switch ===== */
.nav-actions{display:flex;align-items:center;gap:8px}
.lang-btn{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #8C8A82;background:var(--card);color:var(--ink);font:500 .875rem "IBM Plex Sans Arabic",var(--sans);cursor:pointer}
.lang-btn:hover{border-color:#BDBAB1}
.lang-btn:lang(en){font-family:var(--sans)}

/* ===== Arabic / right-to-left ===== */
:root[lang="ar"]{--sans:"IBM Plex Sans Arabic","Geist","Segoe UI",Tahoma,sans-serif;--serif:"Amiri","IBM Plex Sans Arabic",serif}
:root[lang="ar"] body{line-height:1.8}
:root[lang="ar"] *{letter-spacing:0!important}
:root[lang="ar"] .serif{font-style:normal;font-weight:700;font-size:1.05em}
:root[lang="ar"] .hero h1,:root[lang="ar"] .case-head h1,:root[lang="ar"] .contact h2,:root[lang="ar"] .sec-head h2{line-height:1.25}
:root[lang="ar"] .hero h1 .serif{font-size:1.1em}
:root[lang="ar"] .eyebrow{text-transform:none;font-size:.875rem}
:root[lang="ar"] .about blockquote{font-style:normal;line-height:1.5}
:root[lang="ar"] .about h3{text-transform:none;font-size:.875rem}
:root[lang="ar"] .case-head h1{font-family:var(--sans)}
[dir="rtl"] .arrow:not(.ext){transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arrow:not(.ext),[dir="rtl"] .card:hover .arrow:not(.ext),[dir="rtl"] .next a:hover .arrow:not(.ext){transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .arrow.back-arrow{transform:scaleX(-1)}
.marquee{direction:ltr}
span[lang="en"],.tag[lang="en"]{unicode-bidi:isolate}
:root[lang="ar"] .hero h1{font-size:clamp(2.4rem,6.2vw,5.4rem);max-width:none}
:root[lang="ar"] .contact h2{max-width:none}