/* ============================================================
   EMERGENCY RESET & GLOBAL STABILIZATION
   ============================================================ */

/* 1. GLOBAL LAYOUT FIXES */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* Remove 100vh forcing globally */
.hero,
.ip-hero,
.page-hero,
.section-full,
section {
  min-height: auto !important;
  height: auto !important;
}

/* Establish Global Vertical Rhythm (Section padding) */
/* Desktop: ~96px-112px, Mobile: ~64px-72px */
section,
.section,
.clarity-bar,
.system-section,
.founder-section,
.services-preview-section,
.ip-section {
  padding-top: clamp(64px, 8vw, 112px) !important;
  padding-bottom: clamp(64px, 8vw, 112px) !important;
}

/* Compact sections (e.g. quote, short stats) */
.ip-quote-section,
.ip-stats-section,
.founder-quote {
  padding-top: clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}

/* Footer spacing - natural, no huge gap */
.footer {
  margin-top: 0 !important;
  padding-top: clamp(48px, 6vw, 80px) !important;
}

/* Hero padding fix - below nav */
.ip-hero,
.hero,
.page-hero {
  padding-top: calc(var(--nav-height, 80px) + clamp(2rem, 5vh, 4rem)) !important;
  padding-bottom: clamp(3rem, 6vh, 4rem) !important;
}

.hero__content {
  padding-top: calc(var(--nav-height, 80px) + clamp(1rem, 3vh, 2rem)) !important;
  padding-bottom: clamp(2rem, 5vh, 3rem) !important;
}

/* Fix Hero Split balancing */
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(auto, 820px) 1fr !important;
    gap: var(--sp-8);
  }
}

/* Right dark panel refinement */
.hero__panel {
  padding: var(--sp-6) !important; /* give inner breathing room */
}

.hero__panel-inner {
  justify-content: center !important; /* center the content vertically */
  padding: 0 !important;
}

.hero__panel-portrait {
  min-height: auto !important;
  aspect-ratio: auto !important;
  padding: var(--sp-8) var(--sp-6) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--bg-dark-elevated) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2) !important;
  margin: var(--sp-6) 0 !important;
}

.hero__panel-portrait-icon {
  margin: 0 auto var(--sp-4) !important;
  opacity: 1 !important;
}

/* NEW SYSTEM PLACEHOLDER IN HERO */
.system-placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 100%;
}

.system-placeholder__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-dark-primary);
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: var(--sp-3);
}

.system-placeholder__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.system-placeholder__list li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-dark-secondary);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.system-placeholder__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--amber);
  flex-shrink: 0;
}

.system-placeholder__footer {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dark-muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-top: var(--sp-3);
  opacity: 0.8;
}

/* Hero titles */
h1,
.hero__title,
.ip-hero__title,
.page-hero__title,
.hero__headline {
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important; /* Slightly smaller min to fit Russian words */
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  max-width: 1000px;
  margin-bottom: var(--sp-5) !important;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 2. CARD STABILITY & FIXES */
.card h2,
.card h3,
.service-card h2,
.service-card h3,
.case-card h2,
.case-card h3,
.article-card h2,
.article-card h3,
.ip-card h2,
.ip-card h3,
.ip-service-card__title,
.ip-case-card__title,
.case-preview-card__title {
  font-size: clamp(1.25rem, 1.8vw, 1.875rem) !important; /* Max ~30px for neater titles */
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

/* Stats for Hero */
.stat__value,
.metric__value,
.hero-stat__value,
.ip-stat__value,
.hero__panel-stat-value,
.result-stat__value,
.trust-strip__value {
  font-size: clamp(2rem, 4vw, 4rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}

/* Stats inside Cards */
.card .stat__value,
.card .metric__value,
.case-card .stat__value,
.case-card .metric__value,
.ip-case-card__metric-value,
.case-preview-card__metric-value {
  font-size: clamp(1.75rem, 3vw, 3.25rem) !important; /* Max ~52px */
}

/* Cards shouldn't crop content */
.service-card,
.case-card,
.article-card,
.ip-card,
.ip-service-card,
.ip-case-card,
.case-preview-card {
  min-height: auto; 
  height: auto !important;
  overflow: visible !important; 
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Provide generous padding in case framework cards */
.ip-case-card {
  padding: clamp(1.5rem, 2.5vw, 2.25rem) !important; /* Denser padding */
  display: flex;
  flex-direction: column;
  gap: var(--sp-4) !important;
  background-color: #FDFBF7 !important; /* Warm off-white premium feel */
  border: 1px solid rgba(0,0,0,0.06) !important; /* Super subtle border */
  box-shadow: 0 8px 32px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02) !important; /* Soft deep shadow */
  border-radius: var(--radius-xl) !important;
  transition: all 0.3s ease !important;
}

.ip-case-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04) !important;
  border-color: rgba(255,122,26,0.2) !important;
  transform: translateY(-4px) !important;
}

/* CASE CARD CONTRAST OVERRIDES */
.ip-case-card .ip-case-card__title {
  color: var(--text-primary) !important; /* Make sure it's dark and readable */
}
.ip-case-card .ip-case-card__csr-text,
.ip-case-card .ip-case-card__category {
  color: var(--text-secondary) !important; /* Main readable body text */
}
.ip-case-card .ip-case-card__csr-label,
.ip-case-card .ip-case-card__num,
.ip-case-card .ip-case-card__metric-label {
  color: var(--storm) !important; /* Secondary readable blue-grey */
}
.ip-case-card .ip-case-card__disclaimer {
  color: var(--text-muted) !important;
  opacity: 0.65 !important;
}
.ip-case-card .ip-case-card__cta {
  color: var(--text-primary) !important;
}
.ip-case-card .ip-case-card__metric-value {
  color: var(--amber) !important; /* Expressive metric */
}
.ip-case-card:hover .ip-case-card__cta {
  color: var(--amber) !important;
}

/* Grid logic */
.grid > *,
.services-grid > *,
.cases-grid > *,
.insights-grid > *,
.ip-services-grid > *,
.ip-cases-grid > *,
.ip-contact-layout > * {
  min-width: 0;
  max-width: 100%;
}

/* Fix Case frameworks grid to 3-col on desktop */
@media (min-width: 1024px) {
  .ip-cases-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 3. CONTACT PAGE ALIGNMENT FIX */
.ip-contact-layout {
  align-items: stretch !important; /* allow children to dictate height or flex */
}

/* Form and Right block top alignment */
.ip-form {
  margin-top: 0 !important;
}

/* Direct Contact Block Polish */
.ip-direct-contact {
  padding: clamp(2rem, 3vw, 3rem) !important;
  border-radius: var(--radius-xl) !important;
  background-color: var(--bg-dark-card) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
  overflow: visible !important;
  margin-top: 0 !important; 
  transform: none !important;
  position: relative !important;
  height: 100% !important; /* Fill column naturally */
  display: flex !important;
  flex-direction: column !important;
}

.ip-direct-contact__title {
  margin-top: 0 !important;
  margin-bottom: var(--sp-6) !important;
  font-size: var(--text-xl) !important;
  color: var(--text-dark-primary) !important;
}

/* Contact "What happens next" right panel polish */
.ip-next-steps {
  padding-top: clamp(40px, 5vw, 48px) !important;
  padding-bottom: clamp(40px, 5vw, 48px) !important;
  padding-left: clamp(32px, 5vw, 56px) !important;
  padding-right: clamp(32px, 5vw, 56px) !important;
  border-radius: var(--radius-xl) !important;
  background-color: var(--bg-secondary) !important; /* Soft card background */
  border: 1px solid var(--border) !important;
}

.ip-next-steps__title {
  margin-top: 0 !important;
  margin-bottom: clamp(24px, 3vw, 32px) !important; /* Separates title from first step */
  padding: 0 !important; /* Reset any inner padding that might shift it left/right */
  text-align: left !important;
}

/* Fix Contact page huge gap before CTA */
#contact-form {
  padding-bottom: clamp(48px, 6vw, 80px) !important; /* Less gap below the form grid */
}

#contact-form + .ip-cta {
  margin-top: clamp(16px, 3vw, 32px) !important; /* Minimal top margin to bridge the gap smoothly */
}

/* 4. FINAL CTA COMPACTNESS & TRANSITION */
.ip-cta {
  max-width: 1120px !important;
  margin-inline: auto !important;
  border-radius: var(--radius-xl) !important;
  padding-block: clamp(48px, 5vw, 72px) !important; /* REDUCED PADDING 15-20% */
  padding-inline: clamp(24px, 5vw, 64px) !important;
  box-shadow: 0 16px 64px rgba(0,0,0,0.2) !important; /* Premium soft shadow */
  margin-top: clamp(64px, 8vw, 112px) !important; /* Transition space before CTA for standard pages */
  margin-bottom: clamp(64px, 8vw, 112px) !important; /* space before footer */
  border: 1px solid rgba(255,255,255,0.08) !important; /* Subtle inner border for premium dark feel */
}

/* Reset final CTA wrapper to avoid dark ocean */
main > section:last-of-type.ip-cta {
  margin-bottom: clamp(64px, 8vw, 112px) !important;
}

/* 5. ABOUT PAGE PRINCIPLES & QUOTE */
.ip-quote__text {
  font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
  line-height: 1.2 !important;
  max-width: 900px !important;
  margin-inline: auto !important;
}

.ip-principle-row {
  padding-block: clamp(2rem, 4vw, 3.5rem) !important;
  border-bottom: 1px solid var(--border) !important;
  align-items: flex-start !important;
  gap: var(--sp-8) !important;
}

/* 6. INSIGHTS PAGE EDITORIAL TIGHTNESS */
.ip-insights-header {
  margin-bottom: var(--sp-8) !important;
}

.ip-filters {
  margin-bottom: var(--sp-10) !important;
  gap: var(--sp-3) !important;
}

/* 7. REMOVE DECORATIVE GIANTS & BACKGROUNDS */
.about-hero::before,
.about-hero::after,
.ip-hero::before,
.ip-hero::after,
.hero::before,
.hero::after {
  background-image: none !important;
  display: none !important;
}

.decorative-logo,
.bg-logo,
.hero-bg-logo,
.about-bg-logo {
  display: none !important;
}

img,
svg,
video {
  max-width: 100%;
}

/* 8. MICRO POLISH: HEADER & NAVBAR */
/* Global Light Glass styling (default behavior and scroll state) */
.nav {
  background-color: rgba(247, 245, 239, 0.88) !important; 
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; 
  box-shadow: 0 4px 24px rgba(0,0,0,0.04) !important; 
}

/* Ensure links in light nav are dark */
.nav__link,
.logo__add {
  color: var(--text-primary) !important; 
}

.logo__blitz {
  color: var(--amber) !important; 
}

/* FIX: Support .nav__link--active and other active states */
.nav__link:hover,
.nav__link--active,
.nav__link.active,
.nav__link[aria-current="page"] {
  color: var(--amber) !important;
}

/* Mobile hamburger on light nav */
.nav__hamburger span {
  background-color: var(--text-primary) !important;
}

/* --- EXCEPTION: TRANSPARENT DARK NAV AT TOP OF INNER PAGES --- */
/* If a nav starts on a dark hero and hasn't scrolled yet, make it dark and transparent */
.nav.nav--dark-start:not(.nav--scrolled) {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
}

/* Text must be light on dark transparent nav */
.nav.nav--dark-start:not(.nav--scrolled) .nav__link,
.nav.nav--dark-start:not(.nav--scrolled) .logo__add {
  color: var(--text-dark-primary) !important;
}

/* Keep amber hover/active on dark nav */
.nav.nav--dark-start:not(.nav--scrolled) .nav__link:hover,
.nav.nav--dark-start:not(.nav--scrolled) .nav__link--active,
.nav.nav--dark-start:not(.nav--scrolled) .nav__link.active,
.nav.nav--dark-start:not(.nav--scrolled) .nav__link[aria-current="page"] {
  color: var(--amber) !important;
}

/* Mobile hamburger on dark nav */
.nav.nav--dark-start:not(.nav--scrolled) .nav__hamburger span {
  background-color: var(--text-dark-primary) !important;
}

/* 9. HOME PAGE "HOW IT WORKS" SECTION ALIGNMENT */

/* Hide rogue decorative elements (orbs) globally in the system section */
.system-section::before,
.system-section::after {
  display: none !important;
}

.system-section {
  padding-block: clamp(56px, 6vw, 88px) !important; /* More compact section padding so it fits 1080p viewport */
  position: relative !important;
}

/* --- UPPER HEADER ALIGNMENT --- */
.system-section .section-header {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.system-section .section-header__eyebrow {
  justify-content: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.system-section .section-header__title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.system-section .section-header__sub {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  line-height: 1.5 !important;
}
/* ------------------------------- */

/* Central Diagram Grid Alignment */
.system-flow {
  max-width: 1280px !important;
  margin: clamp(40px, 5vw, 64px) auto clamp(40px, 5vw, 64px) !important;
  grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr !important;
  align-items: start !important;
  position: relative !important;
}

/* Hide broken decorative circle/line */
.system-flow::before {
  display: none !important;
}

/* Align and center internal node contents (Icon, Title, Desc) */
.system-node {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.system-node__step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}

.system-node__icon-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.system-node__name {
  text-align: center !important;
  margin-bottom: 16px !important;
}

.system-node__desc {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 240px !important;
  line-height: 1.5 !important;
}

/* Align arrows strictly with the center of the icons */
.system-arrow {
  padding-top: 0 !important;
  margin-top: 64px !important; /* Pushes the arrow down to horizontally intersect with the icon */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Centered, cohesive CTA block at the bottom of the section */
.system-tagline {
  padding-top: clamp(24px, 3vw, 40px) !important; /* Tighter inner top padding above the border */
  margin-top: 0 !important; /* Eliminate excessive extra top margin */
  
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(24px, 4vw, 64px) !important; /* Premium gap */
  max-width: 1280px !important; /* Limit width so it doesn't spread infinitely */
  margin-left: auto !important; /* Center the block horizontally */
  margin-right: auto !important;
}

.system-tagline__text {
  max-width: 720px !important; /* Restrict line length for readability */
  line-height: 1.3 !important;
}

.system-tagline .btn {
  flex-shrink: 0 !important; /* Prevent button from squeezing */
}

/* RESPONSIVE LOGIC */

/* Tablet (1024px) */
@media (max-width: 1024px) {
  .system-flow {
    /* Keep 4 columns but reduce gap between them so they fit gracefully */
    grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr !important;
  }
}

/* Tablet portrait / Mobile (768px) */
@media (max-width: 768px) {
  .system-flow {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 48px !important;
    margin-top: 48px !important;
  }
  .system-arrow {
    display: none !important; /* Hide horizontal arrows on vertical mobile stack */
  }
  .system-tagline {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--sp-6) !important;
  }
}

/* FIX: Secondary buttons visibility on dark hero sections (like about.html) */
.ip-hero .btn--secondary,
.ip-hero .btn--outline,
.ip-hero .btn--ghost,
.page-hero .btn--secondary,
.page-hero .btn--outline,
.page-hero .btn--ghost {
  color: var(--text-dark-primary) !important;
  border-color: rgba(245, 242, 234, 0.65) !important;
  background: transparent !important;
}

.ip-hero .btn--secondary svg,
.ip-hero .btn--outline svg,
.ip-hero .btn--ghost svg,
.page-hero .btn--secondary svg,
.page-hero .btn--outline svg,
.page-hero .btn--ghost svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

.ip-hero .btn--secondary:hover,
.ip-hero .btn--outline:hover,
.ip-hero .btn--ghost:hover,
.page-hero .btn--secondary:hover,
.page-hero .btn--outline:hover,
.page-hero .btn--ghost:hover {
  color: var(--text-primary) !important;
  background: var(--text-dark-primary) !important;
  border-color: var(--text-dark-primary) !important;
}