/* =============================================================
   Weloop — modern layer (ported from the Weloop AI Design System,
   claude.ai/design project "Weloop AI Design System" · modern-v1).
   Loaded AFTER styles.css on every page. Adds the section patterns
   the one-pager didn't have: dark metric band, trust cards,
   integration grid, page heroes for subpages, SEO prose blocks.
   Tokens come from styles.css (identical to colors_and_type.css).
   ============================================================= */

/* ---------- dark metric band (Outcomes, not features) ---------- */
.metric-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid hsl(240 8% 18%); border-radius: 24px; overflow: hidden;
  background: hsl(240 18% 10% / .7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.metric-cell { padding: clamp(20px, 3.6vh, 36px) clamp(20px, 2.2vw, 32px); border-right: 1px solid hsl(240 8% 18%); position: relative; }
.metric-cell:last-child { border-right: 0; }
.metric-cell .idx { position: absolute; top: 16px; left: 18px; font-family: var(--font-mono); font-size: 11px; color: hsl(240 8% 50%); letter-spacing: .12em; }
.metric-cell .n {
  margin-top: 14px;
  font-size: clamp(34px, min(3.4vw, 6.4vh), 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(180deg, #fff 0%, hsl(240 10% 70%) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.metric-cell .n .unit { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.metric-cell .l { font-size: clamp(12px, 1.8vh, 13.5px); color: hsl(240 8% 65%); margin-top: 10px; line-height: 1.45; }
@media (max-width: 900px) {
  .metric-row { grid-template-columns: repeat(2, 1fr); }
  .metric-cell:nth-child(2) { border-right: 0; }
  .metric-cell:nth-child(1), .metric-cell:nth-child(2) { border-bottom: 1px solid hsl(240 8% 18%); }
}

/* ---------- trust cards (sovereignty, dark) ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  padding: clamp(18px, 3vh, 28px);
  border-radius: 20px; border: 1px solid hsl(240 8% 18%);
  background: linear-gradient(180deg, hsl(240 18% 11%), hsl(240 18% 9%));
}
.trust-card .icon-chip {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  background: hsl(260 100% 69% / .15); color: hsl(260 100% 80%);
  border: 1px solid hsl(260 100% 69% / .25);
}
.trust-card h3 { color: #fff; font-size: clamp(15px, 2.3vh, 18px); font-weight: 700; margin: 14px 0 6px; }
.trust-card p { color: hsl(240 8% 70%); font-size: clamp(12.5px, 1.9vh, 14px); line-height: 1.55; margin: 0; }
.badge-strip { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.badge-strip span {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  border: 1px solid hsl(240 8% 22%); background: hsl(240 18% 11%);
  color: hsl(240 8% 78%); font-size: 12.5px; font-family: var(--font-mono); letter-spacing: .04em;
}
.badge-strip.on-light span { border-color: hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--muted-foreground)); }

/* ---------- integration grid ---------- */
.integration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 900px) { .integration-grid { grid-template-columns: repeat(2, 1fr); } }
.integration {
  display: flex; flex-direction: column; gap: 10px; padding: clamp(14px, 2.4vh, 22px);
  border: 1px solid hsl(var(--border)); border-radius: 18px; background: hsl(var(--card));
  transition: box-shadow 200ms var(--easing-standard), border-color 200ms var(--easing-standard);
}
.integration:hover { box-shadow: var(--shadow-card-hover); border-color: hsl(244 20% 86%); }
.integration .mark { height: 30px; display: flex; align-items: center; }
.integration .mark img { height: 26px; width: auto; max-width: 110px; object-fit: contain; }
.integration .name { font-weight: 700; font-size: 14.5px; }
.integration .desc { font-size: 12.5px; color: hsl(var(--muted-foreground)); line-height: 1.5; }

/* ---------- subpage hero ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 12vh, 110px) 0 clamp(36px, 7vh, 64px);
  background:
    radial-gradient(ellipse 900px 480px at 90% 0%, hsl(260 100% 69% / .10), transparent 60%),
    radial-gradient(ellipse 700px 400px at 8% 90%, hsl(160 70% 46% / .07), transparent 60%),
    hsl(var(--background));
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(hsl(240 20% 10% / .04) 1px, transparent 1px),
    linear-gradient(90deg, hsl(240 20% 10% / .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 30%, transparent 85%);
}
.page-hero .wrap { position: relative; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: hsl(var(--muted-foreground)); margin-bottom: 22px; }
.breadcrumb a:hover { color: hsl(var(--foreground)); }
.breadcrumb .sep { opacity: .5; }
.page-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04;
}
.page-hero .lede { margin-top: 20px; max-width: 720px; font-size: clamp(16px, 1.35vw, 19px); }

/* ---------- SEO prose + two-column feature rows ---------- */
.prose-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .prose-cols { grid-template-columns: 1fr; } }
.prose h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 14px; }
.prose h3 { font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; letter-spacing: -0.01em; margin: 22px 0 8px; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.prose p b, .prose li b { color: hsl(var(--foreground)); font-weight: 700; }
.prose ul { padding-left: 20px; margin: 10px 0; }

/* feature rows (media + text alternating) */
.feat-row { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.feat-row.flip > .feat-media { order: 2; }
@media (max-width: 900px) { .feat-row, .feat-row.flip > .feat-media { grid-template-columns: 1fr; order: 0; } }
.feat-media { border-radius: 20px; overflow: hidden; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: var(--shadow-card); }
.feat-media > img { display: block; width: 100%; height: auto; }
.feat-media .wroute-row img { width: auto; height: 16px; }
.feat-kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--primary)); display: inline-flex; align-items: center; gap: 8px; }
.feat-kicker .dot { width: 6px; height: 6px; border-radius: 999px; background: hsl(160 70% 46%); }

/* check list */
.check-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.check-list li .ck { color: hsl(160 65% 36%); font-weight: 800; flex-shrink: 0; }

/* ---------- nav: active page ---------- */
.nav-links a.active { color: hsl(var(--foreground)); background: hsl(var(--accent)); font-weight: 600; }
.nav.at-top .nav-links a.active { color: #fff; background: hsl(0 0% 100% / .12); }

/* Subpages have a light hero: keep the nav solid at the top too. */
.page .nav.at-top {
  background: hsl(244 100% 99% / .75);
  border-bottom: 1px solid hsl(var(--border));
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.page .nav.at-top .brand-logo { filter: none; }
.page .nav.at-top .nav-links { color: hsl(var(--muted-foreground)); }
.page .nav.at-top .nav-links a:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.page .nav.at-top .nav-links a.active { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.page .nav.at-top .nav-sov { color: hsl(var(--foreground)); background: hsl(160 70% 46% / .1); border-color: hsl(160 70% 46% / .26); }

/* ---------- CTA band reused on subpages (light chrome) ---------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 28px; padding: clamp(36px, 7vh, 72px) clamp(24px, 4vw, 56px);
  background:
    radial-gradient(ellipse 700px 400px at 80% 0%, hsl(260 100% 69% / .35), transparent 60%),
    radial-gradient(ellipse 600px 400px at 20% 100%, hsl(160 70% 46% / .25), transparent 60%),
    hsl(240 18% 8%);
  border: 1px solid hsl(240 8% 18%); color: #fff;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(hsl(0 0% 100% / .04) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 90%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(28px, 3.6vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 16px 0 14px; }
.cta-band p { font-size: clamp(15px, 1.3vw, 18px); color: hsl(240 8% 75%); max-width: 620px; margin: 0 auto 28px; line-height: 1.55; }
.cta-band .cta-checks { margin-top: 26px; display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-size: 13px; color: hsl(240 8% 70%); font-family: var(--font-mono); }
.cta-band .cta-checks span { display: inline-flex; align-items: center; gap: 7px; }
.cta-band .cta-checks .ck { color: hsl(160 70% 60%); }

/* subpage section rhythm: keep every section within one viewport on desktop */
@media (min-width: 1000px) {
  .page .section { padding: clamp(28px, 6.5vh, 110px) 0; }
  .page .section-tight { padding: clamp(22px, 5vh, 76px) 0; }
  .page .sec-head .h-section { font-size: clamp(26px, min(3.2vw, 5.4vh), 46px); }
}