/* =========================================================
   RESPONSIVE — preserves the previous website's spacing rules
========================================================= */

@media (max-width: 1100px) {
  :root { --container-padding: 2rem; }

  .navbar { padding-inline: 2rem; gap:1.25rem; }
  .navbar .logo img { width:8rem; }
  .navbar-link ul { gap:1.15rem; }
  .navbar-link a { font-size:11px; }
  .nav-cta { min-width:86px; padding-inline:1.1rem; font-size:10px; }

  .hero { padding-left:2rem; }
  .hero-visual { margin-right:-3%; }
  .ecosystem-section > .container,
  .work-section > .container { padding:2rem; }
  .about-container { padding:2rem; }
  .process-section { padding-inline:2rem; }
  .faq-section { padding-inline:2rem; }
  .contact-section { padding:2rem; }
  .footer-container { padding-left:2rem; padding-right:2rem; }
  .footer-bottom { padding-left:2rem; padding-right:2rem; }
}

@media (max-width: 768px) {
  .site-header,
  header { height:72px; }
  body { padding-top:72px; }

  .navbar { min-height:72px; padding-inline:2rem; gap:1rem; }
  .navbar .logo img { width:8rem; }
  .navbar-link { position:absolute; left:2rem; right:2rem; top:76px; background:var(--color-white); border-radius:var(--radius-md); padding:14px; box-shadow:0 20px 45px rgba(43,43,43,.12); display:none; }
  .navbar-link.open { display:block; }
  .navbar-link ul { flex-direction:column; gap:4px; }
  .navbar-link a { display:block; width:100%; padding:12px 10px; font-size:12px; }
  .nav-cta { display:none; }
  .nav-toggle { display:block; border:0; background:none; color:var(--color-dark); font-size:20px; }

  .hero-section { min-height:auto; }
  .hero { min-height:auto; display:flex; flex-direction:column; align-items:stretch; padding-left:2rem; padding-right:2rem; }
  .hero-copy { width:100%; padding:60px 0 20px; }
  .hero h1 { font-size:48px; }
  .hero-copy > p { font-size:14px; }
  .hero-actions { gap:12px; margin-top:25px; }
  .btn { font-size:16px; padding:.7rem 1.7rem; }
  .hero-visual { width:100%; height:480px; margin:0; }
  .hero-art-card { width:100%; }
  .floating-idea { top:9%; right:2%; }
  .floating-create { bottom:8%; left:2%; }

  .about-container { grid-template-columns:1fr; gap:45px; padding:60px 2rem; }
  .about-copy h2,.section-heading h2,.work-heading h2,.faq-intro h2,.contact-copy h2 { font-size:40px; }
  .about-copy > p { font-size:14px; }

  .ecosystem-section > .container { padding:60px 2rem; }
  .section-heading { margin-bottom:25px; }
  .section-heading > p { font-size:14px; }
  .ecosystem-grid { flex-direction:column; gap:25px; margin-top:2rem; }
  .ecosystem-card { width:100%; min-height:217px; }

  .work-section { padding:60px 0 70px; }
  .work-section > .container { padding:0 2rem; }
  .work-heading { margin-bottom:25px; }
  .work-heading > p { font-size:14px; }
  .work-grid { grid-template-columns:1fr 1fr; grid-auto-rows:220px; gap:16px; }
  .work-large { grid-row:span 1; }
  .work-wide { grid-column:1/3; }

  .process-section { padding:60px 2rem; }
  .process-section > .container { padding:45px 20px 50px; border-radius:24px; }
  .process-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .process-card { min-height:180px; }

  .faq-section { padding:60px 2rem; }
  .faq-layout { grid-template-columns:1fr; gap:45px; }
  .faq-intro > p { font-size:14px; }
  .faq-intro img { width:220px; }
  .faq-list summary { font-size:16px; }
  .faq-list details p { font-size:13px; }

  .contact-section { padding:20px 2rem 30px; }
  .contact-inner { align-items:center; text-align:center; }
  .contact-inner h2 { font-size:40px; }
  .contact-inner > p { font-size:14px; }
  .contact-break { display:none; }
  .contact-button { width:min(352px, 100%); font-size:15px; }

  .footer-container { min-height:auto; padding:55px 2rem 45px; grid-template-columns:1fr; }
  .footer-links-grid { grid-template-columns:repeat(2,1fr); gap:35px; }
  .footer-bottom { padding:20px 2rem; flex-direction:column; gap:8px; }
}

@media (max-width: 520px) {
  :root { --container-padding:1.2rem; }

  .navbar { padding-inline:1.2rem; }
  .navbar .logo img { width:7rem; }
  .navbar-link { left:1.2rem; right:1.2rem; }

  .hero { padding-left:1.2rem; padding-right:1.2rem; }
  .hero-copy { padding-top:55px; }
  .hero h1 { font-size:43px; }
  .hero-copy > p { font-size:13px; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .hero-visual { height:390px; }
  .hero-art-card { width:110%; margin-left:-5%; }
  .floating-card { padding:10px 12px; }
  .floating-card span { display:none; }

  .about-container { padding:50px 1.2rem; }
  .about-copy h2,.section-heading h2,.work-heading h2,.faq-intro h2,.contact-copy h2 { font-size:36px; }
  .image-caption { right:12px; bottom:12px; }
  .image-caption strong { font-size:17px; }

  .ecosystem-section > .container { padding:50px 1.2rem; }
  .ecosystem-card { padding:2rem; }
  .ecosystem-card a { font-size:14px; padding:.65rem 1.5rem; }

  .work-section { padding:50px 0 60px; }
  .work-section > .container { padding:0 1.2rem; }
  .work-grid { grid-template-columns:1fr; grid-auto-rows:240px; }
  .work-wide { grid-column:auto; }

  .process-section { padding:50px 1.2rem; }
  .process-grid { grid-template-columns:1fr; }
  .process-card { min-height:210px; }

  .faq-section { padding:50px 1.2rem; }
  .faq-list summary { font-size:15px; }

  .contact-section { padding:50px 1.2rem; }
  .contact-copy h2 { font-size:36px; }

  .footer-container { padding-inline:1.2rem; }
  .footer-links-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { padding-inline:1.2rem; }
}

/* =========================================================
   TYPOGRAPHY & SPACING ONLY — RESPONSIVE
   Keeps the revised layout intact while restoring the original
   website's type scale and spacing rhythm.
========================================================= */
@media (max-width: 1100px) {
  .navbar { padding-inline: 2rem; gap: 1.25rem; }
  .navbar .logo img { width: 8rem; }
  .navbar-link ul { gap: 1.15rem; }
  .navbar-link a { font-size: 11px; }
  .nav-cta { min-width: 86px; padding-inline: 1.1rem; font-size: 10px; }
  .hero h1 { font-size: 54px; }
  .about-container { gap: 50px; }
  .about-copy h2, .section-heading h2, .work-heading h2, .faq-intro h2, .contact-copy h2 { font-size: 44px; }
  .ecosystem-grid { gap: 24px; }
  .footer-container { column-gap: 50px; }
}

@media (max-width: 768px) {
  .navbar { min-height: 72px; padding-inline: 2rem; gap: 1rem; }
  .navbar .logo img { width: 8rem; }
  .navbar-link a { padding: 12px 10px; font-size: 12px; }
  .hero-copy { padding: 60px 0 20px; }
  .hero h1 { font-size: 48px; }
  .hero-copy > p { font-size: 14px; }
  .hero-actions { gap: 12px; margin-top: 25px; }
  .btn { font-size: 16px; padding: .7rem 1.7rem; }
  .about-container { gap: 45px; padding: 60px 2rem; }
  .about-copy h2, .section-heading h2, .work-heading h2, .faq-intro h2, .contact-copy h2 { font-size: 40px; }
  .about-copy > p, .section-heading > p, .work-heading > p, .faq-intro > p { font-size: 14px; }
  .ecosystem-section > .container { padding: 60px 2rem; }
  .section-heading { margin-bottom: 25px; }
  .ecosystem-grid { gap: 25px; margin-top: 2rem; }
  .work-section { padding: 60px 0 70px; }
  .work-section > .container { padding: 0 2rem; }
  .work-heading { margin-bottom: 25px; }
  .process-section { padding: 60px 2rem; }
  .process-section > .container { padding: 45px 20px 50px; }
  .process-grid { gap: 20px; }
  .faq-section { padding: 60px 2rem; }
  .faq-layout { gap: 45px; }
  .faq-list summary { font-size: 16px; }
  .faq-list details p { font-size: 13px; }
  .contact-section { padding: 60px 2rem; }
  .contact-inner { gap: 30px; }
  .footer-container { padding: 55px 2rem 45px; }
  .footer-links-grid { gap: 35px; }
  .footer-bottom { padding: 20px 2rem; }
}

@media (max-width: 520px) {
  .navbar { padding-inline: 1.2rem; }
  .navbar .logo img { width: 7rem; }
  .hero { padding-left: 1.2rem; padding-right: 1.2rem; }
  .hero-copy { padding-top: 55px; }
  .hero h1 { font-size: 43px; }
  .hero-copy > p { font-size: 13px; }
  .about-container { padding: 50px 1.2rem; }
  .about-copy h2, .section-heading h2, .work-heading h2, .faq-intro h2, .contact-copy h2 { font-size: 36px; }
  .about-container { gap: 40px; }
  .ecosystem-section > .container { padding: 50px 1.2rem; }
  .ecosystem-card { padding: 2rem; }
  .ecosystem-card a { font-size: 14px; padding: .65rem 1.5rem; }
  .work-section { padding: 50px 0 60px; }
  .work-section > .container { padding: 0 1.2rem; }
  .process-section { padding: 50px 1.2rem; }
  .faq-section { padding: 50px 1.2rem; }
  .faq-list summary { font-size: 15px; }
  .contact-section { padding: 50px 1.2rem; }
  .contact-copy h2 { font-size: 36px; }
  .footer-container { padding-inline: 1.2rem; }
  .footer-links-grid { gap: 28px; }
  .footer-bottom { padding-inline: 1.2rem; }
}


/* Final FAQ & footer sizing */
@media (max-width: 768px) {
  .faq-section { padding: 60px 2rem; }
  .faq-layout { grid-template-columns: 1fr; gap: 35px; }
  .footer-container { min-height: 0; padding: 45px 2rem 35px; }
}
@media (max-width: 520px) {
  .faq-section { padding: 50px 1.2rem; }
  .faq-layout { gap: 30px; }
  .footer-container { padding: 40px 1.2rem 30px; }
}

/* Mobile language switcher — shown inside the hamburger navigation */
@media (max-width: 768px) {
  .navbar-link .language-switcher {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(43, 43, 43, .08);
  }

  .navbar-link .language-toggle {
    width: 100%;
    height: 42px;
    justify-content: flex-start;
    padding: 0 10px;
  }

  .navbar-link .language-menu {
    position: static;
    width: 100%;
    margin-top: 6px;
    padding: 6px;
    box-shadow: none;
    transform: none;
    display: none;
  }

  .navbar-link .language-switcher.open .language-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media (min-width: 769px) {
  .navbar > .language-switcher {
    display: block;
  }
}

/* Mobile language switcher: align with the centered navbar links */
@media (max-width: 768px) {
  .navbar-link .language-switcher {
    width: fit-content;
    margin: 8px auto 0;
    padding: 0;
    border-top: 0;
    text-align: center;
  }

  .navbar-link .language-toggle {
    width: auto;
    min-width: 0;
    height: auto;
    padding: 10px 10px;
    justify-content: center;
    margin: 0 auto;
  }

  .navbar-link .language-menu {
    width: 150px;
    margin: 6px auto 0;
    padding: 7px;
    text-align: left;
  }
}