/* QPIO — the public site, both languages.
 *
 * SHARED ON PURPOSE. This was inline in index.html until the French page was
 * built; duplicating 150 lines into /fr/ would have guaranteed the two pages
 * drifted apart, which is the same failure the CEO named on 2026-08-14 —
 * "you need to stop working in silos" — expressed in CSS instead of copy.
 * One stylesheet, so a visual fix lands on both pages or on neither.
 */
:root{
  --bg:#071722;--bg2:#0B2233;--card:#0F2C3F;--card2:#164056;--ink:#EAF4F8;
  --muted:#8FB0C0;--line:#1E4A63;--brand:#26BAD8;--brand2:#1E95AD;
  --good:#3FBF9A;--bad:#E4695F;--warn:#E0A93B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 50px rgba(0,0,0,.36);
  --r:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;min-height:100vh;color:var(--ink);
  background:
    radial-gradient(1200px 620px at 84% -14%,#0E3B52 0,transparent 62%),
    radial-gradient(1000px 560px at -14% 16%,#0A2C3E 0,transparent 58%),
    var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
a{color:var(--brand)}

/* ---------- nav ---------- */
nav{display:flex;align-items:center;gap:12px;padding:20px 0 8px}
nav img{height:42px;width:auto}
nav .id{font-weight:800;font-size:19px;letter-spacing:-.015em;line-height:1.1}
nav .id em{display:block;font-style:italic;font-weight:500;font-size:11.5px;color:var(--muted)}
nav .sp{flex:1}
nav .free{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--good);border:1px solid rgba(63,191,154,.42);background:rgba(63,191,154,.12);
  border-radius:999px;padding:6px 13px;white-space:nowrap}
nav .lang{font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
nav .lang:hover{border-color:var(--brand);color:var(--brand)}
nav .lang:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- hero ---------- */
.hero{padding:46px 0 20px;display:grid;gap:38px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hero{grid-template-columns:1.05fr .95fr;padding:64px 0 34px}}
h1{font-size:clamp(34px,6.2vw,54px);line-height:1.04;letter-spacing:-.035em;margin:0 0 18px;
   font-weight:800;text-wrap:balance}
h1 .g{background:linear-gradient(100deg,var(--brand),#7FD9E8);-webkit-background-clip:text;
      background-clip:text;color:transparent}
/* French runs roughly 20% longer than English for the same sentence, so the
   lede is capped in characters rather than pixels — the measure stays right in
   both languages instead of the French wrapping into a fourth line. */
.lede{font-size:clamp(17px,2.1vw,19.5px);color:var(--muted);margin:0 0 28px;max-width:34ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;
  font-size:16.5px;padding:15px 26px;border-radius:13px;border:1px solid transparent;
  background:var(--brand);color:#08131a;transition:transform .12s ease,filter .12s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brand)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.under{color:var(--muted);font-size:13.5px;margin:14px 0 0}

/* ---------- the live card ---------- */
.demo{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--shadow);padding:20px;position:relative;overflow:hidden}
.demo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 180px at 92% 0%,rgba(38,186,216,.14),transparent 70%)}
.demo .cat{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);display:block;margin-bottom:9px}
.demo .q{font-size:19px;font-weight:800;line-height:1.32;letter-spacing:-.012em;margin:0 0 15px}
.demo .opts{display:grid;gap:9px}
.demo .opt{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:11px;
  background:var(--card2);border:1.5px solid var(--line);font-size:15px;font-weight:600}
.demo .opt .k{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:7px;
  background:var(--bg2);border:1px solid var(--line);font-size:12px;font-weight:800}
.demo .opt.right{border-color:var(--good);background:rgba(63,191,154,.14)}
.demo .opt.right .k{background:var(--good);color:#08131a;border-color:var(--good)}
.demo .fact{margin-top:14px;padding:13px 15px;border-radius:12px;font-size:14.5px;line-height:1.5;
  background:rgba(38,186,216,.09);border:1px solid rgba(38,186,216,.3)}
.demo .fact b{color:var(--brand)}
.demo .src{display:inline-block;margin-top:9px;font-size:12.5px;color:var(--brand);text-decoration:none;
  border:1px solid rgba(38,186,216,.4);border-radius:999px;padding:4px 11px}
.demo .roll{font-size:11.5px;color:var(--muted);margin:13px 2px 0;text-align:center}

/* ---------- sections ---------- */
section{padding:56px 0}
h2{font-size:clamp(25px,3.6vw,34px);letter-spacing:-.028em;margin:0 0 12px;font-weight:800;text-wrap:balance}
.sub{color:var(--muted);margin:0 0 30px;max-width:60ch;font-size:16.5px}
.cards{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.c{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
   border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.c .ico{font-size:24px;line-height:1;margin-bottom:12px;display:block}
.c h3{margin:0 0 7px;font-size:17.5px;letter-spacing:-.012em}
.c p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}

/* ---------- promise ---------- */
.promise{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--brand2);
  border-radius:22px;padding:30px;box-shadow:var(--shadow)}
.promise ul{margin:0;padding:0;list-style:none;display:grid;gap:13px}
.promise li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.promise .t{color:var(--good);font-weight:900;flex:none;width:22px;height:22px;border-radius:7px;
  background:rgba(63,191,154,.16);border:1px solid rgba(63,191,154,.45);display:grid;place-items:center;
  font-size:12px;margin-top:2px}
.promise .x{color:var(--bad);font-weight:900;flex:none;width:22px;height:22px;border-radius:7px;
  background:rgba(228,105,95,.14);border:1px solid rgba(228,105,95,.45);display:grid;place-items:center;
  font-size:12px;margin-top:2px}

/* ---------- install ---------- */
.steps{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.step .n{width:28px;height:28px;border-radius:9px;background:var(--card2);border:1px solid var(--line);
  color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:13.5px;margin-bottom:12px}
.step h3{margin:0 0 6px;font-size:16.5px}
.step p{margin:0;color:var(--muted);font-size:14.5px}

.final{text-align:center;padding:64px 0 20px}
footer{border-top:1px solid var(--line);padding:26px 0 60px;color:var(--muted);font-size:13.5px}
footer a{color:var(--muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:12px;z-index:9;background:var(--brand);color:#08131a;padding:10px 16px;border-radius:10px}