/* =========================================
   PAGE-LOAD SKELETON
   ========================================= */

.aroham-skeleton {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: #F5F7FB;
  overflow: hidden;
  opacity: 1;
  transition: opacity .22s cubic-bezier(.4,0,.2,1), visibility .22s;
  padding-top: 76px;
}
.aroham-skeleton.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Body container */
.sk-body {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px);
  display: grid;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.sk-home { grid-template-columns: 1.05fr 0.95fr; }
.sk-inner { grid-template-columns: 1.2fr 0.8fr; align-items: end; }

.sk-col { display: flex; flex-direction: column; gap: 16px; }

/* Shared shimmer blocks */
.sk-pill, .sk-h1-line, .sk-p-line, .sk-btn, .sk-visual,
.sk-avs span, .sk-trust-text > span,
.sk-eyebrow, .sk-crumb-dot, .sk-crumb-sep,
.sk-aside-ico, .sk-aside-v, .sk-aside-l, .sk-aside-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #e8edf3 0%, #d4dce8 30%, #e8edf3 60%);
  background-size: 300% 100%;
  animation: skShimmer 1.4s ease-in-out infinite;
}
@keyframes skShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* HOME hero pieces */
.sk-pill { width: 240px; height: 30px; border-radius: 999px; }
.sk-h1-line { height: 56px; border-radius: 12px; }
.sk-h1-line.l1 { width: 92%; }
.sk-h1-line.l2 { width: 70%; }
.sk-p-line { height: 14px; border-radius: 6px; margin-top: 2px; }
.sk-p-line.l1 { width: 100%; }
.sk-p-line.l2 { width: 96%; }
.sk-p-line.l3 { width: 60%; }
.sk-actions { display: flex; gap: 12px; margin-top: 14px; }
.sk-btn { width: 180px; height: 48px; border-radius: 999px; }
.sk-actions .sk-btn:nth-child(2) { width: 150px; }
.sk-trust { display: flex; gap: 14px; align-items: center; margin-top: 18px; }
.sk-avs { display: flex; }
.sk-avs span {
  width: 38px; height: 38px; border-radius: 50%;
  margin-left: -10px;
  border: 2px solid #F5F7FB;
}
.sk-avs span:first-child { margin-left: 0; }
.sk-trust-text { display: flex; flex-direction: column; gap: 6px; }
.sk-trust-text > span:nth-child(1) { width: 80px; height: 12px; border-radius: 4px; }
.sk-trust-text > span:nth-child(2) { width: 200px; height: 16px; border-radius: 4px; }

.sk-visual {
  aspect-ratio: 4/4.4;
  border-radius: 32px;
  background:
    linear-gradient(100deg, #d4dce8 0%, #b8c4d4 30%, #d4dce8 60%);
  background-size: 300% 100%;
  animation: skShimmer 1.4s ease-in-out infinite;
}

/* INNER page-hero pieces */
.sk-crumbs { display: flex; align-items: center; gap: 8px; }
.sk-crumb-dot { width: 48px; height: 12px; border-radius: 4px; }
.sk-crumb-dot-wide { width: 72px; }
.sk-crumb-sep { width: 8px; height: 8px; border-radius: 50%; opacity: 0.5; }
.sk-eyebrow { width: 140px; height: 14px; border-radius: 4px; margin-top: 12px; }

.sk-aside { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.sk-aside-card {
  height: 76px;
  border-radius: 14px;
  background: #ffffff !important;
  border: 1px solid rgba(10,31,68,.06);
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  animation: none;
}
.sk-aside-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}
.sk-aside-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sk-aside-v { width: 60%; height: 18px; border-radius: 5px; }
.sk-aside-l { width: 90%; height: 11px; border-radius: 4px; }

/* TABLET */
@media (max-width: 980px) {
  .sk-home, .sk-inner { grid-template-columns: 1fr; }
  .sk-aside { flex-direction: row; flex-wrap: wrap; }
  .sk-aside-card { flex: 1 1 220px; }
}

/* MOBILE */
@media (max-width: 720px) {
  .aroham-skeleton {
    padding-top: 84px;
    padding-bottom: 0;
  }
  .sk-body { padding: 18px 14px 110px; gap: 26px; }
  .sk-h1-line { height: 38px; border-radius: 10px; }
  .sk-h1-line.l1 { width: 100%; }
  .sk-h1-line.l2 { width: 78%; }
  .sk-pill { width: 200px; height: 24px; }
  .sk-eyebrow { width: 120px; height: 12px; }
  .sk-actions .sk-btn,
  .sk-actions .sk-btn:nth-child(2) { flex: 1; width: auto; height: 50px; }
  .sk-visual {
    aspect-ratio: 4/4.6;
    border-radius: 28px;
    order: 2;
  }
  .sk-home .sk-col { order: 1; }
  /* Inner page on mobile: 3 aside cards in a row, equal width */
  .sk-aside { flex-direction: row; gap: 8px; }
  .sk-aside-card {
    flex: 1; min-width: 0;
    flex-direction: column;
    height: auto;
    padding: 14px 10px;
    text-align: center;
    align-items: center;
    border-radius: 16px;
  }
  .sk-aside-ico { width: 32px; height: 32px; margin: 0 auto 8px; }
  .sk-aside-v { width: 60%; height: 14px; }
  .sk-aside-l { width: 80%; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-pill, .sk-h1-line, .sk-p-line, .sk-btn, .sk-visual,
  .sk-avs span, .sk-trust-text > span,
  .sk-eyebrow, .sk-crumb-dot, .sk-crumb-sep,
  .sk-aside-ico, .sk-aside-v, .sk-aside-l {
    animation: none;
  }
}