/* ==========================================================================
   About page (/<lang>/about/) — "Who we are".

   The section lived on the homepage, with these rules inline in each
   homepage's <style>, until 23 Oct 2026, when it moved to a page of its own
   to shorten the homepage. The rules are unchanged except for one thing:
   the intro, the quote cards and the closing line used to start invisible
   for everyone and wait for a script to reveal them. Now they only start
   invisible when scripts run (html.js-anim), so the page reads without
   JavaScript too. assets/about.js does the reveal.
   ========================================================================== */

@keyframes wwa-fade-up {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes wwa-glow-pulse {
      0%, 100% { opacity: 0.35; transform: translate(-50%,-50%) scale(1); }
      50%       { opacity: 0.55; transform: translate(-50%,-50%) scale(1.06); }
    }
.wwa-section {
      position: relative;
      overflow: hidden;
      background: #F6F7F2;
      padding: 84px 2rem 90px;
    }
.wwa-glow {
      pointer-events: none;
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      width: 900px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(124,145,172,0.22) 0%, transparent 70%);
      animation: wwa-glow-pulse 6s ease-in-out infinite;
      z-index: 0;
    }
.wwa-inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; }
.wwa-intro { text-align: center; margin-bottom: 40px; }
.wwa-intro.visible { animation: wwa-fade-up 0.65s cubic-bezier(0.22,1,0.36,1) forwards; }
.wwa-eyebrow {
      display: inline-block;
      font: 700 10px/1 Inter, sans-serif;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #475569; background: rgba(79,145,96,0.08);
      padding: 6px 16px; border-radius: 100px; margin-bottom: 18px;
    }
.wwa-headline {
      font: 800 clamp(32px,5vw,56px)/1.1 Poppins, Inter, sans-serif;
      color: #111827; letter-spacing: -0.03em; margin-bottom: 20px; text-wrap: balance;
    }
.wwa-headline em { font-style: normal; color: #4F9160; }
/* "In the press": a small bubble floating at the right of the title, to the
   Startupticker article of 23 Sep 2026 (Guilherme, 23 Oct 2026). */
.wwa-press {
      position: absolute; top: -6px; right: 0;
      display: inline-flex; align-items: center; gap: 10px;
      padding: 9px 16px 9px 12px; border-radius: 100px;
      background: #fff; border: 1.5px solid #C9DEC8;
      box-shadow: 0 10px 28px rgba(47,106,62,0.16);
      font: 600 13px/1.2 Inter, sans-serif; color: #1f2937; text-decoration: none;
      transform: rotate(2deg);
      animation: wwa-press-float 3.2s ease-in-out infinite;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
.wwa-press:hover { border-color: #3F7D4E; box-shadow: 0 14px 32px rgba(47,106,62,0.24); }
.wwa-press-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #3F7D4E; flex: none; }
.wwa-press-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: rgba(63,125,78,0.35); animation: wwa-press-ping 1.8s ease-out infinite; }
.wwa-press-label { font: 700 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #3F7D4E; }
.wwa-press-arrow { color: #3F7D4E; }
.wwa-press-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes wwa-press-float { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-6px); } }
@keyframes wwa-press-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
@media (max-width: 900px) {
  .wwa-press { position: static; display: flex; width: fit-content; margin: 0 auto 18px; transform: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wwa-press, .wwa-press-dot::after { animation: none; }
}
.wwa-intro { position: relative; }
.wwa-subhead { max-width: 660px; margin: 0 auto; font: 400 17px/1.75 Inter, sans-serif; color: #64748b; }
.wwa-subhead p { margin-bottom: 10px; }
.wwa-subhead p:last-child { color: #475569; font-weight: 500; margin-bottom: 0; }
.wwa-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 16px; margin-bottom: 64px; grid-auto-rows: 1fr; }
.wwa-card {
      position: relative; border-radius: 16px; border: 1.5px solid #e8e4fc;
      background: #fff; padding: 26px 28px 24px;
      box-shadow: 0 2px 12px rgba(79,145,96,0.05);
      cursor: default;
      transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease, border-color 0.28s ease;
    }
.wwa-card.visible { animation: wwa-fade-up 0.55s cubic-bezier(0.22,1,0.36,1) forwards; }
.wwa-card:nth-child(1).visible { animation-delay: 0ms; }
.wwa-card:nth-child(2).visible { animation-delay: 70ms; }
.wwa-card:nth-child(3).visible { animation-delay: 140ms; }
.wwa-card:nth-child(4).visible { animation-delay: 210ms; }
.wwa-card:nth-child(5).visible { animation-delay: 280ms; }
.wwa-card:nth-child(6).visible { animation-delay: 350ms; }
.wwa-card:nth-child(1) { padding-bottom: 33px; }
.wwa-card:nth-child(2) { padding-top: 23px; }
.wwa-card:nth-child(3) { padding-bottom: 39px; }
.wwa-card:nth-child(4) { padding-top: 31px; }
.wwa-card:nth-child(5) { padding-bottom: 36px; }
.wwa-card:nth-child(6) { padding-top: 21px; }
.wwa-card--a { border-color: #DBE7F8; background: linear-gradient(145deg, #fff 65%, #F4F8FE); }
.wwa-card--b { border-color: #e0e7ff; background: linear-gradient(145deg, #fff 65%, #E3EEE2); }
.wwa-card--c { border-color: #fce7f3; background: linear-gradient(145deg, #fff 65%, #fdf2f8); }
.wwa-card:hover { transform: translateY(-6px); box-shadow: 0 20px 52px rgba(79,145,96,0.14); border-color: #C9DEC8; }
.wwa-card--c:hover { border-color: #f9a8d4; box-shadow: 0 20px 52px rgba(236,72,153,0.1); }
.wwa-card-mark {
      font-family: Georgia, 'Times New Roman', serif; font-size: 52px; line-height: 1;
      color: #DBE7F8; position: absolute; top: 11px; left: 22px;
      user-select: none; pointer-events: none;
    }
.wwa-card-text { position: relative; z-index: 1; padding-top: 21px; font: 500 15.5px/1.7 Inter, sans-serif; color: #374151; letter-spacing: -0.01em; }
.wwa-card-role { margin-top: 13px; font: 600 10px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; }
.wwa-close { max-width: 660px; margin: 0 auto; text-align: center; }
.wwa-close.visible { animation: wwa-fade-up 0.65s cubic-bezier(0.22,1,0.36,1) forwards; }
.wwa-close-headline {
      font: 800 clamp(26px,3.5vw,40px)/1.15 Poppins, Inter, sans-serif;
      color: #111827; letter-spacing: -0.03em; margin-bottom: 24px;
    }
.wwa-close-body { font: 400 16.5px/1.8 Inter, sans-serif; color: #64748b; }
.wwa-close-body strong { color: #3F7D4E; font-weight: 600; }
@media (max-width: 860px) {
.wwa-grid { grid-template-columns: 1fr 1fr; }
.wwa-section { padding: 60px 1.5rem 68px; }
}
@media (max-width: 560px) {
.wwa-grid { grid-template-columns: 1fr; }
.wwa-section { padding: 48px 1.25rem 54px; }
}

/* Hidden only until assets/about.js reveals them, and only when scripts run. */
.js-anim .wwa-intro:not(.visible),
.js-anim .wwa-card:not(.visible),
.js-anim .wwa-close:not(.visible) { opacity: 0; }

/* ------------------------------------------------------- demo call ----- */

.ab-cta-wrap { padding: 8px 2rem 104px; background: #F6F7F2; }
.ab-cta { max-width: 960px; margin: 0 auto; padding: 40px 44px; position: relative; z-index: 2; }
.ab-cta h2 { font-size: clamp(21px, 2.2vw, 26px); }
.ab-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ab-cta-demo {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 10px;
  background: #FFFFFF;
  color: #111827;
  font: 600 15px/1 Inter, sans-serif;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ab-cta-demo:hover { background: #F6F7F2; transform: translateY(-1px); }
.ab-cta-link { color: #FFFFFF; font: 500 15px/1.4 Inter, sans-serif; text-decoration: none; }
.ab-cta-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ab-cta-demo:focus-visible, .ab-cta-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

@media (max-width: 620px) {
  .ab-cta-wrap { padding: 0 1.25rem 72px; }
  .ab-cta { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .wwa-glow { animation: none; }
  .wwa-intro.visible, .wwa-card.visible, .wwa-close.visible { animation: none; opacity: 1; }
  .wwa-card, .ab-cta-demo { transition: none; }
  .wwa-card:hover, .ab-cta-demo:hover { transform: none; }
}