/* Shared blue liquid-glass theme. The backdrop matches home Services / Footer. */
:root {
  color-scheme: dark;
  --site-bg: #010208;
  --site-blue: #000637;
  --site-background: linear-gradient(182deg, #010208 4.24%, #000637 54.46%, #010208 102.72%);
  --site-ink: #edf5ff;
  --site-muted: #bdcdea;
  --glass-blur: 18px;
  --glass-border: rgba(146, 200, 255, .34);
  --glass-surface: linear-gradient(145deg, rgba(191, 222, 255, .16), rgba(35, 77, 190, .16) 36%, rgba(1, 6, 26, .52));
  --glass-active: linear-gradient(145deg, rgba(193, 230, 255, .23), rgba(30, 100, 216, .23) 36%, rgba(1, 6, 26, .5));
  --glass-control: linear-gradient(135deg, rgba(191, 222, 255, .12), rgba(0, 66, 225, .18) 52%, rgba(1, 4, 17, .46));
  --glass-shadow: inset 0 1px 0 rgba(232, 247, 255, .23), inset 0 -1px 0 rgba(0, 212, 255, .08), 0 18px 44px rgba(0, 0, 20, .28), 0 0 24px rgba(0, 66, 225, .1);
  --glass-highlight: inset 0 1px 0 rgba(232, 247, 255, .36), inset 0 -1px 0 rgba(0, 212, 255, .16), 0 18px 44px rgba(0, 0, 20, .28), 0 0 24px rgba(0, 159, 255, .18);
  --home-heading: var(--site-ink);
  --home-label: var(--site-ink);
  --home-copy: var(--site-muted);
  --home-border: var(--glass-border);
  --home-surface: var(--glass-surface);
  --home-surface-active: var(--glass-active);
  --home-glow: var(--glass-shadow);
  --home-glow-active: var(--glass-highlight);
  --home-glow-hover: var(--glass-highlight);
  --home-control-border: var(--glass-border);
  --home-control-surface: var(--glass-control);
  --home-control-glow: var(--glass-shadow);
  --home-section-background: var(--site-background);
}

html, html body {
  background-color: var(--site-bg) !important;
  color: var(--site-ink);
}

html .wrapper {
  background: var(--site-background) !important;
}

.section_background, .what_you_get, .faq_section, .we_build, .about_pioneering {
  background: var(--site-background) !important;
}

.about_wrapper {
  background-color: var(--site-bg);
}

#home .home_hero-title {
  padding-top: clamp(90px, 12dvh, 140px);
}

/* Cool the section transitions without covering the existing hero images. */
#home .home_hero-visible::after,
.tg_hero .home_hero-visible::after,
#home .home_hero-content::before,
.home_hero-next-wrap,
#home .home_hero-next-wrap,
.what_we_do::after,
.what_bottom-fade,
.about_hero::after,
.contacts_page-content::after {
  background: linear-gradient(180deg, rgba(1, 2, 8, 0), rgba(1, 2, 8, .62) 52%, var(--site-bg));
}

.service_hero--tg .home_hero-visible::before {
  background: linear-gradient(180deg, rgba(1, 2, 8, .78), rgba(1, 2, 8, .4) 48%, transparent);
}

.what_pin {
  box-shadow: inset 0 -170px 150px -100px var(--site-bg);
}

.what_pin::before, .what_pin::after {
  background-image: radial-gradient(ellipse, rgba(0, 66, 225, .23), rgba(0, 212, 255, .05) 42%, transparent 70%);
}

.reviews_background-art {
  filter: hue-rotate(170deg) saturate(.7);
  opacity: .35;
}

.cases_card > img[src*="cases_card-bg"] {
  filter: hue-rotate(170deg) saturate(.7);
}

.we_build-dna {
  mix-blend-mode: screen;
}

.we_build::after {
  background: linear-gradient(180deg, var(--site-bg), rgba(1, 2, 8, .5) 8%, rgba(0, 6, 55, .32) 48%, var(--site-bg));
}

.footer_title {
  background-image: linear-gradient(180deg, #fff, #c2e5ff 46%, #33bfff);
}

/* Glass belongs on individual surfaces, keeping fixed / sticky ancestors intact. */
:is(.numbers_card, .cases_card, .cases_other, .review_card, .contacts_item,
  .blog_top, .blog_card, .we_build-card, .about_pioneering-intro, .about_pioneering-card,
  .what_panel, .faq_item, .contact_form--glass),
.what-we-do-ready .what_we_do-item,
.reviews_swiper .review_deck-card.review_card-active,
.reviews_slider .review_deck-card.review_card-active,
.contacts_item:first-child {
  border: 1px solid var(--glass-border);
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  backdrop-filter: blur(var(--glass-blur)) saturate(145%);
}

.blog_top, .blog_card, .we_build-card, .about_pioneering-card, .what_panel {
  border-radius: 22px;
}

.what_panel {
  padding-block: 24px;
}

.services_items {
  gap: 12px;
}

.blog_top_content {
  background: rgba(0, 6, 55, .14);
  border-color: var(--glass-border);
  box-shadow: none;
}

.blog_card-content, .blog_media {
  background: transparent;
  box-shadow: none;
}

.cases_card :is(.cases_block, .cases_card-type), .cases_card-info--item {
  border-color: rgba(146, 200, 255, .22);
  background: rgba(33, 80, 184, .08);
  box-shadow: inset 0 1px 0 rgba(232, 247, 255, .08);
}

.services_item-text {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  backdrop-filter: blur(var(--glass-blur)) saturate(145%);
}

.home_hero-text {
  padding: 10px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  color: var(--site-ink);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%);
  backdrop-filter: blur(var(--glass-blur)) saturate(145%);
}

.contact_cta-wrap, .contact_cta-wrap--home {
  border-color: var(--glass-border);
  background: var(--site-background);
  box-shadow: var(--glass-shadow);
}

.contact_cta-wrap::before, .contact_cta-wrap::after {
  background: radial-gradient(ellipse, rgba(0, 66, 225, .3), transparent 70%);
}

.contact_form--glass:focus-within, .contact_form--home:focus-within, .faq_item[open] {
  border-color: rgba(0, 212, 255, .64);
  background: var(--glass-active);
  box-shadow: var(--glass-highlight);
}

/* Navigation glass: menus stay opaque enough for legible text over artwork. */
.header, .header.header_scrolled {
  background: linear-gradient(120deg, rgba(13, 29, 70, .52), rgba(1, 6, 26, .68));
  border-bottom: 1px solid rgba(146, 200, 255, .16);
  box-shadow: inset 0 1px 0 rgba(232, 247, 255, .1), 0 8px 30px rgba(0, 0, 20, .16);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
}

.burger_menu.section_background {
  background: linear-gradient(145deg, rgba(28, 57, 122, .83), rgba(0, 6, 55, .91) 54%, rgba(1, 2, 8, .94)) !important;
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow), -24px 0 60px rgba(0, 0, 20, .35);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.lang_switcher_menu, .cases_filter-menu {
  background: linear-gradient(145deg, rgba(25, 48, 98, .94), rgba(1, 6, 26, .97));
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
}

.burger_overlay {
  background: rgba(1, 2, 8, .6);
}

/* Controls use a finer layer of the same glass material. */
:is(.btn, .lang_switcher, .burger_languages, .burger_close, .home_hero-next,
  .talk_btn, .floating_tg_btn, .blog_read-more, .blog_subscribe-btn,
  .contact_form-submit, .contact_form-close, .contact_form-method-options,
  .cases_search, .cases_filter-button, .cases_pagination-arrow, .cases_pagination-dot,
  .review_arrow-cont, .faq_toggle, .home_hero-roi-pill, .blog_socials a, .burger_socials a),
.contact_form--glass :is(.contact_form-submit, .contact_form-close, .contact_form-method-options),
.contact_form--home .contact_form-method-options,
.contact_form--home .contact_form-submit,
.contact_form-field :is(input, textarea), .blog_subscribe-input,
.contact_form--glass .contact_form-field :is(input, textarea),
.contact_form--home .contact_form-field :is(input, textarea) {
  border-color: var(--glass-border);
  color: var(--site-ink);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}

.contact_form-field :is(input, textarea)::placeholder, .blog_subscribe-input::placeholder,
.contact_form--glass .contact_form-field :is(input, textarea)::placeholder,
.contact_form--home .contact_form-field :is(input, textarea)::placeholder {
  color: var(--site-muted);
  opacity: .8;
}

.contact_form-method-options label.active,
.contact_form--glass .contact_form-method-options label.active,
.contact_form--home .contact_form-method-options label.active,
.lang_switcher_option.active, .lang_switcher_option:hover,
.burger_languages button.active, .cases_pagination-dot.active {
  background: var(--glass-active);
  color: #e7faff;
  box-shadow: inset 0 1px 0 rgba(232, 247, 255, .2), 0 0 16px rgba(0, 212, 255, .14);
}

.what_dot, .reviews_pagination-dot {
  border-color: var(--glass-border);
  background: rgba(146, 200, 255, .16);
}

.what_dot.active, .reviews_pagination-dot.active,
.reviews_slider .reviews_pagination-dot.active {
  border-color: #8ceaff;
  background: #00d4ff;
  box-shadow: 0 0 14px rgba(0, 212, 255, .42);
}

:is(.btn, .lang_switcher, .burger_close, .home_hero-next, .talk_btn,
  .floating_tg_btn, .blog_read-more, .blog_subscribe-btn, .contact_form-submit,
  .contact_form-close, .cases_filter-button, .cases_pagination-arrow,
  .review_arrow-cont):hover,
.contact_form--glass .contact_form-submit:hover,
.contact_form--home .contact_form-submit:hover {
  border-color: #8ceaff;
  background: var(--glass-active);
  box-shadow: var(--glass-highlight);
}

:is(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid #8ceaff;
  outline-offset: 4px;
}

.contact_form-field :is(input, textarea)[aria-invalid="true"],
.contact_form--glass .contact_form-field :is(input, textarea)[aria-invalid="true"],
.contact_form--home .contact_form-field :is(input, textarea)[aria-invalid="true"] {
  border-color: #91b6ff;
  box-shadow: 0 0 18px rgba(135, 95, 255, 0.2);
}

.footer_text, .footer_nav-item, .services_subtitle, .numbers_card-text,
.review_card-text, .what_panel-text, .what_we_do-item--desc,
.about_pioneering-card p, .contact_form-note, .contact_form-status {
  color: var(--site-muted);
}

@media (hover: hover) {
  :is(.contacts_item, .blog_card, .cases_card, .cases_other, .services_item-text):hover {
    border-color: rgba(0, 212, 255, .62);
    background: var(--glass-active);
    box-shadow: var(--glass-highlight);
  }
}

@media (max-width: 768px) {
  :root { --glass-blur: 10px; }
  /* Keep the mobile title readable above the astronaut artwork. */
  #home .home_hero-title { padding-top: 64px; z-index: 119; }
  .header, .header.header_scrolled {
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
  .services_item-text { padding: 12px 14px; }
  .home_hero-text { padding: 12px 14px; }
  .blog_top, .blog_card, .we_build-card, .about_pioneering-card, .what_panel {
    border-radius: 16px;
  }
}

@media (max-width: 900px) {
  .tg_hero .home_hero-content {
    background: linear-gradient(180deg, transparent, rgba(1, 2, 8, .96) 18%, var(--site-bg));
  }
}

/* Retain the existing iOS open-menu rendering safeguard. */
@supports (-webkit-touch-callout: none) {
  body.burger_menu_open .header {
    background: var(--site-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-surface: linear-gradient(145deg, #192c51, #0b1645 36%, #030719);
    --glass-active: linear-gradient(145deg, #25416b, #112d65 36%, #030719);
    --glass-control: linear-gradient(135deg, #182947, #0b1b4d 52%, #030719);
  }
  .header, .header.header_scrolled { background: rgba(1, 6, 26, .96); }
}
