/*
 * J-BSS / Trudian homepage depth layer
 * Scope: index.html only (.home-page)
 * Intent: Russian B2B buying path with restrained, premium depth.
 * Content, facts, URLs and shared page components stay unchanged.
 */

.home-page {
  --home-paper: #f5f1eb;
  --home-paper-deep: #ebe6de;
  --home-ink: #0d1720;
  --home-shadow-soft: 0 16px 34px rgba(20, 30, 38, .08);
  --home-shadow-lift: 0 24px 52px rgba(20, 30, 38, .14), 0 4px 12px rgba(20, 30, 38, .06);
  background: var(--home-paper);
}

.home-page .section-pad {
  position: relative;
  isolation: isolate;
}

.home-page .section-pad > .container {
  position: relative;
  z-index: 1;
}

.home-page .section-head { margin-bottom: clamp(30px, 3.5vw, 48px); }
.home-page .section-title {
  letter-spacing: -.025em;
  text-wrap: balance;
}
.home-page .section-sub { line-height: 1.7; }
.home-page .label-tag {
  border: 1px solid rgba(198, 106, 50, .18);
  box-shadow: 0 3px 10px rgba(164, 80, 34, .07);
}

/* Hero: one dark, high-contrast entry point with a quiet technical texture. */
.home-page .home-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 20%, rgba(198, 106, 50, .20), transparent 28%),
    radial-gradient(circle at 10% 110%, rgba(46, 117, 102, .18), transparent 34%),
    linear-gradient(118deg, #0d1720 0%, #142430 54%, #10202a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.home-page .home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 82%);
}

.home-page .home-hero .container { position: relative; z-index: 1; }
.home-page .home-hero .hero-content { max-width: 660px; }
.home-page .home-hero h1 {
  max-width: 700px;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}
.home-page .home-hero .hero-sub { max-width: 620px; }
.home-page .home-hero .hero-badge {
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.home-page .home-hero .trust-bar {
  max-width: 660px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 32px rgba(0,0,0,.14);
  backdrop-filter: blur(8px);
}

.home-page .home-hero .hero-media {
  width: min(100%, 500px);
  min-height: 0;
  aspect-ratio: 4 / 5;
  border-color: rgba(255,255,255,.3);
  border-radius: 16px;
  box-shadow: 0 34px 70px rgba(0,0,0,.32), 0 0 0 8px rgba(255,255,255,.035);
  transform: translateY(-4px);
}
.home-page .home-hero .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: inherit;
  box-shadow: inset 0 -80px 80px rgba(9, 16, 22, .30);
}
.home-page .home-hero .hero-media img {
  min-height: 0;
  object-fit: cover;
}
.home-page .home-hero .hero-media-caption {
  z-index: 1;
  left: 16px;
  right: 16px;
  bottom: 16px;
  border-radius: 4px;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

/* Navigator: turn the first interaction into a raised decision surface. */
.home-page .navigator-section {
  background:
    linear-gradient(180deg, #f8f5ef 0%, var(--home-paper) 100%);
  border-bottom: 1px solid #e2dcd3;
}
.home-page .navigator-section::before,
.home-page #factory-evidence::before,
.home-page #resheniya::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1180px, 92%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,106,50,.34), transparent);
  transform: translateX(-50%);
}
.home-page .navigator-grid label {
  padding: 15px 16px 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid #e2dcd3;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(20,30,38,.055);
}
.home-page .navigator-grid select {
  border-color: #d7cec4;
  box-shadow: inset 0 1px 2px rgba(20,30,38,.04);
}
.home-page .navigator-result {
  position: relative;
  overflow: hidden;
  border-left-width: 1px;
  border-radius: 12px;
  box-shadow: var(--home-shadow-soft);
}
.home-page .navigator-result::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--copper);
}

/* Evidence strip: a dark proof rail separating selection from catalogue. */
.home-page .evidence-strip {
  position: relative;
  background: linear-gradient(105deg, #10202b 0%, #182c37 55%, #13232d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.24);
}
.home-page .evidence-strip .evidence-item {
  min-height: 62px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.home-page .evidence-strip strong { letter-spacing: -.01em; }
.home-page .evidence-strip span { color: #cbd6d8; line-height: 1.45; }

/* Proof cards and catalogue cards: consistent elevation, copper edge, calm surfaces. */
.home-page #factory-evidence {
  background: linear-gradient(180deg, #f0ece5 0%, #f7f4ee 100%);
}
.home-page #factory-evidence .card-jbss,
.home-page #catalog-preview .product-card,
.home-page #resheniya .solution-card,
.home-page .client-type-card,
.home-page .partner-value-card,
.home-page .integration-tile {
  position: relative;
  border-color: #e0d8ce;
  box-shadow: var(--home-shadow-soft);
}
.home-page #factory-evidence .card-jbss::before,
.home-page #catalog-preview .product-card::before,
.home-page #resheniya .solution-card::before,
.home-page .partner-value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  background: var(--copper);
  border-radius: 0 0 3px 3px;
  opacity: .88;
}
.home-page #factory-evidence .card-jbss,
.home-page #catalog-preview .product-card,
.home-page .client-type-card,
.home-page .partner-value-card,
.home-page .integration-tile { border-radius: 12px; }
.home-page #factory-evidence .card-jbss:hover,
.home-page #catalog-preview .product-card:hover,
.home-page #resheniya .solution-card:hover,
.home-page .client-type-card:hover,
.home-page .partner-value-card:hover,
.home-page .integration-tile:hover {
  border-color: #d6b29d;
  box-shadow: var(--home-shadow-lift);
  transform: translateY(-4px);
}
.home-page #catalog-preview { background: #fff; }
.home-page #catalog-preview .pc-img {
  position: relative;
  background: linear-gradient(145deg, #f6f3ee, #e9e6df);
}
.home-page #catalog-preview .pc-img::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(198,106,50,.16);
  border-radius: 8px;
  pointer-events: none;
}
.home-page #catalog-preview .pc-img.pc-img--product img {
  object-fit: contain;
  padding: 14px;
}
.home-page #catalog-preview .pc-body { background: #fff; }
.home-page #catalog-preview .pc-footer { border-top-color: #e8e0d7; }

/* Solutions: a separate decision layer, not another white card grid. */
.home-page #resheniya {
  background: linear-gradient(180deg, #faf8f4 0%, #f0ece5 100%);
}
.home-page #resheniya .solution-card {
  border: 1px solid #e0d8ce;
  border-top: 3px solid var(--copper);
  border-left-width: 1px;
  border-radius: 12px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--home-shadow-soft);
}

/* OEM is the commercial proof block: warm text surface against a cooler image tile. */
.home-page #oem {
  position: relative;
  overflow: hidden;
  background: linear-gradient(112deg, #e9eeeb 0%, #eef0ec 52%, #e4e9e6 100%);
  border-top: 1px solid #dce2de;
  border-bottom: 1px solid #dce2de;
}
.home-page #oem::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  right: -170px;
  bottom: -240px;
  border: 1px solid rgba(46,117,102,.16);
  border-radius: 50%;
  pointer-events: none;
}
.home-page #oem .row > .col-lg-6:last-child {
  padding: 14px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(198,106,50,.22);
  border-radius: 14px;
  box-shadow: var(--home-shadow-lift);
}
.home-page #oem .row > .col-lg-6:last-child img {
  display: block;
  /* The source is portrait (1122 × 1402). Let the image define the card
     height so the inline max-height from the legacy template cannot create a
     false blank column beside a shrunken image. */
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  border-radius: 9px;
}

/* Architecture is the technical authority section: crisp media, restrained lift. */
.home-page #sistem-diagrammy { background: #fff; }
.home-page #sistem-diagrammy .architecture-card {
  border-color: #ddd7cf;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(20,30,38,.09), 0 2px 7px rgba(20,30,38,.04);
}
.home-page #sistem-diagrammy .architecture-card:hover {
  border-color: #d1a589;
  box-shadow: var(--home-shadow-lift);
  transform: translateY(-4px);
}
.home-page #sistem-diagrammy .architecture-media {
  background: linear-gradient(145deg, #f8f6f1, #eef1f0);
}
.home-page #sistem-diagrammy .architecture-note {
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(20,30,38,.05);
}

/* Alternating surfaces make the long homepage scannable without visual noise. */
.home-page #sertifikaty { background: linear-gradient(180deg, #fff 0%, #f5f1eb 100%); }
.home-page .client-coverage-section { background: #f1ede7; }
.home-page .client-coverage-bottom {
  border-color: #dcd3c8;
  box-shadow: var(--home-shadow-soft);
  border-radius: 12px;
}
.home-page .integration-tile { background: rgba(255,255,255,.94); }
.home-page #faq { background: linear-gradient(180deg, #f8f5ef 0%, #eee9e1 100%); }
.home-page #faq .faq-list {
  border-color: #ded5ca;
  border-radius: 12px;
  box-shadow: var(--home-shadow-soft);
  background: rgba(255,255,255,.72);
}
.home-page .home-contact-bridge {
  background: linear-gradient(110deg, #e9e3db 0%, #f7f4ee 58%, #ece8e1 100%);
  border-top: 1px solid #ddd5cb;
}
.home-page .home-contact-bridge .container {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media (max-width: 767.98px) {
  .home-page .home-hero .hero-media {
    width: 100%;
    max-width: 430px;
    aspect-ratio: 4 / 5;
    transform: none;
  }
  .home-page .home-hero .trust-bar { gap: 12px 18px; }
  .home-page #oem .row > .col-lg-6:last-child { padding: 9px; }
  .home-page #factory-evidence .card-jbss:hover,
  .home-page #catalog-preview .product-card:hover,
  .home-page #resheniya .solution-card:hover,
  .home-page .client-type-card:hover,
  .home-page .partner-value-card:hover,
  .home-page .integration-tile:hover,
  .home-page #sistem-diagrammy .architecture-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page #factory-evidence .card-jbss,
  .home-page #catalog-preview .product-card,
  .home-page #resheniya .solution-card,
  .home-page .client-type-card,
  .home-page .partner-value-card,
  .home-page .integration-tile,
  .home-page #sistem-diagrammy .architecture-card { transition: none; }
}