/* ==========================================================================
   Enhance.css — signature treatments for the two highest-intent pages:
   E-commerce (Amazon hero + marketplace grid) and the Web Development
   service block. Built entirely on the existing tokens from main.css
   (--primary-color, --secondry-color, --ink, --paper, --navy-soft) —
   no new palette introduced, just pushed further for these two moments.
   ========================================================================== */

/* -------------------- E-COMMERCE: Amazon hero -------------------- */

.ecomHero{
  padding: 2rem 0 1rem;
}
.ecomHeroGrid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 5rem;
  align-items: center;
}
.ecomHeroCopy .serviceNum{
  display:inline-block;
  font-family: var(--font-Montserrat);
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--primary-color);
  background: var(--navy-soft);
  padding: .6rem 1.4rem;
  border-radius: 100px;
  margin-bottom: 1.8rem;
}
.ecomHeroCopy h3{
  font-family: var(--font-hindi); /* Khand — condensed display, used deliberately for this one moment */
  font-size: 6rem;
  line-height: .95;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2rem;
  display:flex;
  align-items:center;
  gap: 1.8rem;
}
.ecomHeroCopy h3 i{
  font-size: 4.4rem;
  color: var(--primary-color);
}
.ecomHeroCopy p{
  font-size: 1.6rem;
  color: #5c707a;
  line-height: 1.85;
  max-width: 52ch;
  margin-bottom: 2.4rem;
}
.ecomHeroCopy .tagRow span{
  font-family: var(--font-Inter);
}

/* Rank-climb panel — the signature element. A honest, non-numeric visual
   of what "SEO + PPC + account health" actually produces: movement. */
.rankPanel{
  background: var(--white-color);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(14,39,51,.14);
  padding: 3rem 3.2rem 2.6rem;
  position: relative;
}
.rankPanel .rankTop{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 2.4rem;
}
.rankPanel .rankTop .platformDot{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-Montserrat);
  font-weight:700;
  font-size:1.2rem;
  color: var(--primary-color);
}
.rankPanel .rankTop .platformDot i{
  width:8px;height:8px;border-radius:50%;
  background: var(--secondry-color);
}
.rankPanel .rankTop .cardStatus{
  font-size:1.1rem;
  font-weight:700;
  color:#3f9142;
  background:#eaf7e9;
  padding:4px 12px;
  border-radius:20px;
}
.rankPanel .rankLabel{
  display:flex;
  justify-content: space-between;
  font-family: var(--font-Roboto);
  font-size: 1.3rem;
  color:#7c8b92;
  margin-bottom: 1rem;
}
.rankPanel .rankLabel b{ color: var(--ink); font-weight:700; }

.sparkRow{
  display:flex;
  align-items:flex-end;
  gap: 8px;
  height: 110px;
  margin-bottom: 2.6rem;
  border-bottom: 1px dashed #e2e7e3;
  padding-bottom: 1.2rem;
}
.sparkRow i{
  display:block;
  flex:1;
  border-radius: 6px 6px 2px 2px;
  background: var(--navy-soft);
}
.sparkRow i:last-child{ background: var(--primary-color); }
.sparkRow i:nth-child(1){ height:22%; }
.sparkRow i:nth-child(2){ height:30%; }
.sparkRow i:nth-child(3){ height:26%; }
.sparkRow i:nth-child(4){ height:44%; }
.sparkRow i:nth-child(5){ height:58%; }
.sparkRow i:nth-child(6){ height:52%; }
.sparkRow i:nth-child(7){ height:78%; }
.sparkRow i:nth-child(8){ height:100%; }

.rankPillars{
  display:flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.rankPillars span{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family: var(--font-Inter);
  font-size:1.25rem;
  color: var(--ink);
  background: var(--paper);
  padding: .8rem 1.3rem;
  border-radius: 8px;
}
.rankPillars span i{ color: var(--primary-color); font-size:1.1rem; }

@media (max-width: 992px){
  .ecomHeroGrid{ grid-template-columns: 1fr; gap: 3rem; }
  .ecomHeroCopy h3{ font-size: 4.6rem; }
}
@media (max-width: 480px){
  .ecomHeroCopy h3{ font-size: 3.6rem; gap: 1rem; }
  .rankPanel{ padding: 2.4rem 2rem 2rem; }
}

/* -------------------- E-COMMERCE: marketplace grid -------------------- */

.marketplaceGrid.mpGridV2{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.marketCard.mpCard{
  position:relative;
  background: var(--white-color);
  border-radius: 14px;
  padding: 2.6rem 2.2rem 2.2rem;
  text-align:left;
  overflow:hidden;
  border: 1px solid #eef1ef;
  transition: transform .25s ease, box-shadow .25s ease;
}
.marketCard.mpCard::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height: 4px;
  background: var(--brand, var(--primary-color));
}
.marketCard.mpCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(14,39,51,.12);
  background: var(--white-color);
}
.marketCard.mpCard .mpIconRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 1.8rem;
}
.marketCard.mpCard i.mpIcon{
  font-size: 2.6rem;
  color: var(--brand, var(--primary-color));
  display:block;
}
.marketCard.mpCard .mpBadge{
  font-family: var(--font-Montserrat);
  font-size: 1rem;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:.04em;
  color: var(--brand, var(--primary-color));
  background: var(--navy-soft);
  background: color-mix(in srgb, var(--brand, var(--primary-color)) 12%, white);
  padding: .35rem .9rem;
  border-radius: 100px;
}
.marketCard.mpCard h4{ font-family: var(--font-Inter); font-size:1.8rem; color:var(--ink); margin-bottom:.6rem; }
.marketCard.mpCard p{ font-size:1.35rem; color:#5c707a; line-height:1.6; }

@media (max-width: 992px){ .marketplaceGrid.mpGridV2{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .marketplaceGrid.mpGridV2{ grid-template-columns: 1fr; } }

/* -------------------- WEB DEVELOPMENT: browser build showcase -------------------- */

.serviceDetail#web-development .serviceDetailGrid{
  grid-template-columns: 0.85fr 1fr 1.05fr;
  align-items: start;
  gap: 4rem;
}
@media (max-width: 1200px){
  .serviceDetail#web-development .serviceDetailGrid{ grid-template-columns: 1fr 1fr; }
  .webDevShowcase{ grid-column: 1 / -1; margin-top: 2rem; }
}
@media (max-width: 900px){
  .serviceDetail#web-development .serviceDetailGrid{ grid-template-columns: 1fr; }
}

.webDevShowcase{ position: relative; padding-top: .5rem; }

.speedChip{
  position:absolute;
  top: -1.2rem;
  right: 1rem;
  z-index: 5;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  background: var(--ink);
  color: var(--white-color);
  font-family: var(--font-Montserrat);
  font-weight:700;
  font-size:1.15rem;
  padding: .9rem 1.6rem;
  border-radius: 100px;
  box-shadow: 0 14px 30px rgba(14,39,51,.22);
}
.speedChip i{ color: var(--secondry-color); }

.browserMock{
  background: var(--white-color);
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(14,39,51,.14);
  overflow: hidden;
  border: 1px solid #eef1ef;
}
.browserMock .browserBar{
  display:flex;
  align-items:center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--paper);
  border-bottom: 1px solid #eef1ef;
}
.browserMock .browserDots{ display:flex; gap:6px; }
.browserMock .browserDots i{ width:8px; height:8px; border-radius:50%; background:#cfd8d4; display:block; }
.browserMock .browserAddr{
  flex:1;
  background: var(--white-color);
  border-radius: 6px;
  padding: .6rem 1.2rem;
  font-family: var(--font-Roboto);
  font-size: 1.15rem;
  color:#7c8b92;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.browserMock .browserAddr i{ color:#3f9142; font-size:1rem; }

.browserMock .browserBody{ padding: 2.4rem 2.2rem 2.8rem; }
.skelNav{ display:flex; gap: 1.4rem; margin-bottom: 2.6rem; }
.skelNav i{ display:block; width: 40px; height: 8px; border-radius: 4px; background: var(--navy-soft); }
.skelNav i:first-child{ width: 26px; background: var(--primary-color); }

.skelBar{ height: 14px; border-radius: 5px; background: var(--navy-soft); margin-bottom: 1rem; overflow:hidden; position:relative; }
.skelBar.wide{ width: 92%; }
.skelBar.mid{ width: 68%; }
.skelBar.short{ width: 40%; margin-bottom: 2rem; }
.skelBar::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-100%);
  animation: skelShine 2.6s ease-in-out infinite;
}
.skelBar:nth-child(2)::after{ animation-delay: .15s; }
.skelBar:nth-child(3)::after{ animation-delay: .3s; }

.skelImage{
  height: 90px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-color), #2c6a44);
  margin-bottom: 2rem;
  position: relative;
  overflow:hidden;
}
.skelImage span{
  position:absolute; bottom:12px; left:14px;
  background: var(--secondry-color);
  color: var(--ink);
  font-family: var(--font-Montserrat);
  font-weight:700;
  font-size: 1.1rem;
  padding: .5rem 1.1rem;
  border-radius: 100px;
}

.skelCTA{
  display:inline-block;
  background: var(--primary-color);
  width: 130px;
  height: 34px;
  border-radius: 8px;
}

@keyframes skelShine{
  0%{ transform: translateX(-100%); }
  60%, 100%{ transform: translateX(100%); }
}

/* Floating phone frame, overlapping the browser mock's bottom-right corner —
   makes the "mobile optimisation" claim visible instead of just stated. */
.phoneMock{
  position:absolute;
  width: 120px;
  bottom: -2.4rem;
  right: -2.2rem;
  background: var(--ink);
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 24px 50px rgba(14,39,51,.28);
  z-index: 6;
}
.phoneMock .phoneScreen{
  background: var(--white-color);
  border-radius: 13px;
  padding: 10px 8px;
}
.phoneMock .phoneScreen i{ display:block; height:6px; border-radius:3px; background: var(--navy-soft); margin-bottom:6px; }
.phoneMock .phoneScreen i:nth-child(1){ width: 50%; background: var(--primary-color); }
.phoneMock .phoneScreen .phoneImg{
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--primary-color), #2c6a44);
  margin: 8px 0;
}
.phoneMock .phoneScreen i:last-child{ width: 40%; height:10px; background: var(--secondry-color); border-radius:5px; }

@media (max-width: 480px){
  .phoneMock{ display:none; }
  .speedChip{ position:static; display:inline-flex; margin-bottom: 1.4rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .skelBar::after{ animation: none; }
}