.service-card { border-radius: 14px; padding: 26px; color: var(--white); box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card.software { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.service-card.media { background: linear-gradient(135deg, #7dd3fc, #38bdf8); }
.service-card a { font-weight: 600; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 22px 34px rgba(15, 23, 42, 0.22); }
.testimonial { max-width: 760px; margin: 0 auto; text-align: center; }
.quote { font-size: 22px; color: var(--neutral-900); }
.author { color: var(--neutral-500); }
.grid-3 > .card { height: 100%; display: flex; flex-direction: column; }
.grid-3 > .card p:last-child { margin-bottom: 0; }
.section .container > p.center {
  margin-top: 2rem;
  margin-bottom: 0;
}
.section .center a { color: var(--brand-primary-dark); font-weight: 600; }
.section .center a:hover { text-decoration: underline; }
.timeline { border-left: 2px solid var(--brand-primary); padding-left: 16px; display: grid; gap: 14px; }
.timeline > div { padding: 8px 0 8px 12px; position: relative; }
.timeline > div::before { content: ""; position: absolute; left: -24px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 4px rgba(26, 111, 255, 0.12); }
.flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.flow span { text-align: center; border: 1px solid var(--neutral-200); border-radius: 10px; padding: 12px 8px; background: var(--white); transition: all 0.25s ease; }
.flow span:hover { border-color: rgba(26, 111, 255, 0.35); box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08); transform: translateY(-2px); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form { display: grid; gap: 10px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--neutral-200); border-radius: 10px; margin-top: 6px; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: rgba(26, 111, 255, 0.45); box-shadow: 0 0 0 4px rgba(26, 111, 255, 0.12); outline: none; }
.tag-line { font-size: 13px; color: var(--neutral-500); }
.tag-line.success { color: #047857; }
.contact-form button:disabled { opacity: 0.75; cursor: not-allowed; }
.meta-line { margin-top: auto; font-size: 12px; color: var(--neutral-500); padding-top: 10px; border-top: 1px dashed rgba(148, 163, 184, 0.35); }
.faq-list { display: grid; gap: 14px; }
.faq-list .card h3 { margin-bottom: 8px; }
.faq-list .card { border-left: 4px solid rgba(56, 189, 248, 0.45); }
.promise-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .service-card { padding: 20px; }
  .service-card h3 { font-size: 20px; }
  .flow { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .promise-grid { grid-template-columns: 1fr; }
  .quote { font-size: 20px; }
  .card:hover, .service-card:hover, .flow span:hover { transform: none; }
  .card, .service-card, .flow span { transition-duration: 0.18s; }
  .meta-line { padding-top: 8px; }
}
@media (max-width: 480px) {
  .flow { grid-template-columns: 1fr; }
  .flow span { padding: 11px 10px; }
  .contact-form input, .contact-form select, .contact-form textarea { font-size: 16px; }
  .faq-list { gap: 10px; }
  .card { padding: 18px; border-radius: 12px; }
  .service-card { border-radius: 12px; }
}
@media (max-width: 430px) {
  .quote { font-size: 18px; }
  .author { font-size: 13px; }
  .tag-line, .meta-line { font-size: 12px; }
}

.demo-grid-wrap { margin-bottom: 32px; }
.demo-grid-wrap .section-title.tight { margin-bottom: 6px; }
.section-lead { margin: 0 0 18px; font-size: 15px; color: var(--neutral-500); line-height: 1.55; }
.demo-cover-wrap { border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: var(--neutral-100); }
.demo-cover { width: 100%; display: block; max-height: 168px; object-fit: cover; }
.card.case.has-demo .btn.demo-open { margin-top: 12px; align-self: flex-start; }

.case-cover-wrap { border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: var(--neutral-100); }
.case-cover-img { width: 100%; display: block; max-height: 168px; object-fit: cover; }
.case-cover-placeholder { height: 120px; margin-bottom: 12px; border-radius: 10px; background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.case-cover-placeholder.case-type-app { background: linear-gradient(135deg, #dbeafe, #93c5fd); }
.case-cover-placeholder.case-type-media { background: linear-gradient(135deg, #f3e8ff, #d8b4fe); }
.card.case.case-from-db .meta-line { margin-top: auto; }