/* ═══════════════════════════════════════════════════════════
   MoCap Labs — shared base stylesheet
   Load after theme.css (which defines all --c-* and --f-* vars)
═══════════════════════════════════════════════════════════ */

/* ─── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:              var(--c-bg);
  color:                   var(--c-text);
  font-family:             var(--f-display);
  font-weight:             var(--w-regular);
  font-size:               1rem;
  line-height:             1.65;
  -webkit-font-smoothing:  antialiased;
}
img, svg { display: block; max-width: 100%; }
a        { color: inherit; text-decoration: none; }
em       { font-style: normal; }

/* ─── Typography ──────────────────────────────────────────── */
h1 {
  font-family:   var(--f-display);
  font-weight:   var(--w-black);
  font-size:     clamp(2rem, 5vw, 3.75rem);
  line-height:   1.1;
  letter-spacing: -0.01em;
}
h2 {
  font-family:  var(--f-display);
  font-weight:  var(--w-black);
  font-size:    clamp(1.375rem, 2.5vw, 2rem);
  line-height:  1.2;
  margin-bottom: 2rem;
}
h3 {
  font-family:  var(--f-display);
  font-weight:  var(--w-black);
  font-size:    clamp(1rem, 1.5vw, 1.25rem);
  line-height:  1.3;
  margin-bottom: 0.5rem;
}
p { max-width: 68ch; }
p + p { margin-top: 0.75em; }

.mono {
  font-family:    var(--f-mono);
  font-weight:    var(--w-regular);
  letter-spacing: 0.02em;
}

/* ─── Layout ──────────────────────────────────────────────── */
.container {
  max-width:      var(--max-w);
  margin-inline:  auto;
  padding-inline: var(--pad-x);
}
section { padding-block: var(--section-py); }
section.surface { background: var(--c-surface); }

/* ─── Language visibility ─────────────────────────────────── */
.lang-en .ru { display: none !important; }
.lang-ru .en { display: none !important; }

/* ─── Header ──────────────────────────────────────────────── */
.site-header {
  position:      sticky;
  top:           0;
  z-index:       100;
  background:    var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
.header-inner {
  display:     flex;
  align-items: center;
  gap:         2rem;
  height:      64px;
}
.logo {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  flex-shrink: 0;
}
.logo-mark    { width: 36px; height: 36px; }
.logo-wordmark {
  font-family:    var(--f-display);
  font-weight:    var(--w-black);
  font-size:      0.8125rem;
  letter-spacing: 0.1em;
  color:          var(--c-text);
  text-transform: uppercase;
}
.site-nav {
  display:       flex;
  gap:           1.75rem;
  margin-inline: auto;
}
.site-nav a {
  font-size:  0.875rem;
  color:      var(--c-secondary);
  transition: color 0.15s;
}
.site-nav a:hover { color: var(--c-text); }
.lang-toggle {
  background:  none;
  border:      1px solid var(--c-border);
  color:       var(--c-secondary);
  font-family: var(--f-display);
  font-size:   0.75rem;
  letter-spacing: 0.08em;
  padding:     0.25rem 0.625rem;
  cursor:      pointer;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition:  border-color 0.15s, color 0.15s;
}
.lang-toggle:hover { border-color: var(--c-secondary); color: var(--c-text); }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display:      inline-block;
  font-family:  var(--f-display);
  font-weight:  var(--w-regular);
  font-size:    0.9375rem;
  line-height:  1;
  padding:      0.9rem 1.75rem;
  border-radius: var(--r-sm);
  border:       1px solid transparent;
  cursor:       pointer;
  transition:   opacity 0.15s;
  white-space:  nowrap;
}
.btn:hover          { opacity: 0.85; }
.btn-primary        { background: var(--c-accent); color: var(--c-bg); border-color: var(--c-accent); }
.btn-outline        { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }
button.btn          { font-size: 0.9375rem; }

/* ─── Hero ────────────────────────────────────────────────── */
#hero {
  padding-block: clamp(5rem, 15vw, 9rem) clamp(4rem, 10vw, 7rem);
}
.hero-subline {
  color:         var(--c-secondary);
  font-size:     clamp(0.9375rem, 1.5vw, 1.0625rem);
  margin-block:  1.75rem 2.5rem;
  max-width:     56ch;
}
.hero-ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
}

/* ─── Three Pillars ───────────────────────────────────────── */
.pillars-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  border:                1px solid var(--c-border);
  gap:                   1px;
  background:            var(--c-border);
}
.pillar {
  background: var(--c-bg);
  padding:    2.5rem;
}
.pillar-descriptor {
  font-family:    var(--f-mono);
  font-size:      0.8rem;
  color:          var(--c-accent);
  line-height:    1.45;
  margin-bottom:  1.25rem;
}
.pillar-body {
  color:       var(--c-secondary);
  font-size:   0.9375rem;
  line-height: 1.65;
}

/* ─── Facility ────────────────────────────────────────────── */
.facility-intro {
  color:         var(--c-secondary);
  max-width:     62ch;
  margin-bottom: 2.5rem;
}
.facility-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9375rem;
  display:         block;
  overflow-x:      auto;
  max-width:       740px;
}
.facility-table tr        { border-bottom: 1px solid var(--c-border); }
.facility-table tr:last-child { border-bottom: none; }
.facility-table th,
.facility-table td        { padding: 0.875rem 0; vertical-align: top; text-align: left; }
.facility-table th {
  font-family:    var(--f-mono);
  font-size:      0.8rem;
  font-weight:    var(--w-regular);
  color:          var(--c-secondary);
  letter-spacing: 0.04em;
  padding-right:  2.5rem;
  width:          230px;
  white-space:    nowrap;
}

.formats-disclosure {
  margin-top:    2rem;
  border:        1px solid var(--c-border);
  border-radius: var(--r-md);
  max-width:     740px;
}
.formats-disclosure summary {
  font-family:    var(--f-mono);
  font-size:      0.8rem;
  color:          var(--c-accent);
  letter-spacing: 0.04em;
  padding:        0.875rem 1.25rem;
  cursor:         pointer;
  list-style:     none;
  display:        flex;
  align-items:    center;
  gap:            0.625rem;
  user-select:    none;
}
.formats-disclosure summary::-webkit-details-marker { display: none; }
.formats-disclosure summary::before {
  content:     '+';
  font-size:   1rem;
  line-height: 1;
  flex-shrink: 0;
  transition:  transform 0.2s;
  display:     inline-block;
  width:       1em;
  text-align:  center;
}
.formats-disclosure[open] summary::before { transform: rotate(45deg); }
.formats-disclosure-body {
  padding:     0 1.25rem 1.25rem;
  color:       var(--c-secondary);
  font-size:   0.9rem;
  line-height: 1.65;
}

/* ─── Pricing ─────────────────────────────────────────────── */
.pricing-steps {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  border:                1px solid var(--c-border);
  margin-bottom:         2.5rem;
}
.pricing-step {
  padding:      2rem 1.75rem;
  border-right: 1px solid var(--c-border);
}
.pricing-step:last-child { border-right: none; }
.step-number {
  font-family:    var(--f-mono);
  font-size:      0.75rem;
  color:          var(--c-accent);
  letter-spacing: 0.1em;
  margin-bottom:  0.75rem;
}
.step-label {
  font-weight:   var(--w-black);
  font-size:     0.9375rem;
  line-height:   1.3;
  margin-bottom: 0.5rem;
}
.step-label .optional { color: var(--c-secondary); font-weight: var(--w-regular); font-size: 0.875em; }
.step-descriptor {
  font-size:   0.875rem;
  color:       var(--c-secondary);
  line-height: 1.5;
}
.step-explanation {
  font-size:    0.8125rem;
  color:        var(--c-secondary);
  opacity:      0.75;
  margin-top:   0.625rem;
  line-height:  1.5;
}
.pricing-caption {
  color:         var(--c-secondary);
  font-size:     0.875rem;
  max-width:     60ch;
  margin-bottom: 2rem;
  line-height:   1.6;
}

/* ─── Trust & Compliance ──────────────────────────────────── */
.compliance-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  border:                1px solid var(--c-border);
  background:            var(--c-border);
  margin-bottom:         1.5rem;
}
.compliance-card {
  background: var(--c-surface);
  padding:    2.5rem;
}
.compliance-card h3 { margin-bottom: 1.25rem; }
.compliance-card p {
  font-size:     0.9375rem;
  color:         var(--c-secondary);
  line-height:   1.65;
  margin-bottom: 1.75rem;
}
.legal-entity-line {
  font-family: var(--f-mono);
  font-size:   0.8125rem;
  color:       var(--c-secondary);
  line-height: 1.65;
  padding:     1.25rem 1.5rem;
  border:      1px solid var(--c-border);
  border-radius: var(--r-md);
}
.legal-entity-line p { max-width: none; }

/* ─── Contact ─────────────────────────────────────────────── */
.contact-intro {
  color:         var(--c-secondary);
  margin-bottom: 2.5rem;
  max-width:     60ch;
}
.contact-form { max-width: 680px; }
.form-row {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           1rem;
  margin-bottom: 1rem;
}
.form-field {
  display:        flex;
  flex-direction: column;
  gap:            0.375rem;
}
.form-field.full { grid-column: 1 / -1; }
label {
  font-family:    var(--f-mono);
  font-size:      0.7375rem;
  letter-spacing: 0.07em;
  color:          var(--c-secondary);
  text-transform: uppercase;
}
input, select, textarea {
  background:  var(--c-bg);
  border:      1px solid var(--c-border);
  border-radius: var(--r-sm);
  color:       var(--c-text);
  font-family: var(--f-display);
  font-size:   0.9375rem;
  padding:     0.75rem 1rem;
  outline:     none;
  width:       100%;
  transition:  border-color 0.15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--c-accent); }
select {
  appearance:          none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B7AFA4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 1rem center;
  padding-right:       2.5rem;
}
select option   { background: var(--c-bg); }
textarea        { resize: vertical; min-height: 120px; }
.form-submit    { margin-top: 1.5rem; }
.form-success {
  margin-top:  1.5rem;
  font-family: var(--f-mono);
  font-size:   0.875rem;
  color:       var(--c-secondary);
  line-height: 1.65;
  max-width:   56ch;
}

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer {
  border-top:    1px solid var(--c-border);
  padding-block: 2rem;
}
.footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1.5rem;
  flex-wrap:       wrap;
}
.footer-logo {
  display:     flex;
  align-items: center;
  gap:         0.625rem;
}
.footer-logo img  { width: 24px; height: 24px; }
.footer-logo span {
  font-family:    var(--f-display);
  font-weight:    var(--w-black);
  font-size:      0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-legal {
  font-family: var(--f-mono);
  font-size:   0.75rem;
  color:       var(--c-secondary);
}
.footer-contact {
  display:   flex;
  gap:       1.5rem;
  font-size: 0.875rem;
  color:     var(--c-secondary);
}
.footer-contact a { transition: color 0.15s; }
.footer-contact a:hover { color: var(--c-text); }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .pricing-steps { grid-template-columns: 1fr 1fr; }
  .pricing-step  { border-bottom: 1px solid var(--c-border); }
  .pricing-step:nth-child(2) { border-right: none; }
  .pricing-step:nth-child(3) { border-bottom: none; }
  .pricing-step:last-child   { border-bottom: none; }
}

@media (max-width: 640px) {
  .site-nav { display: none; }
  .header-inner { justify-content: space-between; }

  .pillars-grid { grid-template-columns: 1fr; }

  .compliance-grid { grid-template-columns: 1fr; }

  .pricing-steps { grid-template-columns: 1fr; }
  .pricing-step  { border-right: none; border-bottom: 1px solid var(--c-border); }
  .pricing-step:last-child { border-bottom: none; }

  .form-row { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}