/* OS Agency — brand tokens from BRAND GUIDLINE 2026 v1.0 (Color System + Typography) */
:root {
  --cyan: #00AEEF;     /* Ocean Cyan */
  --cyan-dark: #0090C6;
  --ink: #000000;      /* Deep Black */
  --off: #F5F7F8;      /* Off White */
  --gray: #E6E7E8;     /* Apple Gray */
  --mute: #5B6670;
}
html { scroll-behavior: smooth; }
body { font-family: 'Tajawal', 'Nunito Sans', sans-serif; }
[dir="ltr"] body, html[dir="ltr"] body { font-family: 'Nunito Sans', 'Tajawal', sans-serif; }
.font-latin { font-family: 'Nunito Sans', 'Tajawal', sans-serif; }
::selection { background: rgba(0,174,239,.25); }

/* Graphic element 5.2 — dot grid */
.dots { background-image: radial-gradient(currentColor 1.5px, transparent 1.5px); background-size: 12px 12px; color: var(--cyan); }

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
.js .reveal.visible { opacity: 1; transform: none; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.animate-rise { animation: rise-in .7s cubic-bezier(.16,1,.3,1) both; }

/* Nav gets a soft shadow once the page scrolls */
nav.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); }

/* Floating photo chip in the hero */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.animate-float { animation: float 5s ease-in-out infinite; }

/* Lightbox (portfolio) */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); max-height: 92vh; }
.lightbox::backdrop { background: rgba(0,0,0,.85); backdrop-filter: blur(4px); }
.lightbox img { max-width: min(96vw, 1200px); max-height: 92vh; width: auto; height: auto; border-radius: 1rem; display: block; }
.lightbox-close { position: fixed; top: 1rem; inset-inline-end: 1rem; width: 44px; height: 44px; border-radius: 9999px; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; }
.lightbox-trigger { cursor: zoom-in; }

/* Clients marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* FAQ */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { transition: transform .3s ease, background-color .3s, color .3s; }
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--cyan); border-color: var(--cyan); color: #fff; }

/* Form select arrow */
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235B6670'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 1rem center; background-size: 1.25em; }
html[dir="ltr"] select { background-position: right 1rem center; }

/* Blog */
.blog-filter.is-active { background: #000; color: #fff; border-color: #000; }
.article { font-size: 1.125rem; line-height: 1.9; color: #1a1a1a; }
.article > * + * { margin-top: 1.25em; }
.article h2 { font-size: 1.6rem; font-weight: 800; margin-top: 2.2em; line-height: 1.3; }
.article h3 { font-size: 1.25rem; font-weight: 800; margin-top: 1.8em; }
.article p { margin: 0; }
.article ul, .article ol { padding-inline-start: 1.5em; }
.article ul { list-style: disc; } .article ol { list-style: decimal; }
.article li + li { margin-top: .5em; }
.article li::marker { color: var(--cyan); font-weight: 700; }
.article strong { color: #000; font-weight: 800; }
.article a { color: var(--cyan-dark); text-decoration: underline; text-underline-offset: 3px; }
.article blockquote { border-inline-start: 4px solid var(--cyan); padding-inline-start: 1.25em; color: var(--mute); font-weight: 500; }
.article img { border-radius: 1rem; border: 1px solid var(--gray); }
.article code { background: var(--gray); border-radius: .35em; padding: .1em .4em; font-size: .9em; }
.article hr { border: 0; border-top: 1px solid var(--gray); margin: 2.5em 0; }

/* Legal text */
.legal p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}