/* Section content must stay visible regardless of scroll position or height. */
#root main > div { opacity: 1 !important; transform: none !important; }
@media (max-width: 1199px) {
  html, body { max-width: 100%; overflow-x: clip; }
  #root header { background: rgba(7, 14, 24, .96); }
  #root header nav { padding: 10px 24px; }
  #root header nav > div { flex-wrap: wrap; gap: 8px; }
  #root header nav > div > :first-child { order: 1; min-width: 0; }
  #root header nav > div > :first-child :is(h1,p) { font-size: 22px; line-height: 1.4; }
  #root header nav > div > :nth-child(2) {
    display: flex; order: 3; flex-basis: 100%; justify-content: space-between;
    gap: 12px; margin: 0; padding: 5px 0 2px;
  }
  #root header nav > div > :nth-child(2) > a {
    margin: 0; white-space: nowrap; font-size: 14px; padding: 4px 0;
  }
  #root header nav > div > :last-child { order: 2; margin-left: auto; }
  #root header nav > div > :last-child > :last-child { display: none; }
  #root #home { padding-top: 104px; min-height: 100svh; }
  #root main section:not(#home) {
    padding: 48px 24px; min-height: 0; scroll-margin-top: 104px;
  }
  #root main section > .container { padding-left: 0; padding-right: 0; }
  #root main section h2 { font-size: 32px; line-height: 1.25; }
  #root main section > .container > .text-center { margin-bottom: 32px; }
  #root main section#certificates { padding-bottom: 24px; }
  #root main section#work { padding-top: 24px; }
  #root #certificates .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  #root #certificates .glass-card { padding: 20px; height: auto; min-height: 0; }
  #root #certificates .glass-card h3 { overflow-wrap: anywhere; }
  #root #work .glass-card { padding: 20px; }
  #root #work .container > div > .mb-16 { margin-bottom: 32px; }
  #root #tech-tools > .relative { padding-left: 0; padding-right: 0; }
  #root #tech-tools .gap-12 { gap: 24px; }
  #root #testimonials > div { padding-left: 0; padding-right: 0; }
  #root #project-demos iframe { width: 100%; }
}
@media (max-width: 639px) {
  #root header nav { padding-left: 16px; padding-right: 16px; }
  #root header nav > div > :first-child :is(h1,p) { font-size: clamp(16px, 5vw, 20px); }
  #root header nav > div > :nth-child(2) { gap: 8px; }
  #root header nav > div > :nth-child(2) > a { font-size: 12px; }
  #root #home { padding-top: 96px; }
  #root #home .container { padding: 24px 16px; }
  #root main section:not(#home) { padding: 36px 16px; scroll-margin-top: 96px; }
  #root main section h2 { font-size: 28px; }
  #root main section > .container > .text-center { margin-bottom: 24px; }
  #root main section .text-xl { font-size: 17px; line-height: 1.65; }
  #root main section#certificates { padding-bottom: 16px; }
  #root main section#work { padding-top: 16px; }
  #root #certificates .grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #root #certificates .glass-card, #root #work .glass-card { padding: 18px; }
  #root #certificates .mb-12 { margin-bottom: 24px; }
  #root #certificates .mb-12 > button { white-space: normal; height: auto; min-height: 40px; }
  #root #work h3 { font-size: 22px; line-height: 1.35; }
  #root #work .mb-8 { margin-bottom: 20px; }
  #root #project-demos .gap-4 { gap: 8px; }
  #root #project-demos button { max-width: 100%; white-space: normal; height: auto; min-height: 40px; }
  #root main img, #root main iframe { max-width: 100%; }
  #root .glass-card { min-width: 0; }
  [data-discovery-hub] { margin: 16px !important; padding: 20px !important; }
}