/* OFOQ SOFT — brand refinement. The supplied logo is displayed unmodified. */
@font-face {
  font-family: OfoqDisplay;
  src: url('../assets/fonts/tajawal-medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: OfoqDisplay;
  src: url('../assets/fonts/tajawal-bold.ttf') format('truetype');
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: OfoqLatin;
  src: url('../assets/fonts/manrope-semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
:root {
  --bg: #060c19;
  --cyan: #66ddff;
  --display: OfoqDisplay, OfoqArabic, Tahoma, sans-serif;
  --latin: OfoqLatin, Arial, sans-serif;
  --container: 1240px;
}
body {
  background-image: radial-gradient(ellipse at 90% 10%, #16315a18, transparent 45%);
}
h1, h2, h3, .button, .main-nav, .filter-button, summary {
  font-family: var(--display);
}
.section h2 {
  font-size: clamp(32px, 3.3vw, 46px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
.section-heading > p, .section-heading > div > p,
.about-copy > p, .why-intro > p, .contact-copy > p {
  font-size: 15px;
}
.gradient-text {
  background-image: linear-gradient(110deg, #93eaff, #559fff 45%, #4487fa 70%, #93eaff);
  background-size: 220% 100%;
  animation: spectral-shift 12s ease-in-out infinite;
}
.section-index, .step-number, .scope-stats strong {
  font-family: var(--latin);
}
.wordmark {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.brand-logo {
  width: 90px;
  height: 74px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.wordmark-en, .wordmark-en > span {
  font-family: var(--latin);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .4px;
}
.wordmark-ar {
  font-size: 9px;
  letter-spacing: 0;
  margin-top: 9px;
  color: #8aabc9;
}
.nav-shell { gap: 25px; }
.main-nav { gap: 24px; }
.main-nav a { font-size: 14px; font-weight: 500; }
.site-header.is-scrolled {
  background: #080f20e8;
  border-color: #578ed526;
  box-shadow: 0 10px 35px #00000013;
}
.site-header.is-scrolled .brand-logo { height: 53px; width: 66px; }
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, #65dfff, #307bff);
  transform: scaleX(0);
  transform-origin: right;
  z-index: 100;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .reading-progress {
    animation: reading-progress linear both;
    animation-timeline: scroll(root);
  }
}

/* A lit horizon and a restrained, visibility-aware particle constellation. */
.hero {
  padding-top: 152px;
  background: radial-gradient(ellipse at 25% 38%, #173d732b, transparent 55%),
    radial-gradient(ellipse at 100% 0%, #21447318, transparent 40%);
}
.constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .58;
}
.hero-grid {
  background-size: 58px 58px;
  opacity: .8;
  transform: perspective(900px) rotateX(12deg) scale(1.05);
}
.horizon-arc {
  position: absolute;
  bottom: -460px;
  left: -15%;
  width: 130%;
  height: 600px;
  border: 1px solid #388fff40;
  border-radius: 50%;
  box-shadow: 0 -15px 80px #2870ff0d, 0 -3px 14px #49beff0c;
  pointer-events: none;
}
.hero-copy { padding-block: 35px 48px; }
.hero-copy > .eyebrow {
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid #4c86ce35;
  border-radius: 30px;
  background: #13263b75;
  box-shadow: inset 0 1px 0 #9bcbff08;
  font-size: 12px;
}
.hero h1 {
  font-size: clamp(48px, 5.25vw, 74px);
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: 0;
  margin-block: 24px 22px;
}
.hero-title-line { display: block; }
.hero-description { font-size: 16px; line-height: 2; max-width: 455px; }
.hero-actions { margin-top: 29px; }
.hero-actions .button { font-size: 15px; min-height: 54px; }
.button {
  border-radius: 9px;
  border-color: #86bcff24;
  background: linear-gradient(115deg, #429eff, #2875ee 65%, #2761d7);
  box-shadow: inset 0 1px 0 #ffffff24, 0 9px 25px #1364e128;
  position: relative;
  overflow: hidden;
}
.button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 30%;
  height: 200%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, #ffffff20, transparent);
  transition: left .75s ease;
  pointer-events: none;
}
.button:hover::before { left: 135%; }
.button-ghost {
  background: #14243c44;
  border-color: #4d729654;
  box-shadow: inset 0 1px 0 #ffffff05;
}
.button-light { background: #f0f7ff; color: #183f78; }
.hero-note { color: #9ab0cc; }
.hero-capabilities {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 33px;
  padding-top: 19px;
  max-width: 415px;
  border-top: 1px solid #3d5f8035;
}
.hero-capabilities .mono { font-size: 7px; color: #5b83ad; letter-spacing: 1px; }
.hero-capabilities > span:last-child {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  color: #799abf;
}
.hero-capabilities i { width: 2px; height: 2px; background: #5795c9; border-radius: 50%; }
.hero-visual { margin-top: 0; }
.dashboard-device {
  border-color: #6188b894;
  box-shadow: 0 35px 75px #0009, 0 0 90px #276ef312, inset 0 1px 0 #bbd9ff20;
}
.window-bar { background: linear-gradient(90deg, #14223a, #1a2c49); }
.dashboard-chart { position: relative; overflow: hidden; }
.dashboard-chart::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #8bcdff45;
  box-shadow: 0 0 18px 4px #579fff10;
  animation: dashboard-scan 10s linear infinite;
  pointer-events: none;
}
.code-float { border-color: #749fd755; backdrop-filter: blur(16px); }
.phone-device { box-shadow: 10px 18px 35px #0008, 0 0 25px #54bdff10; }
.orbital-tracer {
  position: absolute;
  left: calc(50% - 2px);
  top: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #95dcff;
  box-shadow: 0 0 16px #60baff;
  z-index: -1;
  animation: orbital-trace 24s linear infinite;
}
.hero-bottom { margin-top: 48px; border-color: #6583b22a; }
.expertise-strip { background: linear-gradient(90deg, #0d1c3075, #0e192859, #10203875); }
.expertise-strip > .container { color: #bdd0e9; font-family: var(--display); font-size: 17px; }

/* Deeper cards, a blueprint carrying the real logo, and connected steps. */
.about-blueprint {
  min-height: 350px;
  border-radius: 14px;
  border-color: #4778a844;
  box-shadow: inset 0 0 70px #17325725, 0 25px 60px #00000015;
}
.blueprint-core {
  width: 172px;
  height: 172px;
  position: relative;
  background: radial-gradient(circle, #17395a, #0c1a30);
  border-color: #478fc69c;
}
.blueprint-core::before {
  content: '';
  position: absolute;
  inset: -20px;
  border: 1px dashed #5398d447;
  border-radius: 50%;
  animation: blueprint-orbit 48s linear infinite;
}
.blueprint-core img { width: 114px; height: 95px; object-fit: contain; }
.blueprint-core small { margin-top: 10px; font-size: 9px; }
.blueprint-item { width: 66px; height: 73px; top: calc(50% - 36px); font-size: 10px; padding-top: 13px; border-radius: 10px; }
.item-idea { right: 6%; }
.item-system { left: 6%; }
.service-card {
  border-color: #5782b226;
  background: linear-gradient(135deg, #12243a80, #0b1424 70%);
  padding: 31px 28px 24px;
  box-shadow: inset 0 1px 0 #badcff06;
  transform-style: preserve-3d;
  transition: border-color .3s, box-shadow .3s, transform .4s var(--ease);
}
.service-card h3 { font-size: 23px; font-weight: 700; }
.service-card > p { font-size: 14px; color: #9cb1ca; }
.service-icon {
  width: 49px;
  height: 49px;
  background: linear-gradient(140deg, #1b437356, #102037);
  border-color: #437dbd54;
  box-shadow: inset 0 1px 0 #9cdbff13, 0 5px 15px #00000015;
}
.service-icon .icon { transition: transform .35s, color .35s; }
.service-card:hover .service-icon .icon { transform: translateY(-2px); color: #94ddff; }
.motion-ready .service-card.is-visible:hover, .service-card:hover {
  transform: perspective(850px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px);
  border-color: #519de58c;
  box-shadow: inset 0 1px 0 #badcff12, 0 15px 40px #00000030, 0 0 25px #2b7dff07;
}
.service-bottom { color: #7e9ec6; }
.process-timeline::before { background: linear-gradient(270deg, #69bdff, #3584ed70, #38557230); }
.step-number { position: relative; font-size: 12px; }
.step-number::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid #498ed438;
  border-radius: 50%;
  transform: scale(.7);
  opacity: 0;
  transition: transform .8s var(--ease), opacity .8s;
}
.is-visible .step-number::after { opacity: 1; transform: scale(1); }
.process-timeline h3 { font-size: 19px; font-weight: 700; }
.process-timeline p { font-size: 12px; }
.process h2 { font-size: 40px; }

/* An editorial project composition: one featured system and two side concepts. */
.projects-grid[data-current-filter='all'] { grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: stretch; }
.projects-grid[data-current-filter='all'] .project-card:first-child { grid-row: span 2; }
.projects-grid[data-current-filter='all'] .project-card:first-child .project-preview { height: 365px; padding: 42px; }
.projects-grid[data-current-filter='all'] .project-card:first-child .project-body { padding: 30px; }
.projects-grid[data-current-filter='all'] .project-card:first-child h3 { font-size: 28px; }
.projects-grid[data-current-filter='all'] .project-card:not(:first-child) { display: grid; grid-template-columns: .8fr 1.2fr; }
.projects-grid[data-current-filter='all'] .project-card:not(:first-child) .project-preview { height: 100%; padding: 23px 15px; min-height: 265px; }
.projects-grid[data-current-filter='all'] .project-card:not(:first-child) .project-body { padding: 24px; }
.projects-grid[data-current-filter='all'] .project-card:not(:first-child) .mobile-frame { width: 74px; height: 145px; }
.projects-grid[data-current-filter='all'] .project-card:not(:first-child) .project-mockup.is-mobile { gap: 9px; }
.projects-grid:not([data-current-filter='all']) { grid-template-columns: minmax(0, 780px); min-height: 0; }
.projects-grid:not([data-current-filter='all']) .project-preview { height: 325px; padding: 40px; }
.projects-grid:not([data-current-filter='all']) .project-mockup { max-width: 530px; }
.project-card { border-color: #547aab33; box-shadow: inset 0 1px 0 #d3e3ff06; }
.desktop-frame img { height: auto; object-fit: contain; }
.dialog-preview { height: auto; }
.project-body h3 { font-size: 23px; font-weight: 700; line-height: 1.5; }
.project-body > p { font-size: 14px; line-height: 2; }
.project-category { color: #94b9ec; }
.project-tags span { background: #182a4240; }
.project-details { font-family: var(--display); font-size: 13px; }
.why-us { background: radial-gradient(ellipse at 20% 20%, #1b3b621c, transparent 60%), #09132170; }
.values-grid { gap: 0 35px; }
.value-item h3 { font-size: 21px; font-weight: 700; }
.value-item p { font-size: 13px; color: #8ea4c0; }
.value-item > .icon { color: #77bbff; }
.scope-stats strong { font-size: 47px; letter-spacing: -2px; }
.scope-stats span { font-size: 11px; }

/* Native disclosure controls are accessible and work without JavaScript. */
.faq { padding-block: 80px 40px; }
.faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 85px; align-items: start; }
.faq-intro > p { margin-top: 23px; font-size: 14px; max-width: 340px; }
.faq-list { border-top: 1px solid #3d618948; }
.faq-item { border-bottom: 1px solid #3d618948; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 0;
  cursor: pointer;
  font-size: 19px;
  color: #c6d9f2;
  list-style: none;
  line-height: 1.7;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item[open] summary { color: #86d3ff; }
.faq-plus { width: 23px; height: 23px; position: relative; border: 1px solid #3e6e9b5e; border-radius: 50%; flex-shrink: 0; }
.faq-plus::before, .faq-plus::after { content: ''; position: absolute; background: #8abbef; left: 7px; top: 10px; width: 7px; height: 1px; }
.faq-plus::after { transform: rotate(90deg); transition: transform .25s; }
.faq-item[open] .faq-plus::after { transform: rotate(0); }
.faq-answer { padding: 0 0 24px 36px; }
.faq-answer p { font-size: 14px; line-height: 2.1; color: #93acc9; }
.faq-item[open] .faq-answer { animation: faq-reveal .35s var(--ease); }
.cta-inner {
  background: radial-gradient(ellipse at 100% 0%, #347cc36b, transparent 70%), linear-gradient(115deg, #102658, #1846a0 60%, #185ba7);
  border-color: #73c1ff59;
  box-shadow: inset 0 1px 0 #9bd5ff24, 0 20px 60px #061e4028;
}
.cta-inner h2 { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1.45; }
.cta-orbits { animation: blueprint-orbit 50s linear infinite; }
.contact-form { background: radial-gradient(ellipse at 10% 0%, #17437520, transparent 65%), #0d1829; border-color: #4f86b842; box-shadow: inset 0 1px 0 #b5e0ff0b, 0 20px 50px #00000013; }
.form-heading h3 { font-size: 24px; font-weight: 700; }
.form-field label { color: #bfd2eb; font-size: 13px; }
.contact-links b { font-family: var(--latin); font-size: 14px; }
.footer-brand .brand-logo { width: 90px; height: 76px; }
.footer-brand .wordmark-en, .footer-brand .wordmark-en > span { font-size: 16px; }
.site-footer { background: radial-gradient(ellipse at 90% 100%, #12305320, transparent 50%), #050b16; }
.footer-column h3 { font-family: var(--display); font-size: 16px; font-weight: 700; }
.footer-column > a { font-size: 12px; }
.motion-toggle { border: 1px solid #4f78a54a; border-radius: 5px; background: #10203877; padding: 6px 10px; color: #9ab6d7; font-size: 10px; }
.motion-toggle:hover { border-color: #83baf17d; color: #c8e5ff; }
.motion-toggle:disabled { cursor: default; opacity: .7; }
.quick-contact {
  position: fixed;
  left: 25px;
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.quick-contact.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.quick-contact > a { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 14px; border: 1px solid #4b8cc66e; border-radius: 30px; background: #132a40f0; backdrop-filter: blur(12px); color: #b1d9f8; box-shadow: 0 5px 22px #0005; font-size: 11px; }
.quick-contact > a:hover { background: #1a3b57; border-color: #81c9ff; }
.quick-contact .icon { width: 20px; height: 20px; }
.quick-contact > .back-to-top { border-radius: 50%; width: 44px; padding: 0; font-size: 19px; }

@keyframes spectral-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes dashboard-scan { from { left: -2%; } to { left: 102%; } }
@keyframes blueprint-orbit { to { transform: rotate(360deg); } }
@keyframes orbital-trace { from { transform: rotate(0deg) translateX(240px); } to { transform: rotate(360deg) translateX(240px); } }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reading-progress { to { transform: scaleX(1); } }

/* Laptop: preserve readable navigation and the software composition. */
@media (max-width: 1199px) {
  .nav-shell { gap: 16px; }
  .main-nav { gap: 17px; }
  .main-nav a { font-size: 12px; }
  .brand-logo { width: 68px; height: 56px; }
  .wordmark { gap: 9px; }
  .wordmark-en, .wordmark-en > span { font-size: 14px; }
  .wordmark-ar { font-size: 8px; }
  .hero h1 { font-size: 62px; }
  .hero-description { font-size: 15px; }
  .hero-actions .button { font-size: 13px; }
  .hero-capabilities { gap: 10px; }
  .hero-capabilities .mono { font-size: 6px; }
  .hero-capabilities > span:last-child { font-size: 8px; }
  .blueprint-core { width: 145px; height: 145px; }
  .blueprint-core img { width: 98px; height: 81px; }
  .blueprint-item { width: 58px; }
  .item-idea { right: 4%; }
  .item-system { left: 4%; }
  .service-card { padding: 27px 23px 21px; }
  .service-card h3 { font-size: 21px; }
  .service-card > p { font-size: 13px; }
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) .project-body { padding: 19px; }
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) h3 { font-size: 21px; }
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) .project-mockup.is-mobile .mobile-frame:nth-child(2) { display: none; }
  .projects-grid[data-current-filter='all'] .project-card:first-child .project-preview { height: 350px; padding: 30px; }
  .process-timeline h3 { font-size: 17px; }
  .process-timeline p { font-size: 11px; }
  .cta-inner h2 { font-size: 38px; }
}
@media (max-width: 1000px) {
  .brand-caption { display: none; }
  .footer-brand .brand-caption { display: flex; }
  .hero h1 { font-size: 54px; }
  .hero-capabilities { flex-wrap: wrap; row-gap: 8px; }
  .hero-actions .button { gap: 13px; padding-inline: 17px; }
  .projects-grid[data-current-filter='all'] { grid-template-columns: 1fr 1fr; }
  .projects-grid[data-current-filter='all'] .project-card:first-child { grid-row: auto; grid-column: 1 / -1; }
  .projects-grid[data-current-filter='all'] .project-card:first-child .project-preview { height: 300px; }
  .projects-grid[data-current-filter='all'] .project-card:first-child .project-mockup { max-width: 550px; }
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) { display: block; }
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) .project-preview { height: 230px; min-height: 0; padding: 25px; }
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) .project-mockup.is-mobile .mobile-frame:nth-child(2) { display: block; }
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) .mobile-frame { width: 95px; height: 187px; }
  .faq-layout { gap: 45px; }
  .faq-item summary { font-size: 17px; }
}
@media (max-width: 860px) {
  .brand-caption { display: flex; }
  .main-nav a { font-size: 17px; }
  .hero { padding-top: 130px; }
  .hero-copy > .eyebrow { margin-inline: auto; }
  .hero h1 { font-size: 68px; }
  .hero-description { max-width: 535px; }
  .hero-capabilities { justify-content: center; margin-inline: auto; }
  .hero-visual { margin-top: 28px; }
  .hero-bottom { margin-top: 28px; }
  .section h2 { font-size: 38px; }
  .about-blueprint { min-height: 315px; }
  .blueprint-core { width: 124px; height: 124px; }
  .blueprint-core img { width: 86px; height: 72px; }
  .blueprint-core small { font-size: 7px; margin-top: 6px; }
  .blueprint-item { width: 49px; font-size: 8px; }
  .process h2 { font-size: 34px; }
  .process-timeline h3 { font-size: 15px; }
  .process-timeline p { font-size: 10px; }
  .values-grid { gap: 0 22px; }
  .value-item h3 { font-size: 19px; }
  .value-item p { font-size: 12px; }
  .cta-inner h2 { font-size: 33px; }
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .faq-intro > p { max-width: 100%; }
  .faq-intro .text-link { margin-top: 16px; }
}
@media (max-width: 600px) {
  .brand-logo, .site-header.is-scrolled .brand-logo { width: 62px; height: 52px; }
  .wordmark { gap: 8px; }
  .wordmark-en, .wordmark-en > span { font-size: 12px; letter-spacing: .3px; }
  .wordmark-ar { font-size: 7px; margin-top: 6px; }
  .nav-shell { gap: 10px; }
  .header-cta { font-size: 12px; }
  .hero { padding-top: 110px; }
  .hero-copy { padding: 0; }
  .hero-copy > .eyebrow { font-size: 10px; padding: 5px 11px; }
  .hero h1 { font-size: clamp(40px, 12vw, 49px); line-height: 1.35; margin-block: 23px 22px; }
  .hero-description { font-size: 14px; }
  .hero-actions .button { min-height: 48px; font-size: 14px; padding-inline: 18px; gap: 11px; }
  .hero-note { font-size: 9px; }
  .hero-capabilities { margin-top: 24px; padding-top: 16px; gap: 9px; }
  .hero-capabilities .mono { font-size: 6px; }
  .hero-capabilities > span:last-child { font-size: 8px; }
  .hero-visual { margin-top: 38px; }
  .orbital-tracer { animation-name: orbital-trace-mobile; }
  .expertise-strip > .container { font-size: 12px; }
  .section h2 { font-size: 34px; line-height: 1.5; }
  .section-heading > p, .section-heading > div > p { font-size: 14px; }
  .about-copy > p, .why-intro > p, .contact-copy > p { font-size: 14px; }
  .about-blueprint { min-height: 285px; }
  .blueprint-core { width: 140px; height: 140px; }
  .blueprint-core img { width: 96px; height: 80px; }
  .blueprint-item { width: 53px; height: 67px; top: calc(50% - 33px); font-size: 9px; }
  .service-card { padding: 25px 24px 20px; }
  .service-card h3 { font-size: 24px; }
  .service-card > p { font-size: 14px; }
  .process h2 { font-size: 31px; }
  .step-number { position: absolute; font-size: 11px; }
  .process-timeline h3 { font-size: 20px; }
  .process-timeline p { font-size: 13px; }
  .projects-grid[data-current-filter='all'] { grid-template-columns: 1fr; gap: 20px; }
  .projects-grid[data-current-filter='all'] .project-card:first-child { grid-column: auto; }
  .projects-grid[data-current-filter='all'] .project-card:first-child .project-preview,
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) .project-preview,
  .projects-grid:not([data-current-filter='all']) .project-preview { height: 250px; padding: 28px; }
  .projects-grid[data-current-filter='all'] .project-card:first-child .project-body,
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) .project-body { padding: 25px; }
  .projects-grid[data-current-filter='all'] .project-card:first-child h3,
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) h3,
  .project-body h3 { font-size: 25px; }
  .projects-grid[data-current-filter='all'] .project-card:not(:first-child) .mobile-frame { width: 102px; height: 200px; }
  .project-body > p { font-size: 14px; }
  .filter-button { font-size: 13px; padding-inline: 11px; }
  .value-item h3 { font-size: 21px; }
  .value-item p { font-size: 12px; }
  .faq { padding-block: 55px 25px; }
  .faq-item summary { font-size: 18px; padding-block: 21px; gap: 15px; }
  .faq-answer { padding-inline-end: 0; }
  .faq-answer p { font-size: 14px; }
  .cta-inner h2 { font-size: 33px; }
  .cta-action .button { font-size: 15px; }
  .form-heading h3 { font-size: 25px; }
  .form-footer .button { font-size: 16px; }
  .form-field label { font-size: 12px; }
  .footer-brand .brand-logo { width: 94px; height: 76px; }
  .footer-brand .wordmark-en, .footer-brand .wordmark-en > span { font-size: 17px; }
  .footer-brand .wordmark-ar { font-size: 9px; }
  .footer-bottom { gap: 12px; }
  .quick-contact { bottom: 16px; left: 14px; }
  .quick-contact > a { width: 44px; padding: 0; }
  .quick-contact > a > span { display: none; }
  .quick-contact .back-to-top { width: 36px; min-height: 36px; font-size: 16px; }
  .project-dialog h2 { font-family: var(--display); font-weight: 700; font-size: 27px; }
}
@media (max-width: 360px) {
  .site-header .brand-caption { display: none; }
  .hero h1 { font-size: 39px; }
  .hero-actions .button { padding-inline: 13px; font-size: 13px; }
  .hero-capabilities { flex-direction: column; }
  .section h2 { font-size: 30px; }
  .cta-inner h2 { font-size: 29px; }
  .value-item h3 { font-size: 18px; }
  .value-item p { font-size: 11px; }
  .filter-button { font-size: 12px; }
  .blueprint-core { width: 120px; height: 120px; }
  .blueprint-core img { width: 82px; height: 69px; }
}
@keyframes orbital-trace-mobile { from { transform: rotate(0deg) translateX(155px); } to { transform: rotate(360deg) translateX(155px); } }

/* Both the OS preference and the page control disable nonessential motion. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after {
  animation: none !important;
  transition: none !important;
}
.motion-paused .reveal { opacity: 1; transform: none; }
.motion-paused .hero-visual, .motion-paused .hero-light,
.motion-paused .service-card:hover, .motion-paused .magnetic { transform: none !important; }
.motion-paused .constellation { opacity: .25; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .service-card.is-visible:hover, .service-card:hover { transform: none !important; }
}