/* ==========================================================================
   Appslin — page-specific styles for
   Static Website Design / UI Design / Logo Design
   Additive only. Does not modify or override approved production styles.
   ========================================================================== */

/* ---------- shared split media (matches approved Dynamic page behaviour) ---------- */
.ap-media {
  display: flex; flex-direction: column; height: 100%;
  position: sticky; top: 108px; align-self: start; margin: 0;
}
.ap-media img {
  width: 100%; height: 100%; min-height: 320px; max-height: 560px;
  object-fit: cover; border-radius: 20px;
  box-shadow: 0 30px 70px -44px rgba(10, 31, 68, .6);
}
.ap-media--wide { position: static; margin-top: 26px; }
.ap-media--wide img { max-height: 460px; }
@media (max-width: 991px) {
  .ap-media { position: static; }
  .ap-media img { max-height: 380px; }
}

/* keep the new imagery fully visible (no crop) */
.page-static #appslin-best .pp-split-visual img,
.page-static #key-elements .pp-split-visual img,
.page-ui #ui-intro .pp-split-visual img,
.page-ui #industries .pp-split-visual img,
.page-ui #prominence .pp-split-visual img,
.page-ui #ui-team .pp-split-visual img,
.page-logo #expert-designers .pp-split-visual img,
.page-logo #grow-presence .pp-split-visual img,
.page-logo #outstanding .pp-split-visual img,
.page-logo #branding-role .pp-split-visual img,
.page-logo #logo-trends .pp-split-visual img,
.page-logo #crafting-identities .pp-split-visual img {
  object-fit: contain;
  background: linear-gradient(160deg, #0b1b3a, #142c56);
  min-height: 300px;
  max-height: 520px;
}

/* ---------- sub heading inside a combined section ---------- */
.ap-subhead { margin: 42px 0 22px; }
.ap-subhead h3 { margin: 10px 0 8px; }
.ap-subhead p { margin: 0; color: var(--muted, #5a6b8c); }
.section--dark .ap-subhead h3, .section--dark .ap-subhead p { color: #eaf0ff; }

/* ---------- cards ---------- */
.ap-cards { display: grid; gap: 22px; margin-top: 26px; }
.ap-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-cards--1 { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.ap-stack { display: grid; gap: 16px; align-content: start; }

.ap-card {
  background: #fff;
  border: 1px solid rgba(16, 42, 86, .1);
  border-radius: 20px;
  padding: 24px 24px 22px;
  box-shadow: 0 24px 54px -42px rgba(10, 31, 68, .55);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ap-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 99, 235, .28);
  box-shadow: 0 30px 60px -36px rgba(10, 31, 68, .5);
}
.ap-card h5 { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.35; }
.ap-card p { margin: 0; color: #4c5c7a; line-height: 1.7; font-size: .96rem; }
.ap-card--accent {
  background: linear-gradient(150deg, #0b1b3a 0%, #17346a 100%);
  border-color: transparent;
}
.ap-card--accent h5, .ap-card--accent p { color: #eef3ff; }
.ap-card--row { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }

.ap-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; min-width: 42px; margin-bottom: 14px;
  border-radius: 13px; color: #b9822f;
  background: linear-gradient(150deg, rgba(224, 166, 60, .18), rgba(224, 166, 60, .06));
}
.ap-card--row .ap-card-ico { margin-bottom: 0; width: 36px; height: 36px; min-width: 36px; border-radius: 11px; }
.ap-card-ico svg { width: 20px; height: 20px; }
.ap-card--accent .ap-card-ico { background: rgba(255, 255, 255, .12); color: #f0c274; }

.section--dark .ap-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.section--dark .ap-card h5 { color: #fff; }
.section--dark .ap-card p { color: #ccd8f2; }

/* ---------- numbered steps / timeline ---------- */
.ap-steps {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ap-step {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid rgba(16, 42, 86, .1);
  border-radius: 20px; padding: 22px 22px 20px;
  box-shadow: 0 24px 54px -44px rgba(10, 31, 68, .55);
}
.ap-step h5 { margin: 0 0 8px; font-size: 1.02rem; }
.ap-step p { margin: 0; color: #4c5c7a; line-height: 1.7; font-size: .95rem; }
.ap-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; border-radius: 13px;
  font-weight: 700; font-size: .95rem; color: #0b1b3a;
  background: linear-gradient(150deg, #f4cd85, #dda23f);
}
.ap-steps--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ap-steps--compact .ap-step { padding: 14px 16px; align-items: center; }
.ap-steps--light { grid-template-columns: minmax(0, 1fr); }
.ap-steps--light .ap-step {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.ap-steps--light .ap-step h5 { color: #fff; }
.ap-steps--light .ap-step p { color: #ccd8f2; }

/* ---------- quote block ---------- */
.ap-quote {
  position: relative; margin: 0;
  background: linear-gradient(150deg, #0b1b3a 0%, #17346a 100%);
  border-radius: 26px; padding: 44px 48px 40px;
  box-shadow: 0 40px 80px -50px rgba(10, 31, 68, .7);
}
.ap-quote-mark { width: 44px; height: 44px; color: rgba(240, 194, 116, .85); margin-bottom: 14px; }
.ap-quote blockquote { margin: 0; }
.ap-quote blockquote p {
  margin: 0; color: #eef3ff; font-size: 1.18rem; line-height: 1.75; font-weight: 500;
}

/* ---------- tools ---------- */
.ap-tools { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.ap-tools:not(.ap-tools--cards) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ap-tools:not(.ap-tools--cards) li {
  background: #fff; border: 1px solid rgba(16, 42, 86, .1); border-radius: 16px;
  padding: 16px 18px; font-weight: 600;
}
.ap-tools--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-tool {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; background: #fff;
  border: 1px solid rgba(16, 42, 86, .1); border-radius: 20px;
  padding: 26px 18px; box-shadow: 0 24px 54px -44px rgba(10, 31, 68, .55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ap-tool:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -36px rgba(10, 31, 68, .5); }
.ap-tool-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 17px;
  font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; color: #fff;
  background: linear-gradient(145deg, var(--t1, #2563eb), var(--t2, #0b1b3a));
  box-shadow: 0 14px 26px -16px rgba(10, 31, 68, .8);
}
.ap-tool-name { font-weight: 600; font-size: .98rem; color: #12244a; }
.section--dark .ap-tool { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.section--dark .ap-tool-name { color: #fff; }

/* ---------- checks list ---------- */
.ap-checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.ap-checks li { display: flex; gap: 12px; align-items: flex-start; color: #4c5c7a; line-height: 1.7; }
.ap-checks svg { width: 20px; height: 20px; min-width: 20px; margin-top: 3px; color: #1f9d55; }
.section--dark .ap-checks li { color: #ccd8f2; }

/* ---------- package spacing (Static + UI pages) ---------- */
.page-static #packages .dy-pk-shell + .dy-pk-shell,
.page-ui #packages .dy-pk-shell + .dy-pk-shell { margin-top: 34px; }
.page-static #packages .dy-pk-shell,
.page-ui #packages .dy-pk-shell { margin-bottom: 0; }
@media (max-width: 767px) {
  .page-static #packages .dy-pk-shell + .dy-pk-shell,
  .page-ui #packages .dy-pk-shell + .dy-pk-shell { margin-top: 24px; }
}

/* ---------- trusted clients marquee speed ---------- */
.page-static #dy-clients .logo-marquee-track,
.page-ui #dy-clients .logo-marquee-track,
.page-logo #dy-clients .logo-marquee-track { animation-duration: 58s; }
.page-static #dy-clients, .page-ui #dy-clients, .page-logo #dy-clients {
  --surface: #f6f9ff; background: #f6f9ff;
}

/* ---------- no broken CAPTCHA / widget artefacts (visual only) ---------- */
.grecaptcha-badge { visibility: hidden; }
[class^="elfsight-app-"] img[src=""],
[class^="elfsight-app-"] img:not([src]) { display: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .ap-cards--3, .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-tools--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-quote { padding: 34px 28px 30px; }
  .ap-quote blockquote p { font-size: 1.05rem; }
}
@media (max-width: 640px) {
  .ap-cards--3, .ap-steps, .ap-steps--compact { grid-template-columns: minmax(0, 1fr); }
  .ap-tools--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-card { padding: 20px; }
  .ap-media img, .pp-split-visual img { min-height: 220px; }
}