/* Light orbital accents echo the planet in the original Color Express logo.
   Shared by the static homepage, service pages and legal pages. */
:root {
  --dark: #14233c;
  --gray: #536077;
  --lgray: #f3f6fc;
  --border: #dce4ef;
  --space-ink: #101e38;
  --space-blue: #076d9e;
}
body { background: #fcfdff; color: var(--dark); }
::selection { background: #c5e9ff; color: #102442; }
:is(h1, h2, h3) { text-wrap: balance; }
section[id] { scroll-margin-top: 88px; }
.header { border-bottom-color: #e2e9f3; box-shadow: 0 4px 20px rgb(17 35 63 / .05); }
.hdr-phone { font-size: 13px; font-weight: 600; }
.nav > a { text-transform: none; letter-spacing: 0; font-size: 14px; }
.hero { overflow: hidden; background-color: var(--space-ink); }
.hero-overlay { background: linear-gradient(105deg, rgb(9 22 45 / .91), rgb(12 36 65 / .62) 55%, rgb(12 27 48 / .78)); }
.hero::before, .hero::after {
  content: ''; position: absolute; pointer-events: none;
  width: 76vw; height: 30vw; min-height: 220px;
  border: 1px solid rgb(179 217 255 / .24); border-radius: 50%;
  right: -20vw; top: 25%; transform: rotate(-33deg);
}
.hero::after { width: 85vw; height: 42vw; right: -25vw; top: 18%; border-color: rgb(179 217 255 / .12); }
.hero-inner { width: 100%; }
.hero-text h1 { font-weight: 650; max-width: 850px; margin-inline: auto; font-size: clamp(36px, 5.5vw, 74px); line-height: 1.08; letter-spacing: -.035em; }
.hero-sub { max-width: 580px; font-size: 17px; color: #dce8f7; margin-top: 24px; }
.hero-label { display: none; }
.hero .btn { min-height: 48px; padding-inline: 26px; }
.sec-title, .sec-title-left { font-weight: 650; letter-spacing: -.03em; }
.sec-sub { line-height: 1.8; }
.section { padding-block: 96px; }
.sec-head { margin-bottom: 48px; }
.sec-label { color: var(--space-blue); }
.reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }

/* The service catalogue keeps the supplied pictograms and familiar links. */
.svc-icon-grid { border: 1px solid var(--border); border-radius: 20px; overflow: hidden; gap: 1px; background: #fff; }
.svc-icon-item { background: #fff; border: 0; padding: 32px 22px; }
.svc-icon-item::after { content: none; }
.svc-icon-item:hover { background: #eff7ff; transform: none; box-shadow: none; }
.svc-icon-img { width: 62px; height: 62px; margin-bottom: 20px; }
.svc-icon-item:hover .svc-icon-img img { transform: translateY(-3px); }
.svc-icon-item h3 { font-weight: 500; }

/* Photos fill their frames; there are no grey mattes or control strip. */
.gallery-section { background: #f3f6fc; }
.gallery-section .sec-head { margin-bottom: 40px; }
.work-slide figcaption { font-size: 13px; color: #596981; margin-top: 16px; }
.work-slide.is-current figcaption { color: var(--dark); }
.work-image { border-radius: 16px; }
.work-track { padding-block: 3px; }
.work-image:focus-visible { outline-offset: -4px; }

.banner-section { background-color: var(--space-ink); padding-block: 80px; }
.banner-overlay { background: rgb(10 26 51 / .88); }
.banner-title h2 { font-weight: 600; text-transform: none; letter-spacing: -.025em; max-width: 740px; }
.badv-ico { background: #193d61; color: #a6e0ff; font-weight: 500; }
.badv-item strong { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 15px; }
.badv-item p { color: #c3d0e3; }
.adv-card { border: 0; border-top: 1px solid #b9cbe0; border-radius: 0; padding-top: 18px; }
.adv-card:hover { transform: none; box-shadow: none; }
.adv-img { margin: 8px 20px 20px; height: 58px; }
.adv-num { display: none; }
.adv-body h3 { text-transform: none; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.adv-body p { line-height: 1.85; }
.about-section { background: #f3f6fc; }
.about-img { border-radius: 18px; box-shadow: none; }
.about-badge { background: #152d4c; box-shadow: none; font-size: 16px; width: 104px; height: 104px; border: 5px solid #f3f6fc; }
.about-text p { line-height: 1.9; }
.about-text .sec-label { display: none; }

/* A quiet orbital composition replaces the flat cyan call to action. */
.cta-banner { position: relative; isolation: isolate; overflow: hidden; background: #122844; padding-block: 88px; }
.cta-banner::before, .cta-banner::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 700px; height: 330px; border: 1px solid #345471; border-radius: 50%;
  left: -350px; top: 20px; transform: rotate(-32deg);
}
.cta-banner::after { left: auto; right: -420px; top: -60px; width: 850px; height: 400px; border-color: #284764; }
.cta-inner h2 { font-weight: 600; letter-spacing: -.03em; }
.cta-inner p { color: #c9d9ed; }
.ci-icon { border-color: #c5d7e9; color: var(--space-blue); }
.ci-item strong { font-size: 12px; font-weight: 600; letter-spacing: .05em; color: #52647c; }
.contacts-map { border-radius: 18px; box-shadow: none; }
.seo-section { background: #f4f7fc; }
.seo-stats { border-color: #d7e2f0; border-radius: 16px; }
.seo-stat span { font-size: 34px; font-weight: 600; color: #12648d; }
.seo-text { max-width: 900px; }
.seo-text p { line-height: 1.9; }
.footer { background: #101e33; }
.footer-desc, .footer-col p, .footer-col ul a { color: #c1ccdc; }
.footer-col h4, .footer-bottom p { color: #a6b7cf; }

/* The same surface treatment continues on the service pages. */
.hero-block { background: #f3f6fc; padding-block: 72px; }
.hero-left h1 { font-weight: 650; font-size: clamp(28px, 3.5vw, 46px); letter-spacing: -.03em; }
.hero-desc { line-height: 1.85; }
.breadcrumb a { color: var(--space-blue); }
.breadcrumb span { color: #536077; }
.product-img-wrap { border-radius: 14px; }
.product-body h3 { font-weight: 600; letter-spacing: -.02em; }
.catalog-icon { background: #e5f2fb; }
.catalog-icon i { color: var(--space-blue); }
.page { border-radius: 18px; box-shadow: none; }
.page .brand, .page .back { color: var(--space-blue); }
.page h1 { color: var(--dark); }
.multibutton__button { animation: none; box-shadow: none; background: #12648d; }
.multibutton { right: 24px; bottom: 24px; width: 54px; height: 54px; }
.multibutton__button { width: 54px; height: 54px; }
.multibutton__button svg { width: 26px; height: 26px; }
.multibutton__title { background: #122844; color: #fff; border-radius: 8px; }

@media (max-width: 1100px) {
  .hero { min-height: 78svh; padding-top: 0; }
  .hero-inner { padding-block: 72px; }
  .nav-mob-contacts .mob-wa { border-radius: 8px; text-transform: none; letter-spacing: 0; }
  .about-img-wrap { max-width: 560px; }
}
@media (max-width: 600px) {
  .section { padding-block: 64px; }
  .hero-inner { padding-inline: 24px; }
  .hero-sub { font-size: 15px; }
  .hero::before { width: 140vw; height: 80vw; right: -70vw; }
  .hero::after { width: 180vw; height: 120vw; right: -90vw; }
  .svc-icon-grid { grid-template-columns: repeat(2, 1fr); border-radius: 16px; }
  .svc-icon-item { padding: 24px 12px; }
  .svc-icon-img { width: 46px; height: 46px; margin-bottom: 14px; }
  .svc-icon-item h3 { font-size: 13px; }
  .adv-grid { grid-template-columns: 1fr; gap: 28px; }
  .adv-body { padding-top: 4px; }
  .about-grid { gap: 40px; }
  .cta-banner { padding-block: 64px; }
  .hero-block { padding-block: 40px; }
  .multibutton { right: 16px; bottom: 16px; }
}