/* ===== Alwidad — site styles =====
   Converted from the Claude Design file الوداد.dc.html.
   The design used inline styles + `style-hover` attributes (a Claude Design
   extension, not real HTML). Hover states and all responsive behaviour live
   here; layout/colour stays inline on the elements so the markup still maps
   1:1 onto the original design. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Tajawal', sans-serif; background: #fff; }
a { color: #16a5c4; text-decoration: none; }
a:hover { color: #0f7f98; }
::selection { background: #16a5c4; color: #fff; }

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.anim-fade-up { animation: fadeUp 0.7s ease both; }
.anim-floaty  { animation: floaty 5s ease-in-out infinite; }

/* ---- hover states (were `style-hover` in the design) ---- */
.a-teal        { transition: background 0.2s ease; }
.a-teal:hover  { background: #0f8fac !important; color: #fff; }
.a-store       { transition: background 0.2s ease; }
.a-store:hover { background: #12244a !important; color: #fff; }
.a-flink       { transition: color 0.2s ease; }
.a-flink:hover { color: #fff !important; }
.a-social      { transition: background 0.2s ease; }
.a-social:hover{ background: rgba(255,255,255,0.22) !important; }
.a-wa          { transition: transform 0.2s ease; }
.a-wa:hover    { transform: scale(1.08); }

/* ---- accessibility: the design animates on load; respect the OS setting ---- */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up, .anim-floaty { animation: none; }
}

/* ===== Responsive =====
   The original design was fixed at a 1280px preview with no breakpoints, so
   every multi-column grid below collapses here. Desktop rendering is unchanged. */

@media (max-width: 1000px) {
  .hero-grid   { grid-template-columns: 1fr !important; gap: 56px !important; }
  .intro-grid  { grid-template-columns: 1fr !important; gap: 40px !important; }
  .feat-grid   { grid-template-columns: 1fr !important; gap: 40px !important; }
  .branch-grid { grid-template-columns: 1fr !important; }
  .about-grid  { grid-template-columns: 1fr !important; }
  .subj-grid   { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 34px !important; }
  .hero-title  { font-size: 42px !important; }
  .hero-sub    { font-size: 19px !important; }
}

@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; gap: 14px; padding: 14px 5vw !important; justify-content: center; }
  .site-nav    { gap: 16px !important; flex-wrap: wrap; justify-content: center; width: 100%; }
  .site-nav a  { font-size: 14px !important; }

  /* the tablet sits behind the phone with negative margins — no room for both */
  .mockup-tablet { display: none; }
  .mockup-phone  { margin-right: 0 !important; width: 230px !important; height: 480px !important; }

  .hero-title   { font-size: 32px !important; letter-spacing: 0 !important; }
  .hero-sub     { font-size: 17px !important; }
  .hero-stats   { gap: 22px !important; flex-wrap: wrap; }
  .hero-stats > div > div:first-child { font-size: 24px !important; }
  .sec-title    { font-size: 27px !important; }
  .page-title   { font-size: 32px !important; }
  .feat-inner   { grid-template-columns: 1fr !important; gap: 28px !important; }
  .feat-card    { padding: 32px 26px !important; }
  .subj-grid    { grid-template-columns: 1fr !important; }
  .footer-grid  { grid-template-columns: 1fr !important; }
  .activate-card{ padding: 36px 24px !important; }

  section { padding-left: 5vw !important; padding-right: 5vw !important; }
}

@media (max-width: 420px) {
  .store-row { flex-direction: column; }
  .store-row > a { justify-content: center; }
}