:root{
  --bg:#070A12; --card:#0e1626; --text:#e6ebf2; --muted:#97a3b9;
  --accent:#39b6ff; --accent2:#00d1c7; --gold:#ffce6a;
  --shadow: 0 12px 36px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(10px);background:rgba(7,10,18,.65);border-bottom:1px solid rgba(255,255,255,.06);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;position:relative}
.nav a.logo{display:flex;align-items:center;gap:16px;font-weight:800;color:#fff;font-size:0;line-height:0}
.nav img{height:86px;width:auto}
@media (max-width: 820px){ .nav img{height:64px} }
.nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
.nav li a{color:var(--text)}
.lang{display:flex;gap:8px;align-items:center;color:var(--muted)}
.lang a{color:var(--text);padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}
.lang a:hover{background:rgba(255,255,255,.07)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(57,182,255,.18);border:1px solid rgba(57,182,255,.35);color:#cfe9ff;font-weight:600;font-size:12px;letter-spacing:.2px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:linear-gradient(135deg, var(--accent), var(--accent2));color:white;font-weight:700;border:0;box-shadow:0 10px 30px rgba(0,209,199,.35)}
.btn.secondary{background:#152036;color:var(--text);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.section{padding:64px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.hero{position:relative; padding:110px 0 72px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.hero h1{font-size:46px;line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px}
.hero .slogan{margin-top:6px; font-weight:600; color:#ffe9a6}
.card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px;box-shadow:var(--shadow); position:relative; overflow:hidden}
.card::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background: radial-gradient(120% 120% at 10% -10%, rgba(255,206,106,.18), transparent 40%)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.illus{width:50%;height:auto; display: block; border-radius:0px; border:none; box-shadow:none; margin-top:12px; margin:12px auto;}
.notice{font-size:14px;color:var(--muted)}
.footer{padding:32px 0;color:var(--muted)}
.reveal{opacity:0; transform:translateY(10px); animation:reveal .8s ease forwards}
@keyframes reveal{to{opacity:1; transform:none}}
@media (max-width: 900px){
  .hero .grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

/* === AId-IQ v5.3 hero halos & canvas === */
.hero{position:relative; padding:110px 0 72px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.hero::before, .hero::after{
  content:""; position:absolute; width:64vw; height:64vw; border-radius:50%;
  filter: blur(95px); opacity:.48; pointer-events:none;
  animation: drift 40s ease-in-out infinite alternate;
}
.hero::before{left:-22vw; top:-14vw; background:radial-gradient(closest-side, var(--gold, #ffce6a), transparent 70%);}
.hero::after{right:-18vw; bottom:-24vw; background:radial-gradient(closest-side, #3dd3ff, transparent 70%); animation-duration:50s}
@keyframes drift { from { transform: translateY(-16px) rotate(0deg);} 50%{transform: translateY(16px) rotate(12deg);} to { transform: translateY(-8px) rotate(0deg);} }
/* Canvas layer (v5.3) */
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.65}

/* === AId-IQ card gold glow (v5.3) === */
.card{position:relative; overflow:hidden}
.card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 120% at 10% -10%, rgba(255,206,106,.18), transparent 40%);
}

/* === Mobile header (checkbox) — canonical, works EN & FR === */
.menu-toggle{display:none; appearance:none; border:1px solid rgba(255,255,255,.12); background:#0f1626; color:#fff; border-radius:10px; padding:10px; align-items:center; justify-content:center}
.menu-toggle svg{display:block}
html, body{overflow-x:hidden}

@media (max-width: 900px){
  .nav a.logo img{height:48px}
  /* dropdown attached to header regardless of aria-label value */
  .header nav{
    position:absolute; left:0; right:0; top:100%;
    background:#0b1220; border-bottom:1px solid rgba(255,255,255,.08);
    max-height:0; overflow:hidden; opacity:0; transition:max-height .22s ease, opacity .18s ease;
  }
  /* open when checkbox is checked; input and nav must be siblings */
  #nav-toggle:checked ~ nav{ max-height:70vh; opacity:1 }

  .header nav ul{display:flex; flex-direction:column; gap:6px; margin:10px 0; padding:8px 16px}
  .header nav li a{display:block; padding:12px 6px; border-radius:8px}
  .menu-toggle{display:inline-flex}
  .lang{margin-left:auto}
}

@media (min-width: 901px){
  .header nav{ position:static; max-height:none; opacity:1; overflow:visible; background:transparent; border:0 }
  .header nav ul{ display:flex; flex-direction:row; gap:20px }
  .menu-toggle{ display:none }
}

/* Mobile fix: remove tap highlight/focus on full-card link */
.card{ position: relative; }
.card .card-hit{
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  -webkit-tap-highlight-color: transparent; background: transparent !important;
  outline: none !important; box-shadow: none !important;
}
.card .card-hit:focus, .card .card-hit:active{ outline: none !important; box-shadow: none !important; }
.card > *{ position: relative; z-index: 1; }

/* === Inside PRO layout + FAQ components === */
.layout-pro{display:grid; grid-template-columns: 280px 1fr; gap:24px}
.toc{position:sticky; top:84px; align-self:start; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px; background:rgba(10,16,28,.5); backdrop-filter: blur(6px)}
.toc-title{font-weight:700; opacity:.9; margin-bottom:8px}
.toc nav{display:flex; flex-direction:column; gap:6px}
.toc a{display:block; padding:8px 10px; border-radius:10px; text-decoration:none; border:1px solid transparent}
.toc a:hover{border-color:rgba(255,255,255,.12)}
.callout{border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px 14px; margin:12px 0; background:rgba(255,255,255,.03)}
.callout .callout-title{font-weight:700; margin-bottom:6px; opacity:.92}
.callout.success{border-color:rgba(64,232,173,.35)}
.callout.info{border-color:rgba(61,211,255,.35)}
.badge{display:inline-block; font-size:.85rem; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); margin-bottom:8px; opacity:.9}
.checklist{list-style:none; padding-left:0; margin:10px 0}
.checklist li{position:relative; padding-left:26px; margin:6px 0}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; opacity:.8}
.steps{counter-reset: s; list-style:none; padding-left:0; margin:12px 0}
.steps li{counter-increment:s; position:relative; padding-left:34px; margin:10px 0}
.steps li::before{content: counter(s); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; border:1px solid rgba(255,255,255,.2)}
.grid-features{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-top:10px}
@media (max-width: 1080px){ .grid-features{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .grid-features{grid-template-columns: 1fr} }
.cta-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid rgba(255,255,255,.12); padding:14px 16px; border-radius:16px; margin-top:20px; background:linear-gradient(180deg, rgba(255,206,106,.08), transparent)}
.cta-bar .btn{min-width:180px; text-align:center}
@media (max-width: 980px){ .layout-pro{grid-template-columns: 1fr} .toc{display:none} }

/* FAQ */
.faq-block{margin-top:28px}
.faq-block h2{margin-bottom:10px}
.faq-list{display:flex; flex-direction:column; gap:10px}
.faq-list details{border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px 12px; background:linear-gradient(180deg, rgba(255,206,106,.06), rgba(255,255,255,.02)); transition: box-shadow .2s ease}
.faq-list details[open]{box-shadow:0 6px 24px rgba(0,0,0,.25)}
.faq-list summary{cursor:pointer; list-style:none; position:relative; padding-right:28px; font-weight:600}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"＋"; position:absolute; right:0; top:0; line-height:1; opacity:.9}
.faq-list details[open] summary::after{content:"–"}
.faq-list .answer{margin-top:8px; opacity:.95}

/* === Transparent diagrams and burger visibility fixes === */
.inside-img.transparent{
  mix-blend-mode: screen;
  background: transparent !important;
}
@media (prefers-color-scheme: light){
  .inside-img.transparent{ mix-blend-mode: normal; }
}
.header .menu-toggle{ color:#fff; }
.header .menu-toggle svg rect{ fill: rgba(255,255,255,.95); }
@media (prefers-color-scheme: light){
  .header .menu-toggle{ color:#111; }
  .header .menu-toggle svg rect{ fill: rgba(17,17,17,.95); }
}

/* === Custom fixes === */
/* Enlarge Unified Backend image (desktop) */
.inside-img.large {
  max-width: 1200px;
  width: 130%;
  margin-left: 0%;
}

/* Widen the 3 pillars under the first image */
.grid-features {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.grid-features .card { flex: 1; min-width: 220px; }

/* === Mobile-specific fixes (no header clipping) === */
@media (max-width: 980px) {
  /* keep page from scrolling sideways */
  html, body { max-width:100%; overflow-x:hidden; }

  /* do NOT clip the header/nav; only scope to inside page content */
  .inside-img.large { width:100% !important; margin-left:0 !important; }
  .inside-page { overflow-x:hidden; }
  .inside-page figure { max-width:100%; margin-left:auto; margin-right:auto; }

  /* burger */
  .header .container.nav { position:relative; }
  .menu-toggle { display:inline-flex; z-index:1001; cursor:pointer; }
  .header nav {
    display:block;         /* baseline so ~ rule can override height/opacity */
    position:absolute; left:0; right:0; top:100%;
    background:#0b1220; border-bottom:1px solid rgba(255,255,255,.08);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .22s ease, opacity .18s ease;
  }
  /* input sibling opens menu (works EN + FR) */
  #nav-toggle:checked ~ nav { max-height:70vh; opacity:1; }
}

@media (min-width: 981px) {
  .header nav { position:static; max-height:none; opacity:1; overflow:visible; background:transparent; border:0 }
  .header nav ul { display:flex; flex-direction:row; gap:20px }
  .menu-toggle { display:none }
}

/* === Mobile overflow hard-fix (EN + FR) ==================== */
@media (max-width: 980px){
  /* Never allow horizontal scroll */
  html, body { width:100%; max-width:100%; overflow-x:hidden; }

  /* Let grid/flex children actually shrink */
  .hero .grid > *,
  .grid-features > *,
  .cta-bar > *,
  .nav > * {
    min-width: 0 !important;
  }

  /* Clamp any potentially wide blocks to container */
  .section,
  .inside-page,
  .inside-page .container,
  .grid-features,
  .cta-bar {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: clip; /* prevents scrollbars without affecting header dropdown */
  }

  /* Images/SVGs must never exceed container */
  img, svg { max-width:100%; height:auto; }

  /* Wide first diagram is already large on desktop — keep it tame on mobile */
  .inside-img.large {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Long words/URLs won’t push layout */
  body, .card, .faq-list .answer, .cta-bar,
  .grid-features .card, .notice {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* === Research: axis cards (replace table) === */
.axis-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap:16px;
  margin-top:12px;
}
@media (max-width:980px){
  .axis-cards{ grid-template-columns: 1fr; }
}
.axis-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:16px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.axis-card::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 120% at 10% -10%, rgba(255,206,106,.18), transparent 40%);
}
.axis-card .axis-title{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.axis-card .axis-title .badge{
  margin:0; padding:6px 10px; border-radius:999px;
}
.axis-card p{ margin:0; color:var(--text); opacity:.96; }