/* ============================================================
   QWENDA - homepage section styles
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;display:flex;align-items:center;padding:160px 0 60px;
  background:
    radial-gradient(900px 500px at 85% -10%,rgba(188,255,255,.55),transparent 60%),
    radial-gradient(700px 500px at -10% 30%,rgba(139,234,234,.4),transparent 60%),
    radial-gradient(600px 400px at 50% 110%,rgba(123,93,214,.10),transparent 60%),
    var(--grey-25);
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
/* Grid items default to min-width:auto (= min-content), so a single long word in
   the headline could push this column - and the whole hero - wider than the
   viewport, where body{overflow-x:hidden} silently cropped it. */
.hero-grid > *{min-width:0}
.hero h1{margin:0 0 24px}
/* No white-space:nowrap here. It kept "One place you trust." on one line in
   English, but the Dutch, French and German equivalents are longer and were
   pushed off the side of the screen instead of wrapping. */
.hero h1 .accent{color:var(--green-500);position:relative}
.hero .lead{max-width:520px;margin-bottom:36px}
.hero-meta{display:flex;align-items:center;gap:18px;margin-top:28px;color:var(--grey-500);font-size:.9rem;flex-wrap:wrap}
.hero-meta .pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--grey-200);padding:8px 16px;border-radius:999px;font-weight:500}
.hero-meta .pill svg{width:16px;height:16px;color:var(--green-600)}

/* device - the app screenshots already include a phone frame, so we present
   them directly (no synthetic bezel) with a soft drop shadow. */
.hero-visual{position:relative;display:flex;justify-content:center}
.device{
  width:min(300px,70vw);position:relative;z-index:2;
  filter:drop-shadow(0 38px 66px rgba(20,140,140,.26)) drop-shadow(0 10px 22px rgba(52,64,84,.16));
}
.device img{width:100%;height:auto;display:block}
.device-stack{aspect-ratio:814/1656}
.device-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .55s var(--ease)}
.float-card{
  position:absolute;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border:1px solid rgba(234,236,240,.9);border-radius:18px;padding:14px 18px;
  box-shadow:var(--shadow-soft);z-index:4;display:flex;align-items:center;gap:12px;
  animation:floaty 3s ease-in-out infinite;
}
.float-card .fc-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.float-card .fc-title{font-size:.82rem;font-weight:700}
.float-card .fc-sub{font-size:.72rem;color:var(--grey-500)}
.fc-1{top:14%;left:-4%;animation-delay:0s}.fc-2{bottom:24%;right:-6%;animation-delay:.6s}.fc-3{bottom:6%;left:2%;animation-delay:1.1s}
.fc-icon.teal{background:rgba(60,191,191,.15);color:var(--green-600)}
.fc-icon.purple{background:rgba(123,93,214,.14);color:var(--electric)}
.fc-icon.blue{background:rgba(21,181,228,.13);color:#15B5E4}
.float-card svg{width:20px;height:20px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.float-card{animation:none}}

.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--grey-400);font-size:.75rem;
  letter-spacing:.15em;text-transform:uppercase;
}
.scroll-hint .line{width:1px;height:42px;background:var(--grey-300);overflow:hidden;position:relative}
.scroll-hint .line::after{content:'';position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--green-500);animation:scrollline 1.8s ease-in-out infinite}
@keyframes scrollline{0%{top:-50%}100%{top:110%}}

/* ---------- Marquee ---------- */
.marquee-section{padding:26px 0;background:var(--grey-700);overflow:hidden}
.marquee{display:flex;gap:48px;width:max-content;animation:marquee 32s linear infinite}
.marquee span{font-size:1.05rem;font-weight:600;color:#fff;opacity:.9;display:flex;align-items:center;gap:48px;white-space:nowrap}
.marquee span::after{content:'✦';color:var(--green-400);font-size:.9rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@media (prefers-reduced-motion:reduce){.marquee{animation:none}}

/* ---------- Sections ---------- */
.section{padding:110px 0}
.section-head{max-width:680px;margin:0 auto 70px;text-align:center}
.section-head .eyebrow{margin-bottom:18px}
.section-head .lead{margin-top:18px}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat-card{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:40px 34px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.feat-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift)}
.feat-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.feat-icon svg{width:28px;height:28px}
.feat-card h3{margin-bottom:12px}
.feat-card p{color:var(--grey-500);font-size:.98rem}

/* showcase (pinned) */
.showcase{background:#fff;border-radius:56px 56px 0 0}
.showcase-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.showcase-sticky{position:sticky;top:12vh;display:flex;justify-content:center}
.showcase-steps{display:flex;flex-direction:column;gap:10vh;padding:6vh 0 14vh}
.step{padding:36px;border-radius:var(--radius-lg);border:1px solid transparent;transition:background .4s,border-color .4s,opacity .4s;opacity:.35}
.step.active{opacity:1;background:var(--grey-50);border-color:var(--grey-200)}
.step .step-num{display:inline-flex;width:42px;height:42px;border-radius:14px;align-items:center;justify-content:center;font-weight:700;margin-bottom:20px;font-size:.95rem}
.step h3{font-size:1.5rem;margin-bottom:12px}
.step p{color:var(--grey-500)}
.s-teal{background:rgba(60,191,191,.15);color:var(--green-700)}
.s-purple{background:rgba(123,93,214,.13);color:var(--electric)}
.s-blue{background:rgba(21,181,228,.13);color:#0d8890}
.s-dark{background:var(--grey-100);color:var(--grey-700)}

/* ecosystem (dark) */
.eco{background:linear-gradient(160deg,#0F3F47 0%,#148C8C 55%,#28A6A6 100%);color:#fff;border-radius:56px;margin:0 16px;overflow:hidden}
.eco .eyebrow{color:var(--green-100)}
.eco .section-head .lead{color:rgba(255,255,255,.78)}
.eco .section-head a{color:var(--green-100);text-decoration:underline}
.eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.eco-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md);padding:32px 26px;backdrop-filter:blur(6px);transition:background .3s,transform .3s}
.eco-card:hover{background:rgba(255,255,255,.14);transform:translateY(-6px)}
.eco-card .eco-k{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-100);font-weight:700;margin-bottom:14px}
.eco-card h3{font-size:1.12rem;margin-bottom:10px;color:#fff}
.eco-card p{font-size:.92rem;color:rgba(255,255,255,.75)}
.eco-orbit{position:absolute;inset:0;pointer-events:none;opacity:.35}
.eco-orbit svg{position:absolute;width:680px;height:680px;right:-180px;top:-180px;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.eco-orbit svg{animation:none}}

/* modules */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mod-card{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:38px 32px;display:flex;flex-direction:column;gap:16px;transition:transform .35s,box-shadow .35s;position:relative;overflow:hidden}
.mod-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift)}
.mod-card.available{border-color:var(--green-300);background:linear-gradient(180deg,rgba(188,255,255,.25),#fff 45%)}
.mod-status{align-self:flex-start;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.mod-status.live{background:rgba(60,191,191,.16);color:var(--green-700)}
.mod-status.dev{background:var(--grey-100);color:var(--grey-500)}
.mod-card h3{font-size:1.4rem}
.mod-card p{color:var(--grey-500);font-size:.96rem;flex:1}
.mod-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.mod-icon svg{width:26px;height:26px}

/* partners */
.partners{background:#fff;border-radius:56px;margin:0 16px}
/* Auto-fit rather than a fixed 6, so adding or removing a partner reflows
   instead of leaving an orphan on its own row. */
.partner-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:16px}
.partner-card{background:var(--grey-50);border:1px solid var(--grey-200);border-radius:var(--radius-md);padding:24px 16px;display:flex;align-items:center;justify-content:center;min-height:110px;transition:transform .3s,box-shadow .3s,background .3s;cursor:pointer}
.partner-card.active,.partner-card:hover{transform:translateY(-5px);background:#fff;box-shadow:var(--shadow-soft)}
.partner-card img{max-height:52px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.3s}
/* The other partner marks are wordmarks, which survive the greyscale treatment.
   An illustrative mark turns into an unreadable grey blob, so it keeps its
   colour and just sits a little larger. */
.partner-card img.is-square{max-height:64px;filter:none;opacity:.9}
.partner-card.active img.is-square,.partner-card:hover img.is-square{opacity:1}
.partner-card.active img,.partner-card:hover img{filter:none;opacity:1}
.partner-detail{margin-top:28px;background:var(--grey-50);border:1px solid var(--grey-200);border-radius:var(--radius-md);padding:32px;display:flex;gap:8px;flex-direction:column}
.partner-detail h3{font-size:1.15rem}
.partner-detail p{color:var(--grey-500);font-size:.95rem}
.partner-detail a{color:var(--green-700);font-weight:600;margin-top:6px;display:inline-flex;align-items:center;gap:6px}

/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi-card{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:38px 32px;display:flex;flex-direction:column;gap:22px}
.testi-card .quote-mark{font-size:3rem;line-height:0;color:var(--green-400);font-weight:800;height:18px;font-family:var(--font-display)}
.testi-card p{color:var(--grey-600);font-size:.98rem;flex:1}
.testi-who{display:flex;align-items:center;gap:14px}
.testi-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1rem}
.testi-who .name{font-weight:700;font-size:.95rem}
.testi-who .role{font-size:.8rem;color:var(--grey-400)}

/* FAQ */
.faq-wrap{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--grey-200)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 4px;text-align:left;font-size:1.08rem;font-weight:600;color:var(--grey-700)}
.faq-q .faq-icon{width:34px;height:34px;border-radius:50%;background:var(--grey-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .35s,background .35s}
.faq-q .faq-icon svg{width:16px;height:16px;transition:transform .35s}
.faq-item.open .faq-icon{background:var(--green-500);color:#fff}
.faq-item.open .faq-icon svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease}
.faq-a-inner{padding:0 4px 28px;color:var(--grey-500);font-size:.97rem;max-width:680px}
.faq-a-inner p{margin:0 0 14px}
.faq-a-inner p:last-child{margin-bottom:0}
.faq-a-inner a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}

/* CTA */
.cta{
  margin:0 16px;border-radius:56px;overflow:hidden;position:relative;
  background:
    radial-gradient(700px 400px at 20% 0%,rgba(188,255,255,.5),transparent 60%),
    radial-gradient(600px 400px at 90% 100%,rgba(123,93,214,.16),transparent 60%),
    #fff;
  border:1px solid var(--grey-200);
}
.cta-inner{padding:110px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:30px}
.cta .lead{max-width:560px}
.cta .store-badges{justify-content:center}

/* Closing lines under a section grid (Qwenda in real life, Health journeys) */
.section-note{
  margin:56px auto 0;max-width:720px;text-align:center;
  color:var(--grey-500);font-size:1rem;line-height:1.6;
}
.section-note.arrows{
  margin-top:48px;max-width:820px;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-400);line-height:1.9;
}
/* Small affordance line under a section head (Partners) */
.section-hint{margin-top:14px;font-size:.86rem;color:var(--grey-400)}
/* Health-journey status pills */
.mod-status.soon{background:rgba(123,93,214,.12);color:var(--electric)}
.mod-status.exploring{background:var(--grey-100);color:var(--grey-500)}