/* ==========================================================================
   Yazhi Software — services page
   ========================================================================== */

/* ==========================================================================
   Service overview (text + visual)
   ========================================================================== */
.service-intro { scroll-margin-top: var(--header-h); }
.page-banner + .service-intro { padding-top: 64px; }

.service-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

.service-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 6px 14px 6px 6px;
  border-radius: 99px;
  background: var(--primary-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}
.service-tag b svg { width: 14px; height: 14px; }
.service-tag b {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  font-size: 12px;
  color: #fff;
}

.service-intro-content h2 {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.15;
}
.service-lead {
  max-width: 540px;
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.7;
}

.check-list--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}
.check-list--2col li + li { margin-top: 0; }
.check-list--2col li { font-size: 15px; }

.service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Modules composition ----------
   60em x 48em canvas; 1em scales with the column width. */
.service-visual { container-type: inline-size; }
.modules-stage {
  position: relative;
  height: 48em;
  font-size: calc(100cqw / 60);
  line-height: 1.3;
  color: var(--ink);
}
.modules-stage::before {
  /* soft backdrop */
  content: "";
  position: absolute;
  inset: 3em 2em 3em 6em;
  border-radius: 3em;
  background: linear-gradient(135deg, #e8f0ff 0%, #f3f6fc 100%);
}
.dots-a { top: 0; right: 0; width: 14em; height: 7em; }
.dots-b { bottom: 0; left: 0; width: 8em; height: 12em; }

.modules-panel {
  position: absolute;
  top: 7em; left: 3em;
  width: 46em;
  padding: 2.4em;
  background: #fff;
  border-radius: 2em;
  box-shadow: 0 2.5em 5em rgba(16, 32, 72, 0.14);
}
.modules-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2em;
}
.modules-head strong { font-size: 1.7em; letter-spacing: -0.01em; }
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 1em;
  border-radius: 99em;
  background: #e3f7ec;
  font-size: 1em;
  font-weight: 600;
  color: #16a34a;
}
.sync-pill i {
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0.25em rgba(22, 163, 74, 0.2);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4em;
}
.modules-grid li {
  padding: 1.6em 1.4em;
  border: 1px solid var(--line);
  border-radius: 1.2em;
  background: #fbfcfe;
}
.mod-icon {
  display: inline-grid;
  place-items: center;
  width: 3.6em; height: 3.6em;
  margin-bottom: 1.2em;
  border-radius: 0.9em;
}
.mod-icon svg { width: 1.9em; height: 1.9em; }
.icon-teal { background: #e0f6f6; color: #0d9488; }
.icon-pink { background: #fde8f1; color: #db2777; }
.modules-grid b { display: block; font-size: 1.3em; }
.modules-grid small { display: block; margin-top: 0.3em; font-size: 1.05em; color: var(--muted); }

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1.2em 1.6em 1.2em 1.2em;
  background: #fff;
  border-radius: 1.3em;
  box-shadow: 0 1.8em 3.5em rgba(16, 32, 72, 0.16);
  z-index: 2;
}
.float-card b { display: block; font-size: 1.2em; }
.float-card small { display: block; margin-top: 0.2em; font-size: 1em; color: var(--muted); }
.float-lead { top: 1.5em; right: 3em; }
.float-invoice { bottom: 2em; right: 0; }
.float-avatar {
  display: grid;
  place-items: center;
  width: 3.4em; height: 3.4em;
  border-radius: 50%;
  background: #fff1e0;
  font-size: 1.05em;
  font-weight: 700;
  color: #ea7a0c;
}
.float-check {
  display: grid;
  place-items: center;
  width: 3.4em; height: 3.4em;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
}
.float-check svg { width: 1.7em; height: 1.7em; }

@media (prefers-reduced-motion: no-preference) {
  .float-lead { animation: floatY 5s ease-in-out infinite; }
  .float-invoice { animation: floatY 5s ease-in-out 2.5s infinite; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.8em); }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .service-intro-inner { grid-template-columns: 1fr; gap: 48px; }
  .service-visual { width: 100%; max-width: 620px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .check-list--2col { grid-template-columns: 1fr; gap: 12px; }
  .service-actions { flex-direction: column; align-items: stretch; }
  .service-actions .btn { justify-content: center; }
}

/* ==========================================================================
   What's included — module grid
   ========================================================================== */
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.module-grid .solution-card p { flex: 1; margin-bottom: 20px; }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  min-height: 90px;   /* room for two rows of chips, so dividers line up across a row */
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.chip-list li {
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--bg-soft);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.custom-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 22px 28px;
  background: #fff;
  border: 1.5px dashed #c9d5ee;
  border-radius: var(--radius-lg);
}
.custom-strip-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
}
.custom-strip-icon svg { width: 24px; height: 24px; }
.custom-strip p { flex: 1; font-size: 16px; }
.custom-strip p b { color: var(--ink); }
.custom-strip .learn-more { align-self: center; white-space: nowrap; }

@media (max-width: 1024px) {
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .module-grid { grid-template-columns: 1fr; gap: 16px; }
  .chip-list { min-height: 0; }
  .custom-strip { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; }
  .custom-strip .learn-more { align-self: flex-start; }
}

/* ==========================================================================
   Benefits — comparison + benefit tiles
   ========================================================================== */
.benefits-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 32px;
}

/* Comparison card */
.compare-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.compare-head,
.compare-rows li {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.compare-head span {
  padding: 18px 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: #f7f8fb;
}
.compare-head .is-ours { background: var(--primary); color: #fff; }

/* rows share any extra height so the card fills its grid cell evenly */
.compare-rows { flex: 1; display: flex; flex-direction: column; }
.compare-rows li { flex: 1; }
.compare-rows li + li { border-top: 1px solid var(--line); }
.compare-rows span {
  position: relative;
  padding: 18px 24px 18px 56px;
  font-size: 15px;
  line-height: 1.5;
}
.compare-rows .con { color: var(--muted); }
.compare-rows .pro { color: var(--ink); font-weight: 500; background: #f7faff; }
.compare-rows span::before {
  content: "";
  position: absolute;
  left: 22px; top: 19px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}
.compare-rows .con::before {
  background-color: #fde8e8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.compare-rows .pro::before {
  background-color: var(--primary);
  background-size: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
}

/* Benefit tiles */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.benefit {
  padding: 26px 24px;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  transition: background .25s, box-shadow .25s, transform .25s;
}
.benefit:hover { background: #fff; box-shadow: var(--shadow); transform: translateY(-4px); }
.benefit-icon {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(11, 92, 240, 0.25);
}
.benefit-icon svg { width: 24px; height: 24px; }
.benefit h3 { font-size: 17px; font-weight: 700; }
.benefit p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }

@media (max-width: 1024px) {
  .benefits-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .compare-head span { padding: 14px; font-size: 12.5px; }
  .compare-rows span { padding: 44px 14px 16px; font-size: 14px; }
  .compare-rows span::before { left: 14px; top: 14px; }
  .benefit-grid { grid-template-columns: 1fr; gap: 14px; }
  .benefit { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 20px; }
  .benefit-icon { grid-row: span 2; margin: 0; }
  .benefit p { margin-top: 4px; }
}

/* ==========================================================================
   Delivery roadmap
   ========================================================================== */
.roadmap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.roadmap::before {
  /* connecting line through the icons */
  content: "";
  position: absolute;
  top: 36px;
  left: 10%; right: 10%;
  border-top: 2px dashed #bfd0f3;
}
.road-step {
  position: relative;
  text-align: center;
}
.road-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 72px; height: 72px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d6e2fb;
  color: var(--primary);
  box-shadow: 0 0 0 8px var(--bg-soft);   /* masks the dashed line behind */
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.road-icon svg { width: 30px; height: 30px; }
.road-step:hover .road-icon {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-4px);
}
.road-step small {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.road-step h3 { font-size: 17px; font-weight: 700; }
.road-step p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }

/* Demo CTA */
.demo-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding: 36px 44px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--primary) 0%, #2f7bff 100%);
  color: #dce8ff;
}
.demo-cta::after {
  /* dotted accent */
  content: "";
  position: absolute;
  right: -20px; top: -20px;
  width: 180px; height: 120px;
  background-image: radial-gradient(rgba(255, 255, 255, .5) 1.4px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: .5;
  pointer-events: none;
}
.demo-cta h3 { color: #fff; font-size: clamp(22px, 2.4vw, 26px); font-weight: 700; }
.demo-cta p { margin-top: 6px; font-size: 16px; }
.demo-cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.demo-call { font-size: 14px; color: #dce8ff; }
.demo-call:hover { color: #fff; text-decoration: underline; }

@media (max-width: 960px) {
  .roadmap { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin: 0 auto; }
  .roadmap::before { display: none; }
  .road-step:not(:last-child)::after {
    /* vertical connector to the next step */
    content: "";
    position: absolute;
    left: 35px; top: 80px; bottom: 6px;
    border-left: 2px dashed #bfd0f3;
  }
  .road-step {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 20px;
    padding-bottom: 28px;
    text-align: left;
  }
  .road-icon { grid-row: span 3; margin: 0; }
  .road-step small { margin-top: 6px; }
  .demo-cta { flex-direction: column; align-items: flex-start; padding: 32px; }
  .demo-cta-actions { align-items: flex-start; }
}
@media (max-width: 560px) {
  .road-step { grid-template-columns: 60px 1fr; column-gap: 16px; }
  .road-icon { width: 60px; height: 60px; }
  .road-icon svg { width: 26px; height: 26px; }
  .road-step:not(:last-child)::after { left: 29px; top: 68px; }
  .demo-cta::after { display: none; }
  .demo-cta { padding: 28px 22px; margin-top: 44px; }
  .demo-cta-actions, .demo-cta-actions .btn { width: 100%; }
  .demo-cta-actions { align-items: center; }
  .demo-cta-actions .btn { justify-content: center; }
}

/* ==========================================================================
   Web Development — overview (reversed: visual on the left)
   ========================================================================== */
@media (min-width: 961px) {
  .service-intro--reverse .service-visual { order: -1; }
}

/* Browser + phone composition — 60em x 48em canvas */
.web-stage {
  position: relative;
  height: 48em;
  font-size: calc(100cqw / 60);
  line-height: 1.3;
  color: var(--ink);
}
.web-stage::before {
  content: "";
  position: absolute;
  inset: 5em 4em 4em 3em;
  border-radius: 3em;
  background: linear-gradient(135deg, #efeafe 0%, #e8f0ff 100%);
}

.browser {
  position: absolute;
  top: 4em; left: 1em;
  width: 46em;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3e8f2;
  border-radius: 1.4em;
  box-shadow: 0 2.5em 5em rgba(16, 32, 72, 0.16);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 1.4em;
  height: 3.4em;
  padding: 0 1.4em;
  background: #f1f4f9;
  border-bottom: 1px solid #e3e8f2;
}
.browser-dots { display: flex; gap: 0.5em; }
.browser-dots i { width: 0.85em; height: 0.85em; border-radius: 50%; background: #ff5f57; }
.browser-dots i:nth-child(2) { background: #febc2e; }
.browser-dots i:nth-child(3) { background: #28c840; }
.browser-url {
  flex: 1;
  max-width: 24em;
  margin: 0 auto;
  padding: 0.4em 1em;
  background: #fff;
  border-radius: 99em;
  font-size: 0.95em;
  text-align: center;
  color: var(--muted);
}

.site { padding: 2em 2.4em 2.4em; }
.site-nav { display: flex; align-items: center; gap: 1.5em; margin-bottom: 2.6em; }
.site-logo { width: 5.5em; height: 1.4em; border-radius: 0.4em; background: var(--navy); }
.site-links { display: flex; gap: 1.3em; margin-left: auto; }
.site-links i { width: 3em; height: 0.55em; border-radius: 99em; background: #d6dceb; }
.site-btn { width: 5.5em; height: 2.1em; border-radius: 0.55em; background: var(--primary); }

.site-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2.2em;
}
.ln {
  display: block;
  height: 0.7em;
  margin-bottom: 0.8em;
  border-radius: 99em;
  background: #e4e9f2;
}
.ln-h { height: 1.5em; background: var(--ink); }
.ln-short { width: 68%; }
.ln-mid { width: 82%; }
.site-cta {
  display: block;
  width: 8.5em; height: 2.5em;
  margin-top: 1.5em;
  border-radius: 0.6em;
  background: var(--primary);
}
.site-img {
  position: relative;
  height: 13em;
  overflow: hidden;
  border-radius: 1em;
  background: linear-gradient(160deg, #9cc3f5 0%, #5b8ff0 55%, #3f6fe0 100%);
}
.site-img::before {
  /* sun */
  content: "";
  position: absolute;
  top: 18%; right: 18%;
  width: 22%; aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe39a;
}
.site-img::after {
  /* hills */
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: -35%;
  height: 75%;
  border-radius: 50% 50% 0 0;
  background: #2f5fd0;
}

.site-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2em;
  margin-top: 2.4em;
}
.site-cards span {
  padding: 1.2em;
  border: 1px solid var(--line);
  border-radius: 0.9em;
}
.site-cards i { display: block; width: 2.3em; height: 2.3em; margin-bottom: 0.9em; border-radius: 0.6em; }
.site-cards .c-blue { background: #e8f0ff; }
.site-cards .c-green { background: #e3f7ec; }
.site-cards .c-orange { background: #fff0e3; }
.site-cards b { display: block; width: 70%; height: 0.75em; border-radius: 99em; background: var(--ink); }
.site-cards em { display: block; width: 90%; height: 0.55em; margin-top: 0.6em; border-radius: 99em; background: #e4e9f2; }

/* Phone */
.mobile {
  position: absolute;
  right: 0; bottom: 1em;
  width: 16em;
  height: 31em;
  padding: 2.4em 1.2em 1.2em;
  overflow: hidden;
  background: #fff;
  border: 0.55em solid #14171d;
  border-radius: 2.4em;
  box-shadow: 0 3em 5em rgba(16, 32, 72, 0.25);
  z-index: 2;
}
.mobile-notch {
  position: absolute;
  top: 0.45em; left: 50%;
  width: 5em; height: 1.1em;
  transform: translateX(-50%);
  border-radius: 99em;
  background: #14171d;
}
.mobile-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2em; }
.mobile .site-logo { width: 4em; height: 1.1em; }
.mobile-burger i { display: block; width: 1.4em; height: 0.22em; margin: 0.25em 0; border-radius: 99em; background: var(--ink); }
.mobile .site-img { height: 8.5em; margin-bottom: 1.2em; }
.mobile .ln-h { height: 1.1em; }
.mobile .ln { margin-bottom: 0.6em; }
.mobile .site-cta { width: 100%; height: 2.2em; margin-top: 1em; }
.mobile-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; margin-top: 1.1em; }
.mobile-cards span { height: 4.5em; border-radius: 0.7em; background: #f1f4f9; }

/* Floating cards for this composition */
.float-mobile { top: 0.5em; right: 3em; }
.float-enquiry { bottom: 1.5em; left: 0; }
.float-avatar--blue { background: var(--primary-soft); color: var(--primary); }
.float-avatar--blue svg { width: 1.6em; height: 1.6em; }
@media (prefers-reduced-motion: no-preference) {
  .float-mobile { animation: floatY 5s ease-in-out infinite; }
  .float-enquiry { animation: floatY 5s ease-in-out 2.5s infinite; }
}

/* ==========================================================================
   Web Development — what we build
   ========================================================================== */
.build-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.build-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.build-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow); }

.build-preview {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 168px;
  padding: 22px 22px 0;
}
.pv-blue   { background: linear-gradient(160deg, #e8f0ff, #d6e4ff); }
.pv-green  { background: linear-gradient(160deg, #e3f7ec, #cdeedb); }
.pv-orange { background: linear-gradient(160deg, #fff0e3, #ffe1c7); }
.pv-purple { background: linear-gradient(160deg, #efeafe, #e0d6fc); }

/* mini page shared */
.pv-page {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 14px 14px 0;
  background: #fff;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 20px rgba(16, 32, 72, 0.08);
  transition: transform .3s;
}
.build-card:hover .pv-page { transform: translateY(-4px); }
.pv-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pv-nav i { width: 34px; height: 8px; border-radius: 3px; background: var(--navy); }
.pv-nav em { width: 46px; height: 6px; border-radius: 99px; background: #d6dceb; }
.pv-line { display: block; height: 6px; border-radius: 99px; background: #e4e9f2; }
.pv-dark { height: 9px; background: var(--ink); }
.w50 { width: 50%; } .w55 { width: 55%; } .w70 { width: 70%; } .w80 { width: 80%; }
.pv-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 6px; }
.pv-blocks i { height: 40px; border-radius: 6px; background: #eef3ff; }
.pv-blocks i:first-child { background: var(--primary); opacity: .85; }

/* landing page */
.pv-center { align-items: center; }
.pv-btn { width: 60px; height: 14px; margin: 2px 0 4px; border-radius: 5px; background: #16a34a; }
.pv-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 78%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pv-form i { height: 8px; border-radius: 3px; background: #f1f4f9; }
.pv-form b { height: 10px; border-radius: 3px; background: var(--ink); }

/* e-commerce */
.pv-cart { position: relative; width: 16px !important; height: 14px !important; border-radius: 3px !important; background: #f97316 !important; }
.pv-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv-products i { display: flex; flex-direction: column; gap: 5px; }
.pv-products s { height: 52px; border-radius: 6px; background: #fff0e3; text-decoration: none; }
.pv-products u { width: 60%; height: 6px; border-radius: 99px; background: var(--ink); text-decoration: none; }

/* web app */
.pv-app { flex-direction: row; gap: 10px; }
.pv-side { display: flex; flex-direction: column; gap: 7px; width: 26%; padding-right: 8px; border-right: 1px solid var(--line); }
.pv-side i { height: 7px; border-radius: 99px; background: #e4e9f2; }
.pv-side i:first-child { background: #7c3aed; }
.pv-main { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.pv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pv-stats i { height: 26px; border-radius: 6px; background: #f3effe; }
.pv-bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; }
.pv-bars i { flex: 1; border-radius: 3px 3px 0 0; background: #c4b5fd; }
.pv-bars i:nth-child(1) { height: 35%; }
.pv-bars i:nth-child(2) { height: 55%; }
.pv-bars i:nth-child(3) { height: 45%; }
.pv-bars i:nth-child(4) { height: 70%; }
.pv-bars i:nth-child(5) { height: 60%; }
.pv-bars i:nth-child(6) { height: 90%; background: #7c3aed; }

.build-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.build-body h3 { font-size: 18px; font-weight: 700; }
.build-body p { flex: 1; margin: 10px 0 16px; font-size: 15px; line-height: 1.65; }
.build-ideal {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.build-ideal b { color: var(--ink); font-weight: 600; }

@media (max-width: 1024px) {
  .build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .build-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ==========================================================================
   Web Development — included as standard
   ========================================================================== */
.includes {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 64px;
}
.includes-intro {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.includes-intro h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 800;
}
.includes-intro > p { margin-top: 16px; font-size: 17px; line-height: 1.7; }

.advice-card {
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border-left: 4px solid var(--primary);
}
.advice-card b { display: block; font-size: 17px; color: var(--ink); }
.advice-card p { margin: 6px 0 14px; font-size: 15px; }

.includes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.includes-grid li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 24px;
  border-bottom: 1px solid var(--line);
  transition: background .2s;
}
.includes-grid li:nth-child(odd) { border-right: 1px solid var(--line); }
.includes-grid li:nth-last-child(-n+2) { border-bottom: 0; }
.includes-grid li:hover { background: var(--bg-soft); }
.inc-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  transition: background .2s, color .2s;
}
.includes-grid li:hover .inc-icon { background: var(--primary); color: #fff; }
.inc-icon svg { width: 22px; height: 22px; }
.includes-grid h3 { font-size: 16.5px; font-weight: 700; }
.includes-grid p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; }

@media (max-width: 960px) {
  .includes { grid-template-columns: 1fr; gap: 40px; }
  .includes-intro { position: static; }
}
@media (max-width: 640px) {
  .includes-grid { grid-template-columns: 1fr; }
  .includes-grid li:nth-child(odd) { border-right: 0; }
  .includes-grid li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .includes-grid li { padding: 20px; }
}