/* Web Development service page — extends app-dev.css (shared .ad-* components) */

/* ───────── HERO ───────── */
.wd-hero { padding: 130px 40px 80px; }
.wd-hero::before { display: none; }
.wd-hero-inner { grid-template-columns: minmax(0, 1fr); }
.wd-hero .ad-copy { position: relative; z-index: 2; max-width: 620px; }
.wd-hero-img {
  position: absolute; z-index: 1; right: 2%; top: 52%; translate: 0 -50%;
  width: 56%; max-width: 1060px; height: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%);
  animation: adSlideR 1s var(--ease) 0.15s both;
}
.wd-eyebrow { display: block; margin-bottom: 26px; font-family: var(--fh); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple-light); }
.wd-title { font-family: var(--fh); font-size: clamp(42px, 6vw, 82px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.02; color: var(--white); margin-bottom: 22px; }
.wd-grad { background: linear-gradient(90deg, #814ac8, #df7afe 60%, #ff6fd8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.wd-text { font-family: var(--fh); font-size: 16px; font-weight: 500; line-height: 1.65; color: var(--w50); max-width: 500px; margin-bottom: 36px; }



@media (max-width: 1024px) {
  .wd-hero { flex-direction: column; padding: 110px 28px 60px; }
  .wd-hero-img { position: relative; top: auto; right: auto; translate: none; order: 2; width: 100%; margin-top: 40px; -webkit-mask-image: none; mask-image: none; }
  .wd-hero-inner { order: 1; }
}
@media (max-width: 600px) {
  .wd-hero { padding: 100px 20px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-hero-img { animation: none !important; }
}

/* ───────── FRONTEND / BACKEND CARDS — per-feature icons ───────── */
.plat-list--icons { gap: 12px; }
.plat-list--icons li { align-items: flex-start; gap: 14px; line-height: 1.45; }
.plat-list--icons li::before { display: none; }
.plat-list--icons li span { min-width: 0; overflow-wrap: anywhere; padding-top: 5px; }
.plat-list--icons svg {
  width: 32px; height: 32px; flex-shrink: 0; padding: 7px; border-radius: 9px;
  background: rgba(129, 74, 200, 0.16); border: 1px solid rgba(129, 74, 200, 0.45);
  color: #df7afe; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 600px) {
  .plat-list--icons li { font-size: 15px; gap: 12px; }
  .plat-list--icons svg { width: 30px; height: 30px; padding: 6px; }
  .plat-list--icons li span { padding-top: 4px; }
}

/* ───────── BROWSER MOCKUPS ───────── */
.wd-stage { aspect-ratio: 6 / 5; max-width: 640px; }
.wd-stage .ad-ring { top: 88%; width: 84%; height: 100%; }
.wd-stage .ad-pad { top: 90%; width: 62%; height: 14%; }
.wd-browsers { position: absolute; inset: 0; z-index: 2; }

.br {
  position: absolute; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  background: #0b0716; border: 1px solid rgba(223, 122, 254, 0.5);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 44px rgba(129, 74, 200, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.br-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.br-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f7e; }
.br-bar i:nth-child(2) { background: #ffc857; }
.br-bar i:nth-child(3) { background: #4ade80; }
.br-bar span { flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); font-family: var(--fh); font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; }
.br-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-family: var(--fh); color: #fff; container-type: inline-size; }

.br.main { left: 2%; top: 8%; width: 76%; height: 62%; z-index: 2; transform: rotateY(-8deg) rotateX(3deg); animation: adFloatA 8s ease-in-out infinite; }
.br.side { right: 0; top: 40%; width: 44%; height: 50%; z-index: 3; animation: adFloatB 7s ease-in-out -2s infinite; }

.br-nav { display: flex; align-items: center; justify-content: space-between; }
.br-nav b { width: 22%; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #814ac8, #df7afe); }
.br-nav span { display: flex; gap: 6px; }
.br-nav span i { width: 24px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
.br-hero { flex: 1; border-radius: 12px; padding: 14px; background: linear-gradient(120deg, #814ac8, #c04fe0 60%, #ff5fc8); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.br-hero::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.br-hero h4 { font-size: clamp(13px, 2.4cqw, 20px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; max-width: 62%; }
.br-hero u { display: block; width: 52%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.55); }
.br-hero u + u { width: 38%; opacity: 0.6; }
.br-hero em { align-self: flex-start; font-style: normal; font-size: 9px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #fff; color: #5b2a9e; }
.br-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.br-cards i { height: 38px; border-radius: 9px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); }
.br-cards i:nth-child(1) { background: linear-gradient(135deg, rgba(129, 74, 200, 0.6), rgba(91, 140, 255, 0.4)); }

.br-stats { display: grid; gap: 8px; }
.br-stats div { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.07); font-size: 9px; color: rgba(255, 255, 255, 0.55); font-weight: 500; }
.br-stats div b { display: block; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.br-stats div b small { font-size: 9px; color: #6ee7b7; margin-left: 4px; }
.br-spark { display: flex; align-items: flex-end; gap: 4px; flex: 1; min-height: 34px; }
.br-spark i { flex: 1; border-radius: 3px; background: linear-gradient(180deg, #df7afe, #814ac8); }

.wd-code {
  position: absolute; z-index: 4; left: 0; bottom: 6%; width: 38%; padding: 12px 14px; border-radius: 14px;
  background: rgba(10, 6, 20, 0.86); border: 1px solid rgba(91, 140, 255, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(91, 140, 255, 0.25);
  font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; line-height: 1.7; color: #9fb4ff; animation: adFloatB 6s ease-in-out -4s infinite;
}
.wd-code .k { color: #df7afe; } .wd-code .s { color: #6ee7b7; } .wd-code .d { color: rgba(255, 255, 255, 0.4); }
.ad-chip.wc1 { right: 2%; top: 4%; }
.ad-chip.wc2 { left: 6%; bottom: -2%; right: auto; }

/* ───────── TECH STACK ───────── */
.wd-stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stk-card { padding: 26px 24px; border-radius: 22px; }
.stk-card h3 { font-family: var(--fh); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple-light); margin-bottom: 16px; }
.stk-card ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.stk-card li { padding: 6px 12px; border-radius: 99px; font-family: var(--fh); font-size: 13.5px; font-weight: 600; color: var(--w75); background: rgba(129, 74, 200, 0.16); border: 1px solid rgba(129, 74, 200, 0.4); }

/* ───────── OUTCOMES (metrics) ───────── */
.wd-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.met-card { padding: 28px 22px; border-radius: 22px; text-align: center; }
.met-card b { display: block; font-family: var(--fh); font-size: clamp(32px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; margin-bottom: 8px; }
.met-card span { font-family: var(--fh); font-size: 14px; font-weight: 500; color: var(--w50); }

/* ───────── FEATURED BUILDS ───────── */
.wd-feat .feat-stage { height: 260px; align-items: flex-end; }
.wd-feat .feat-stage .br { position: relative; width: 100%; max-width: 330px; min-width: 0; margin-bottom: -40px; border-radius: 16px 16px 0 0; transform: rotateX(6deg); transform-origin: 50% 100%; transition: transform 0.5s var(--ease); }
.wd-feat .feat-card:hover .feat-stage .br { transform: translateY(-10px); }
.wd-feat .br-shot { display: block; min-width: 0; max-width: 100%; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

@media (max-width: 1100px) {
  .wd-stack, .wd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wd-stack, .wd-metrics { grid-template-columns: minmax(0, 1fr); }
  .wd-code { display: none; }
  .br.main { width: 82%; }
  .br.side { width: 48%; }
}
@media (prefers-reduced-motion: reduce) {
  .br.main, .br.side, .wd-code { animation: none !important; }
}