
/* Velnora static export fix: responsive layout + reliable mobile navigation */
:root {
  --vel-container: 1180px;
  --vel-page-pad: 20px;
  --vel-header-height: 76px;
}
html { display: block !important; white-space: normal !important; white-space-collapse: collapse !important; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { white-space: normal !important; }
body.velnora-page { margin: 0; }
body.menu-open { overflow: hidden !important; touch-action: none; }
.velnora-page *, .velnora-page *::before, .velnora-page *::after { box-sizing: border-box; }
.velnora-page img, .velnora-page svg, .velnora-page video { max-width: 100%; height: auto; }
.container {
  width: min(calc(100% - (var(--vel-page-pad) * 2)), var(--vel-container)) !important;
  max-width: var(--vel-container) !important;
  margin-inline: auto !important;
  min-width: 0 !important;
}
.hero-grid > *, .quick-links > *, .services-grid > *, .audience-grid > *, .process-grid > *,
.about-grid > *, .contact-grid > *, .form-row > * { min-width: 0 !important; max-width: 100% !important; }

.site-header { position: sticky !important; top: 0 !important; z-index: 1000 !important; overflow: visible !important; }
.header-inner { min-height: var(--vel-header-height) !important; display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 20px !important; }
.desktop-nav { display: flex !important; align-items: center !important; justify-content: center !important; gap: clamp(14px, 2vw, 28px) !important; white-space: nowrap !important; }
.header-actions { display: flex !important; align-items: center !important; gap: 10px !important; }
.mobile-menu-button { display: none !important; width: 46px !important; height: 46px !important; padding: 0 !important; border: 1px solid var(--line) !important; border-radius: 14px !important; background: #fff !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 5px !important; }
.mobile-menu-button .burger-line { display: block !important; width: 20px !important; height: 2px !important; background: var(--ink) !important; border-radius: 99px !important; opacity: 1 !important; transform: none !important; transition: transform .2s ease, opacity .2s ease !important; }
.mobile-menu-button[aria-expanded="true"] .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.mobile-menu-button[aria-expanded="true"] .burger-line:nth-child(2) { opacity: 0 !important; }
.mobile-menu-button[aria-expanded="true"] .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
.mobile-menu {
  display: none !important;
  position: fixed !important;
  inset: var(--vel-header-height) 0 0 0 !important;
  width: 100% !important;
  height: calc(100dvh - var(--vel-header-height)) !important;
  max-height: calc(100dvh - var(--vel-header-height)) !important;
  overflow-y: auto !important;
  padding: 18px var(--vel-page-pad) 36px !important;
  background: #fff !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 20px 45px rgba(49,10,62,.14) !important;
  z-index: 999 !important;
}
.mobile-menu[data-open="true"] { display: block !important; }
.mobile-menu nav { width: min(100%, 680px) !important; margin: 0 auto !important; display: grid !important; gap: 0 !important; }
.mobile-menu nav a { display: flex !important; align-items: center !important; min-height: 58px !important; padding: 12px 4px !important; border-bottom: 1px solid var(--line) !important; font-size: clamp(20px, 5vw, 26px) !important; line-height: 1.15 !important; font-weight: 800 !important; }
.mobile-menu > div { width: min(100%, 680px) !important; margin: 22px auto 0 !important; display: grid !important; gap: 14px !important; }
.mobile-menu > div > a { width: 100% !important; min-height: 54px !important; }
.mobile-menu .lang-switch, .mobile-menu [aria-label*="keel"], .mobile-menu [aria-label*="язык"] { width: fit-content !important; }

.hero-grid { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 16px !important; }
.hero-panel { min-width: 0 !important; }
.quick-links { display: grid !important; grid-template-columns: repeat(6, minmax(0,1fr)) !important; gap: 12px !important; }
.quick-link { min-width: 0 !important; }
.section-heading { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: end !important; gap: 24px !important; }
.services-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 16px !important; }
.audience-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 18px !important; }
.process-grid { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 13px !important; }
.about-grid { display: grid !important; grid-template-columns: .85fr 1.15fr !important; gap: 56px !important; align-items: center !important; }
.contact-grid { display: grid !important; grid-template-columns: .9fr 1.1fr !important; gap: 30px !important; }
.form-row { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; }
.footer-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; }
[data-reveal] { opacity: 1 !important; transform: none !important; }

@media (max-width: 1080px) {
  :root { --vel-header-height: 68px; }
  .desktop-nav, .desktop-language, .desktop-cta { display: none !important; }
  .header-inner { grid-template-columns: minmax(0,1fr) auto !important; gap: 12px !important; }
  .header-actions { justify-self: end !important; }
  .mobile-menu-button { display: flex !important; }
  .quick-links { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .process-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .about-grid { gap: 34px !important; }
}

@media (max-width: 820px) {
  :root { --vel-page-pad: 16px; }
  .hero-grid, .audience-grid, .about-grid, .contact-grid { grid-template-columns: minmax(0,1fr) !important; }
  .hero-panel { min-height: auto !important; }
  .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .about-grid { gap: 24px !important; }
  .contact-grid { gap: 20px !important; padding: 18px !important; }
  .section-heading { grid-template-columns: minmax(0,1fr) !important; align-items: start !important; }
  .section-heading > a { justify-self: start !important; }
}

@media (max-width: 640px) {
  :root { --vel-page-pad: 12px; --vel-header-height: 64px; }
  .header-inner { min-height: var(--vel-header-height) !important; }
  .header-inner > a span:last-child { font-size: 16px !important; }
  .mobile-menu-button { width: 42px !important; height: 42px !important; }
  .hero-grid { gap: 12px !important; }
  .hero-panel { padding: 24px !important; border-radius: 24px !important; }
  .hero-panel h1, .hero-panel h2 { font-size: clamp(34px, 10vw, 47px) !important; max-width: 100% !important; overflow-wrap: anywhere !important; }
  .hero-panel p { max-width: 100% !important; }
  .hero-panel a { max-width: 100% !important; }
  .quick-links { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
  .quick-link { min-height: 88px !important; padding: 11px 8px !important; font-size: 12px !important; }
  .services-grid, .process-grid { grid-template-columns: minmax(0,1fr) !important; }
  .service-card, .audience-card, .process-step { min-height: auto !important; padding: 24px !important; }
  .section h2, .section-heading h2 { font-size: clamp(35px, 10vw, 45px) !important; max-width: 100% !important; overflow-wrap: anywhere !important; }
  .form-row { grid-template-columns: minmax(0,1fr) !important; }
  .contact-form { padding: 20px !important; }
  .contact-form button { width: 100% !important; min-height: 54px !important; }
  .footer-inner { flex-direction: column !important; align-items: flex-start !important; }
  .footer-inner nav { display: flex !important; flex-wrap: wrap !important; }
}

@media (max-width: 390px) {
  .header-inner > a span:last-child { max-width: 165px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .hero-panel { padding: 21px !important; }
  .quick-link { min-height: 82px !important; }
}

.lang-switch { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 4px !important; }
.lang-switch a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 40px !important; height: 38px !important; padding: 0 10px !important; border-radius: 999px !important; }
.mobile-menu-button { overflow: visible !important; }
.mobile-menu-button .burger-line { position: static !important; inset: auto !important; margin: 0 !important; transform-origin: center !important; }
.mobile-cta { display: inline-flex !important; }
.mobile-menu-button { position: relative !important; }
.mobile-menu-button::before,
.mobile-menu-button::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 21px !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: var(--ink) !important;
  opacity: 0 !important;
  transform-origin: center !important;
  transition: opacity .15s ease, transform .2s ease !important;
}
.mobile-menu-button[aria-expanded="true"] .burger-line { opacity: 0 !important; }
.mobile-menu-button[aria-expanded="true"]::before { opacity: 1 !important; transform: translate(-50%,-50%) rotate(45deg) !important; }
.mobile-menu-button[aria-expanded="true"]::after { opacity: 1 !important; transform: translate(-50%,-50%) rotate(-45deg) !important; }
@media (max-width: 1080px) {
  .desktop-language.lang-switch { display: none !important; }
}
