/* VLABA · editorial diagrams, 8 November 2026. Hero stays independent. */
.graphic-icon { display: block; flex: none; width: 22px; height: 22px; }
.direction-divider { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; flex: none; }
.services__grid { gap: 24px; }
.service-card { background: #fff; border: 1px solid #dbe3e7; border-radius: 18px; padding: 30px; min-height: 0; box-shadow: none; }
.service-card:hover { transform: none; box-shadow: none; border-color: #9eb5c4; }
.service-card__top { align-items: center; }
.service-card__index { color: #4c6475; letter-spacing: 1.3px; }
.service-card__mark { width: 34px; height: 34px; border: 1px solid #ccd8df; background: transparent; color: #23465f; }
.service-card__mark .graphic-icon { width: 18px; height: 18px; }
.service-visual { width: 100%; aspect-ratio: 13 / 6; margin: 24px 0 29px; }
.service-visual svg { display: block; width: 100%; height: 100%; }
.service-card h3 { font-size: clamp(35px, 3.55vw, 49px); letter-spacing: -2px; line-height: 1.1; }
.service-card p { font-size: 15px; line-height: 1.7; color: #50616d; max-width: 460px; }
.service-card ul { margin-top: 10px; gap: 12px; }
.service-card li { font-size: 13px; color: #314857; padding-left: 18px; }
.service-card li:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #2987bd; top: .55em; }
.service-card__link { padding-top: 24px; border-top-color: #dbe3e7; margin-top: auto; }
.services__foot { gap: 14px; color: #4f6370; }
.services__asterisk { color: #397797; }
.services__asterisk .graphic-icon { width: 25px; height: 25px; }
.case-grid { gap: 24px; }
.case-card { border: 1px solid #dce3e6; border-radius: 14px; background: #fff; box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.case-card:hover { transform: none; border-color: #8ba9bc; box-shadow: 0 8px 24px #102b3e0b; }
.case-card__cover { height: auto; aspect-ratio: 8 / 5; border-bottom: 1px solid #10263b0a; overflow: hidden; }
.case-illustration, .case-visual { display: block; width: 100%; height: 100%; }
.case-illustration { overflow: hidden; background: #e7edf1; }
.case-card__content { padding: 23px 24px 25px; }
.case-card__eyebrow { color: #46687d; font-size: 10px; line-height: 1.55; letter-spacing: .1px; gap: 12px; }
.case-card__num { color: #7d8c97; font-variant-numeric: tabular-nums; }
.case-card h3 { font-size: 22px; line-height: 1.27; letter-spacing: -.65px; margin: 14px 0 12px; }
.case-card p { color: #556773; font-size: 13px; line-height: 1.7; }
.case-card__more { font-size: 12px; color: #193e59; padding-top: 4px; }
.case-visual-fallback { padding: 28px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; background: #e1ebf1; color: #15394a; }
.case-visual-fallback span { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.case-visual-fallback strong { font-size: clamp(20px, 2.2vw, 32px); line-height: 1.2; }
.portfolio__note { align-items: flex-start; color: #596e7c; font-size: 12px; line-height: 1.65; gap: 10px; }
.portfolio__note > span { color: #4f7891; }
.portfolio__note .graphic-icon { width: 18px; height: 18px; margin-top: 1px; }
.detail-hero__art { height: auto; aspect-ratio: 8 / 5; border-radius: 14px; box-shadow: none; border: 1px solid #ffffff18; }
.case-grid--related .case-card__cover { height: auto; }
.highlight:after { width: 300px; height: 100%; inset: 0 0 auto auto; border: 0; border-radius: 0; box-shadow: none; background: repeating-linear-gradient(90deg, transparent 0 74px, #ffffff05 74px 75px); }
.contact:before { width: 100%; height: 100%; inset: 0; border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(90deg, transparent calc(50% - 1px), #ffffff16 50%, transparent calc(50% + 1px)); }
.contact__tg-icon { background: #bdeaff; }
.contact__tg-icon .graphic-icon { width: 23px; height: 23px; }
.contact-form-card { box-shadow: 0 12px 32px #0643691c; border: 1px solid #ffffff60; border-radius: 18px; }
@media (max-width: 990px) {
  .services__grid, .case-grid { gap: 18px; }
  .service-card { padding: 23px; }
  .case-card__content { padding: 18px; }
  .case-card h3 { font-size: 19px; }
}
@media (max-width: 760px) {
  .service-card { padding: 25px; }
  .service-card h3 { font-size: 43px; }
  .service-visual { margin: 22px 0 27px; }
  .case-card h3 { font-size: 19px; }
  .case-card__content { padding: 20px; }
  .detail-hero__art { max-width: 600px; }
  .contact-form-card { box-shadow: 0 12px 32px #0643691c; }
}
@media (max-width: 480px) {
  .service-card { padding: 20px; border-radius: 14px; }
  .service-card h3 { font-size: 36px; letter-spacing: -1.5px; }
  .service-card p { font-size: 14px; }
  .service-card li { font-size: 12px; }
  .case-card h3 { font-size: 22px; }
  .case-grid { gap: 22px; }
  .case-card__content { padding: 22px; }
  .case-grid--related .case-card__cover { height: auto; }
  .portfolio__note { font-size: 11px; }
}
.service-visual__mobile { display: none !important; }
@media (max-width: 1100px) and (min-width: 761px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .case-grid, .case-grid--related { grid-template-columns: 1fr; }
  .case-card h3 { font-size: 22px; }
}
@media (max-width: 480px) {
  .service-visual { aspect-ratio: 32 / 21; }
  .service-visual__desktop { display: none !important; }
  .service-visual__mobile { display: block !important; }
}

/* Hide decorative ordering in case cards and the work process. */
.case-card__num, .step__num { display: none; }

/* Generated bots illustration: wide desktop and readable square mobile composition. */
.service-visual--bot { aspect-ratio: 1844 / 853; }
.service-visual--bot picture, .service-visual--bot .service-visual__image { display: block; width: 100%; height: 100%; }
.service-visual--bot .service-visual__image { object-fit: contain; border-radius: 12px; }
@media (max-width: 480px) { .service-visual--bot { aspect-ratio: 1; } }

/* Complete raster illustration set, generated from the approved bots style. */
.service-visual--web { aspect-ratio: 1844 / 853; }
.service-visual--web picture, .service-visual--web .service-visual__image { display: block; width: 100%; height: 100%; }
.service-visual--web .service-visual__image { object-fit: contain; border-radius: 12px; }
.case-illustration { background: #e9f2f8; }
img.case-visual { object-fit: contain; }
.hero .browser-mock { border: 0; background: transparent url("illustrations/hero-web-v3.webp") center / contain no-repeat; box-shadow: none; overflow: visible; }
.hero .browser-mock > * { display: none; }
.hero .phone-mock { border-color: #102f48; }
.hero .phone-mock__notch { background: #102f48; }
.hero .phone-mock__body { background: #e9f2f8; background-image: none; }
.hero .chat-message--outgoing { background: #c5eafe; color: #102f48; }
@media (max-width: 480px) { .service-visual--web { aspect-ratio: 1; } }