/* Final visual pass: keep the approved hero gradient and Arabic typeface.
   Blue carries actions, teal marks care/automation, navy carries headings.
   Four website previews form two balanced rows; WhatsApp closes the gallery. */
:root {
  --blue: #0f4ea5;
  --navy: #0b2b4b;
  --teal: #0c706d;
  --text: #52667b;
  --light: #f4f7fa;
  --line: #dce5ee;
}

h1, h2, h3 { letter-spacing: normal; }
.section { padding-block: 92px; }
.section-heading { margin-block-end: 44px; }
.section-intro { max-width: 730px; line-height: 1.95; }
.heading-rule { width: 44px; margin-block: 23px; }
.button { border-radius: 8px; line-height: 1.5; padding: 14px 28px; }
.button-white { color: var(--blue); }
.button:hover { background: #0a408d; }
.button-white:hover { background: #edf4fc; }

/* A white navigation surface keeps labels readable over every gradient stop. */
.home-page .site-header:not(.is-scrolled) { padding-block: 18px; }
.home-page .site-header:not(.is-scrolled) .header-inner {
  min-height: 82px;
  padding: 16px 28px;
  color: var(--navy);
  background: #fff;
  border: 1px solid #ffffff80;
  border-radius: 12px;
  box-shadow: 0 8px 24px #04355a14;
}
.site-header nav { gap: 28px; }
.site-header nav a[aria-current="page"] { color: var(--blue); }
.inner-page .site-header:not(.is-scrolled) nav a[aria-current="page"] { color: #fff; }
.home-page .site-header .menu-toggle {
  color: var(--navy);
  border-color: var(--line);
  border-radius: 8px;
  background: #fff;
}
.js-ready .home-hero { padding-block-start: 162px; }
.hero-content h1 { font-size: clamp(42px, 4.6vw, 64px); line-height: 1.45; }
.hero-content > p { max-width: 760px; font-size: 18px; line-height: 1.9; margin-block-start: 20px; }
.home-hero .hero-content .button { margin-block: 30px 32px; }
.hero-carousel { padding-block-end: 26px; }
.wheel-controls { gap: 24px; }
.wheel-description { color: var(--text); }
.wheel-tags span { color: #4c657e; }
.wheel-footer { color: var(--blue); border-color: var(--line); }
.wheel-chrome { color: #60748b; }
.wheel-ai .wheel-icon, .wheel-care .wheel-icon { color: var(--teal); }

.first-features { padding-block: 88px; }
.three-features { gap: 42px; }
.three-features p { font-size: 16px; line-height: 1.95; }
.three-features h3 { font-size: 24px; margin-block-end: 14px; }
.feature-symbol { margin-block-end: 20px; }
.statement-band, .care-band, .closing-cta { padding-block: 92px; }
.care-band { background: var(--teal); }
.statement-band .narrow, .care-band .narrow, .closing-cta .narrow { max-width: 790px; }

/* Larger previews preserve the complete 1200 x 820 homepage captures. */
.project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.project-shot { aspect-ratio: 60 / 41; }
.project-shot-tag { color: var(--text); }
.project-link { border-color: var(--line); border-radius: 14px; box-shadow: 0 6px 20px #10315407; }
.project-link:hover { border-color: #9cb8d8; box-shadow: 0 12px 28px #1031540e; }
.project-body { padding: 23px 26px 20px; }
.project-body > p { color: var(--text); font-size: 15px; }
.project-link-footer { color: var(--text); border-color: var(--line); }
.project-next { grid-column: 1 / -1; }
.project-cta {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 250px;
  grid-template-rows: auto auto auto;
  gap: 8px 25px;
  align-items: center;
  min-height: 210px;
  padding: 32px;
  background: var(--blue);
  border-radius: 14px;
}
.project-cta-icon { grid-column: 1; grid-row: 1 / 4; width: 64px; height: 64px; margin: 0; }
.project-cta-label { grid-column: 2; grid-row: 1; font-size: 12px; }
.project-card .project-cta h3 { grid-column: 2; grid-row: 2; margin: 0; font-size: 31px; line-height: 1.5; }
.project-cta > p { grid-column: 2; grid-row: 3; max-width: 550px; margin: 0; font-size: 15px; }
.whatsapp-action { grid-column: 3; grid-row: 2; font-size: 14px; align-self: center; }
.project-cta-phone { grid-column: 3; grid-row: 3; margin: 0; text-align: center; }
.project-cta:hover { background: #0a408d; transform: none; }

.capabilities .section-heading { margin-block-end: 38px; }
.solution-card { background: var(--light); border-color: var(--line); border-radius: 14px; }
.solution-copy p { color: var(--text); font-size: 15px; }
.solution-tags { color: #506880; }
.solution-arrow { color: var(--blue); }
.solutions-list .solution-card:nth-child(2) .solution-icon,
.solutions-list .solution-card:nth-child(5) .solution-icon,
.group-columns article:last-child .group-symbol { color: var(--teal); }
.group-columns { gap: 65px; }
.group-columns p { color: var(--text); }
.group-columns article > span:last-child { color: var(--text); }
.group-section { padding-block-start: 45px; }
.site-footer { background: var(--light); padding-block-start: 68px; }
.footer-columns nav, .footer-columns p, .footer-bottom { color: var(--text); }
.footer-columns h2 { color: var(--navy); }
.footer-bottom { border-color: var(--line); }
.inner-page .page-intro { background: var(--light); padding-block: 75px 80px; }
.contact-form-wrap input, .contact-form-wrap select, .contact-form-wrap textarea {
  border-color: #c5d2df;
  border-radius: 8px;
  background: #fff;
}
.contact-form-wrap input::placeholder, .contact-form-wrap textarea::placeholder { color: #60748b; }
.contact-solid, .about-solid { border-radius: 14px; }
.contact-solid { background: var(--teal); }
.project-detail-image { border-radius: 14px; border-color: var(--line); }

@media (max-width: 1100px) {
  .site-header nav { gap: 20px; font-size: 14px; }
  .project-cta { grid-template-columns: 58px minmax(0, 1fr) 220px; gap: 8px 20px; padding: 28px; }
  .project-cta-icon { width: 58px; height: 58px; }
  .project-card .project-cta h3 { font-size: 28px; }
  .whatsapp-action { font-size: 13px; }
}
@media (max-width: 850px) {
  .home-page .site-header:not(.is-scrolled) .header-inner { padding-inline: 20px; gap: 20px; }
  .site-header nav { gap: 17px; font-size: 13px; }
  .project-grid { gap: 24px; }
  .project-body { padding: 22px; }
  .project-cta { grid-template-columns: 58px minmax(0, 1fr); gap: 8px 20px; }
  .whatsapp-action { grid-column: 2; grid-row: 4; justify-self: start; margin-block-start: 12px; gap: 26px; }
  .project-cta-phone { grid-column: 2; grid-row: 5; text-align: start; margin-block-start: 5px; }
  .group-columns { gap: 42px; }
}
@media (max-width: 700px) {
  .section { padding-block: 68px; }
  .section-heading { margin-block-end: 34px; }
  .home-page .site-header:not(.is-scrolled) { padding-block: 12px; }
  .home-page .site-header:not(.is-scrolled) .header-inner { min-height: 72px; padding: 12px 18px; }
  .js-ready .home-page .site-header:not(.is-scrolled) #main-nav { inset-block-start: 90px; }
  .js-ready .home-hero { padding-block-start: 145px; }
  .hero-content h1 { font-size: clamp(35px, 7.4vw, 48px); }
  .hero-content > p { font-size: 16px; line-height: 1.95; }
  .home-hero .hero-content .button { margin-block: 27px 28px; }
  .hero-carousel { padding-block-end: 22px; }
  .three-features { gap: 38px; }
  .three-features p { font-size: 15px; }
  .statement-band, .care-band, .closing-cta { padding-block: 72px; }
  .project-grid { grid-template-columns: 1fr; max-width: none; gap: 25px; }
  .project-body { padding: 23px 24px 20px; }
  .project-card .project-body h3 { font-size: 25px; }
  .project-body > p { font-size: 14px; }
  .project-link-footer { font-size: 12px; }
  .project-cta { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; gap: 0; padding: 30px; }
  .project-cta-icon { margin-block-end: 21px; }
  .project-card .project-cta h3 { font-size: 30px; margin-block: 11px 14px; }
  .project-cta > p { font-size: 15px; margin-block-end: 22px; }
  .whatsapp-action { align-self: stretch; margin: 0; padding: 12px 15px; font-size: 14px; }
  .project-cta-phone { margin-block-start: 14px; text-align: start; }
  .solution-copy p { font-size: 14px; }
  .group-section { padding-block-start: 32px; }
  .group-columns { gap: 44px; }
  .site-footer { padding-block-start: 55px; }
  .inner-page .page-intro { padding-block: 55px 65px; }
}
@media (max-width: 350px) {
  .hero-content h1 { font-size: 32px; }
  .project-cta { padding-inline: 24px; }
  .whatsapp-action { font-size: 12px; }
}