/* Editorial visuals for marketing services and the offer catalog. */
.offer-gallery { border-top: 1px solid #e8eaf2; }
.offer-gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.offer-gallery-head > div { max-width: 760px; }
.offer-gallery-head .section-title { margin-bottom: 0; }
.offer-gallery-head > a { flex: 0 0 auto; color: #5f45bd; font-size: 14px; font-weight: 800; }
.offer-gallery-head > a span { padding-left: 4px; }
.offer-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.offer-gallery-card { display: block; overflow: hidden; border: 1px solid #e3e7ef; border-radius: 18px; background: #fff; box-shadow: 0 15px 38px rgba(24, 32, 62, .07); transition: transform .25s ease, box-shadow .25s ease; }
.offer-gallery-card:hover, .offer-gallery-card:focus-visible { transform: translateY(-4px); box-shadow: 0 21px 42px rgba(24, 32, 62, .12); }
.offer-gallery-card picture { display: block; overflow: hidden; border-bottom: 1px solid #e9edf3; }
.offer-gallery-card img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; }
.offer-gallery-card > span { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; align-items: center; padding: 18px 21px 20px; }
.offer-gallery-card small { grid-column: 1; color: #79849a; font-size: 11px; font-weight: 700; }
.offer-gallery-card strong { grid-column: 1; color: #202546; font-size: 19px; line-height: 1.2; }
.offer-gallery-card i { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid #e2ddf2; border-radius: 50%; color: #6750bf; font-size: 16px; font-style: normal; }

.marketing-visual { overflow: hidden; border-top: 1px solid #e9ebf2; background: #f7f8fc; }
.marketing-visual-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(50px, 7vw, 115px); }
.marketing-visual-copy { max-width: 575px; }
.marketing-visual-copy .section-title { margin: 0 0 20px; letter-spacing: -.035em; }
.marketing-visual-copy > p { color: #5d6980; font-size: 17px; line-height: 1.75; }
.marketing-visual-copy ul { display: grid; gap: 11px; margin-top: 27px; }
.marketing-visual-copy li { display: flex; align-items: center; gap: 11px; color: #303a5b; font-size: 14px; font-weight: 650; }
.marketing-visual-copy li::before { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #7b60cc; }
.marketing-visual-copy > a { display: inline-flex; gap: 8px; margin-top: 30px; color: #6047bb; font-size: 14px; font-weight: 800; }
.marketing-visual-copy > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.marketing-visual-art { min-width: 0; }
.marketing-visual--design .marketing-visual-art, .marketing-visual--photo .marketing-visual-art { grid-column: 1; grid-row: 1; }
.marketing-visual--design .marketing-visual-copy, .marketing-visual--photo .marketing-visual-copy { grid-column: 2; }
.mv-window-head { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 20px; border-bottom: 1px solid rgba(164, 183, 224, .18); color: #95a4c5; font-size: 10px; letter-spacing: .1em; }
.mv-window-head > span { display: flex; gap: 5px; }
.mv-window-head i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #5ec7e4; }
.mv-window-head i:nth-child(2) { background: #8e7ada; }
.mv-window-head i:nth-child(3) { background: #d875bb; }

.mv-social-board, .mv-content-board { overflow: hidden; border: 1px solid #445178; border-radius: 22px; background: #121a34; box-shadow: 0 27px 55px rgba(21, 28, 56, .17); }
.mv-social-content { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 14px; padding: 22px; }
.mv-social-feature { position: relative; min-height: 285px; overflow: hidden; padding: 27px; border-radius: 15px; background: linear-gradient(145deg, #285e9f, #774bb1 65%, #ad5a9a); color: #fff; }
.mv-social-feature small, .mv-social-feature strong, .mv-social-feature p { position: relative; z-index: 1; }
.mv-social-feature small { color: #bfeaf8; font-size: 10px; font-weight: 850; letter-spacing: .11em; }
.mv-social-feature strong { display: block; max-width: 245px; margin-top: 37px; font-size: clamp(27px, 3vw, 40px); line-height: 1.05; letter-spacing: -.045em; }
.mv-social-feature p { max-width: 215px; margin-top: 14px; color: #ecebff; font-size: 12px; line-height: 1.5; }
.mv-social-shape { position: absolute; right: -30px; bottom: -45px; width: 185px; height: 185px; border: 1px solid rgba(255,255,255,.25); border-radius: 36px; transform: rotate(25deg); }
.mv-social-shape i { position: absolute; inset: 21px; border: 1px solid rgba(255,255,255,.18); border-radius: 30px; }
.mv-social-shape i:nth-child(2) { inset: 43px; }
.mv-social-shape i:nth-child(3) { inset: 65px; background: rgba(255,255,255,.13); }
.mv-social-side { display: grid; gap: 14px; }
.mv-social-side > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 135px; padding: 19px; border: 1px solid #34405e; border-radius: 14px; background: #1b2645; }
.mv-social-side small { color: #91cef0; font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.mv-social-side strong { max-width: 160px; color: #fff; font-size: 15px; line-height: 1.2; }
.mv-social-side span { width: 65%; height: 4px; border-radius: 4px; background: #667a9d; }
.mv-social-footer { display: flex; align-items: center; gap: 11px; padding: 0 22px 22px; color: #aab9d9; font-size: 10px; font-weight: 800; }
.mv-social-footer span { padding: 7px 10px; border: 1px solid #3a4668; border-radius: 6px; }
.mv-social-footer i { flex: 1; height: 1px; margin-left: 8px; background: linear-gradient(90deg, #6d8ed6, transparent); }

.mv-design-board { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-rows: 250px 142px; gap: 15px; padding: 20px; border: 1px solid #e4e7ef; border-radius: 22px; background: #fff; box-shadow: 0 27px 55px rgba(21, 28, 56, .12); }
.mv-design-main { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: 32px; border-radius: 15px; background: #152242; color: #fff; }
.mv-design-main small, .mv-design-palette small, .mv-design-card small { font-size: 10px; font-weight: 850; letter-spacing: .11em; }
.mv-design-main small { color: #8ed8ee; }
.mv-design-main strong { margin-top: 37px; font-size: clamp(40px, 4vw, 59px); line-height: .95; letter-spacing: -.065em; }
.mv-design-main strong span { color: #d775bf; }
.mv-design-rule { width: 80px; height: 4px; margin-top: 30px; border-radius: 4px; background: linear-gradient(90deg, #53bde1, #b858b4); }
.mv-design-main p { max-width: 220px; margin-top: 15px; color: #b8c8e2; font-size: 13px; line-height: 1.55; }
.mv-design-palette { display: flex; flex-direction: column; justify-content: space-between; padding: 23px; border: 1px solid #e9e9f0; border-radius: 15px; background: #f6f4fb; color: #343456; }
.mv-design-palette > span { display: flex; flex-wrap: wrap; gap: 9px; }
.mv-design-palette i { width: 39px; height: 39px; border-radius: 50%; background: #182344; }
.mv-design-palette i:nth-child(2) { background: #3ea9d8; }
.mv-design-palette i:nth-child(3) { background: #8b5dcc; }
.mv-design-palette i:nth-child(4) { background: #d86ba9; }
.mv-design-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 19px 20px; border-radius: 15px; background: linear-gradient(135deg, #5e52b2, #a653a6); color: #fff; }
.mv-design-card strong { max-width: 155px; font-size: 16px; line-height: 1.22; }
.mv-design-card span { position: absolute; right: 18px; bottom: 16px; font-size: 21px; }

.mv-photo-board { padding: 17px; border: 1px solid #35405f; border-radius: 22px; background: #10182d; box-shadow: 0 27px 55px rgba(21, 28, 56, .18); }
.mv-photo-head { display: flex; justify-content: space-between; padding: 4px 4px 16px; color: #a2b2d0; font-size: 10px; font-weight: 850; letter-spacing: .11em; }
.mv-photo-frame { position: relative; height: 272px; overflow: hidden; border-radius: 13px; background: linear-gradient(160deg, #6386b9, #a484b3 62%, #d39a9a); }
.mv-photo-frame::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 7px; }
.mv-photo-sun { position: absolute; top: 32px; right: 21%; width: 88px; height: 88px; border-radius: 50%; background: #ffe0c9; box-shadow: 0 0 55px rgba(255,230,210,.48); }
.mv-photo-hill { position: absolute; width: 85%; height: 230px; border-radius: 50% 50% 0 0; }
.mv-photo-hill-a { left: -10%; bottom: -110px; background: #243f6f; transform: rotate(-10deg); }
.mv-photo-hill-b { right: -25%; bottom: -135px; background: #1c3156; transform: rotate(12deg); }
.mv-photo-focus { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; transform: translate(-50%, -50%); }
.mv-photo-focus::before, .mv-photo-focus::after { content: ''; position: absolute; background: rgba(255,255,255,.65); }
.mv-photo-focus::before { width: 16px; height: 1px; left: 28px; top: 35px; }
.mv-photo-focus::after { width: 1px; height: 16px; left: 35px; top: 28px; }
.mv-photo-frame > b { position: absolute; z-index: 1; left: 29px; bottom: 27px; color: #fff; font-size: 10px; letter-spacing: .12em; }
.mv-photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.mv-photo-strip > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; min-height: 75px; padding: 13px; border-radius: 10px; background: #1d2942; color: #fff; }
.mv-photo-strip span { color: #8ed4ea; font-size: 10px; font-weight: 850; }
.mv-photo-strip i { height: 1px; background: #4d668a; }
.mv-photo-strip strong { grid-column: 1 / 3; font-size: 13px; }

.mv-content-page { margin: 21px; padding: 34px; border-radius: 15px; background: #f9fbff; color: #1e2a4b; }
.mv-content-page small { color: #6865bf; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.mv-content-page strong { display: block; max-width: 390px; margin-top: 30px; font-size: clamp(30px, 3vw, 43px); line-height: 1.1; letter-spacing: -.05em; }
.mv-content-page p { max-width: 370px; margin-top: 15px; color: #5c6b85; font-size: 13px; line-height: 1.6; }
.mv-content-lines { display: grid; gap: 8px; margin-top: 24px; }
.mv-content-lines i { width: 90%; height: 6px; border-radius: 6px; background: #dbe3f0; }
.mv-content-lines i:nth-child(2) { width: 80%; }
.mv-content-lines i:nth-child(3) { width: 56%; background: #8d80db; }
.mv-content-steps { display: flex; gap: 8px; margin-top: 29px; }
.mv-content-steps span { padding: 8px; border: 1px solid #e1e5ef; border-radius: 7px; background: #fff; color: #425174; font-size: 10px; font-weight: 800; }

@media (max-width: 1000px) {
  .marketing-visual-grid { grid-template-columns: 1fr; gap: 40px; }
  .marketing-visual--design .marketing-visual-art, .marketing-visual--photo .marketing-visual-art,
  .marketing-visual--design .marketing-visual-copy, .marketing-visual--photo .marketing-visual-copy { grid-column: auto; grid-row: auto; }
  .marketing-visual-copy { max-width: 720px; }
  .marketing-visual-art { width: min(690px, 100%); }
  .offer-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .offer-gallery-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .offer-gallery-grid { grid-template-columns: 1fr; gap: 15px; }
  .marketing-visual-copy > p { font-size: 15px; }
  .mv-social-content { gap: 9px; padding: 12px; }
  .mv-social-feature { min-height: 240px; padding: 20px; }
  .mv-social-side { gap: 9px; }
  .mv-social-side > div { min-height: 115px; padding: 12px; }
  .mv-social-side strong { font-size: 12px; }
  .mv-social-footer { padding: 0 12px 14px; }
  .mv-design-board { grid-template-rows: 210px 120px; gap: 10px; padding: 12px; }
  .mv-design-main { padding: 20px; }
  .mv-design-main strong { font-size: 38px; }
  .mv-design-palette { padding: 13px; }
  .mv-design-palette i { width: 24px; height: 24px; }
  .mv-design-card { padding: 13px; }
  .mv-design-card strong { font-size: 12px; }
  .mv-photo-frame { height: 230px; }
  .mv-content-page { margin: 12px; padding: 22px; }
  .mv-content-steps { flex-wrap: wrap; }
}