/* ATLAS — dynamisch beginscherm (eerst tonen, Enter om door te gaan) */
.aw-screen { position:fixed; inset:0; z-index:100000; overflow:auto; background:#f6f9fd; color:#18253a;
  transition:opacity .4s ease, transform .4s ease; }
.aw-screen[hidden] { display:none; }
.aw-screen.is-leaving { opacity:0; transform:translateY(-14px); pointer-events:none; }

.aw-stage { position:relative; min-height:100%; box-sizing:border-box; max-width:1480px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas:"brand brand" "intro demo" "flow flow" "mods mods";
  align-content:center; column-gap:clamp(32px, 4vw, 72px); row-gap:30px;
  padding:40px clamp(24px, 5vw, 80px) 40px; }
.aw-grid { position:fixed; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(22,92,245,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(22,92,245,.07) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 40% 45%, #000 30%, transparent 85%);
          mask-image:radial-gradient(ellipse 75% 65% at 40% 45%, #000 30%, transparent 85%); }
.aw-stage > *:not(.aw-grid) { position:relative; }

.aw-brand { grid-area:brand; display:flex; align-items:center; gap:12px; }
.aw-logo { width:44px; height:44px; border-radius:12px; background:#165cf5; display:grid; place-items:center; box-shadow:0 10px 24px rgba(22,92,245,.28); }
.aw-logo img { width:31px; height:31px; object-fit:contain; }
.aw-wordmark { font-size:13px; font-weight:700; letter-spacing:.18em; color:#10203a; }
.aw-wordmark b { font-weight:900; }

.aw-intro { grid-area:intro; align-self:center; }
.aw-eyebrow { margin:0 0 16px; color:#165cf5; font-size:12px; font-weight:800; letter-spacing:.18em; }
.aw-title { margin:0; color:#10203a; font-size:clamp(40px, 4.8vw, 72px); line-height:1.02; letter-spacing:-.045em; font-weight:800; }
.aw-title span { color:#165cf5; }
.aw-lead { margin:22px 0 0; max-width:560px; color:#536783; font-size:clamp(16px, 1.3vw, 19px); line-height:1.6; }

.aw-cta { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:34px; }
.aw-go { display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 28px; border:0; border-radius:12px;
  background:#165cf5; color:#fff; font:inherit; font-size:16px; font-weight:800; cursor:pointer;
  box-shadow:0 14px 30px rgba(22,92,245,.28); transition:transform .15s, box-shadow .15s, background .15s; }
.aw-go span { transition:transform .2s; }
.aw-go:hover { background:#0f4fe0; transform:translateY(-1px); box-shadow:0 18px 36px rgba(22,92,245,.32); }
.aw-go:hover span { transform:translateX(3px); }
.aw-go:focus-visible { outline:3px solid rgba(22,92,245,.35); outline-offset:3px; }
.aw-hint { color:#72809a; font-size:14px; font-weight:600; }
.aw-hint kbd { display:inline-block; margin-left:4px; padding:3px 9px 4px; border:1px solid #cfd9e8; border-bottom-width:3px; border-radius:7px;
  background:#fff; color:#33435e; font:inherit; font-size:13px; font-weight:800; animation:aw-key 2.4s ease-in-out infinite; }
@keyframes aw-key { 0%, 70%, 100% { transform:none; border-bottom-width:3px; } 80% { transform:translateY(2px); border-bottom-width:1px; } }

/* demo-kaart */
.aw-demo { grid-area:demo; align-self:center; position:relative; display:grid; grid-template-columns:minmax(150px, 210px) minmax(0, 1fr); grid-template-areas:"file checks" "score checks" "advice advice";
  gap:20px 24px; align-items:center; padding:24px; border:1px solid #e1e8f2; border-radius:22px; background:rgba(255,255,255,.94);
  box-shadow:0 30px 70px rgba(16,32,58,.10), 0 2px 6px rgba(16,32,58,.04); }

.aw-file { grid-area:file; display:flex; flex-direction:column; gap:12px; min-width:0; opacity:0; transform:translateX(-18px); transition:opacity .45s ease, transform .45s ease; }
.aw-file.is-in { opacity:1; transform:none; }
.aw-thumb { position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden; box-shadow:0 10px 24px rgba(16,32,58,.18); }
.aw-thumb svg { display:block; width:100%; height:100%; }
.aw-scan { position:absolute; left:0; right:0; top:0; height:34%; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(120,170,255,.55) 70%, rgba(255,255,255,.95) 100%); }
.aw-demo.is-scanning .aw-scan { opacity:1; animation:aw-scan 1.15s linear infinite; }
@keyframes aw-scan { from { transform:translateY(-100%); } to { transform:translateY(300%); } }
.aw-file-meta { display:flex; flex-direction:column; gap:3px; min-width:0; }
.aw-file-name { font-size:13px; color:#10203a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aw-file-sub { font-size:12px; color:#72809a; }

.aw-checks { grid-area:checks; list-style:none; margin:0; padding:0; display:grid; gap:8px; min-width:0; }
.aw-checks li { display:grid; grid-template-columns:22px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:#f6f8fb; color:#8a97ab; font-size:14px; transition:background .3s, color .3s; }
.aw-ico { width:22px; height:22px; box-sizing:border-box; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:900; color:#fff; background:#dfe5ee; transition:background .3s, transform .3s; }
.aw-lbl { font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aw-res { font-size:12px; font-weight:600; white-space:nowrap; }
.aw-checks li.is-busy { background:#eef4ff; color:#33435e; }
.aw-checks li.is-busy .aw-ico { background:transparent; border:2px solid #b8cdfb; border-top-color:#165cf5; animation:aw-spin .7s linear infinite; }
@keyframes aw-spin { to { transform:rotate(360deg); } }
.aw-checks li.is-ok { background:#effaf3; color:#17243d; }
.aw-checks li.is-ok .aw-ico { background:#24a64b; }
.aw-checks li.is-ok .aw-res { color:#17803d; }
.aw-checks li.is-error { background:#fdeeee; color:#17243d; }
.aw-checks li.is-error .aw-ico { background:#e63333; }
.aw-checks li.is-error .aw-res { color:#c62828; }

.aw-score { grid-area:score; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.aw-ring { position:relative; width:128px; height:128px; }
.aw-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.aw-ring-bg { fill:none; stroke:#e9eef5; stroke-width:10; }
.aw-ring-fg { fill:none; stroke:hsl(0 78% 52%); stroke-width:10; stroke-linecap:round; stroke-dashoffset:314; }
.aw-ring-val { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:1px; color:#10203a; }
.aw-ring-val b { font-size:36px; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.aw-ring-val small { font-size:15px; font-weight:700; color:#72809a; margin-top:10px; }
.aw-score-label { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#72809a; }
.aw-status { padding:5px 12px; border-radius:99px; background:#eef2f7; color:#536783; font-size:12.5px; font-weight:800; white-space:nowrap; transition:background .3s, color .3s; }
.aw-status.is-busy { background:#eaf1ff; color:#165cf5; }
.aw-status.is-ok { background:#e8f7ee; color:#17803d; }
.aw-status.is-error { background:#fdecec; color:#c62828; }

.aw-advice { grid-area:advice; display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px; background:#fff6e5; color:#6b4600; font-size:14px; font-weight:600; animation:aw-pop .35s ease; }
.aw-advice[hidden] { display:none; }
.aw-advice-ico { flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#f4ad16; color:#fff; font-weight:900; font-style:italic; font-family:Georgia, serif; }
@keyframes aw-pop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* stappen + modules */
.aw-flow { grid-area:flow; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.aw-flow li { position:relative; display:flex; flex-direction:column; gap:3px; padding:15px 16px 14px; border-radius:14px; border:1px solid #e1e8f2; background:rgba(255,255,255,.78); transition:border-color .35s, background .35s, box-shadow .35s; min-width:0; }
.aw-flow li::before { content:""; position:absolute; left:16px; right:16px; top:0; height:3px; border-radius:0 0 3px 3px; background:#165cf5; transform:scaleX(0); transform-origin:left; transition:transform .5s ease; }
.aw-flow b { font-size:11px; font-weight:800; letter-spacing:.1em; color:#9aa7ba; }
.aw-flow span { font-size:15px; font-weight:800; color:#10203a; }
.aw-flow small { font-size:12px; color:#72809a; line-height:1.35; }
.aw-flow li.is-done b { color:#24a64b; }
.aw-flow li.is-done::before { transform:scaleX(1); background:#24a64b; }
.aw-flow li.is-active { border-color:#bcd2ff; background:#fff; box-shadow:0 10px 26px rgba(22,92,245,.12); }
.aw-flow li.is-active b { color:#165cf5; }
.aw-flow li.is-active::before { transform:scaleX(1); }

.aw-modules { grid-area:mods; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.aw-modules-label { margin-right:4px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#72809a; }
.aw-chip { padding:6px 12px; border-radius:99px; background:#fff; border:1px solid #dfe6f0; color:#33435e; font-size:13px; font-weight:700; }

/* Terwijl het beginscherm of het inlogscherm open is: app erachter verbergen
   (anders wordt de pagina op telefoons breder dan het scherm) */
body:has(#atlasWelcome:not([hidden])) #atlasAppShell,
body:has(#atlasAuthOverlay.active) #atlasAppShell { display:none !important; }
body:has(#atlasWelcome:not([hidden])) { overflow:hidden; }

/* ---------- kleinere schermen */
@media (max-width: 1100px) {
  .aw-stage { grid-template-columns:minmax(0, 1fr); grid-template-areas:"brand" "intro" "demo" "flow" "mods"; align-content:start; }
  .aw-lead { max-width:680px; }
}
@media (max-width: 760px) {
  .aw-stage { padding:24px 18px 32px; row-gap:24px; }
  .aw-demo { grid-template-columns:minmax(0, 1fr); grid-template-areas:"file" "checks" "score" "advice"; padding:16px; }
  .aw-file { flex-direction:row; align-items:center; }
  .aw-thumb { width:120px; flex:none; }
  .aw-file-meta { flex:1; }
  .aw-res { display:none; }
  .aw-score { flex-direction:row; justify-content:center; gap:14px; }
  .aw-ring { width:88px; height:88px; }
  .aw-ring-val b { font-size:25px; }
  .aw-flow { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .aw-hint { display:none; }
  .aw-go { width:100%; justify-content:center; }
}

/* ---------- minder beweging */
@media (prefers-reduced-motion: reduce) {
  .aw-screen, .aw-file, .aw-flow li, .aw-flow li::before, .aw-checks li, .aw-ico, .aw-status { transition:none !important; }
  .aw-demo.is-scanning .aw-scan, .aw-checks li.is-busy .aw-ico, .aw-advice, .aw-hint kbd { animation:none !important; }
}

/* taalkeuze op het beginscherm */
.aw-lang { margin-left:auto; display:flex; align-items:center; gap:8px; padding:6px 10px; background:#fff;
  border:1px solid #d5ddea; border-radius:10px; box-shadow:0 2px 8px rgba(16,32,58,.06); }
.aw-lang select { border:0; background:transparent; font:inherit; font-size:14px; font-weight:600; color:#10203a; cursor:pointer; outline:none; }

/* kop: woorden blijven heel; de lettergrootte volgt de breedte van de kolom */
.aw-intro { min-width:0; container-type:inline-size; }
.aw-title { overflow-wrap:break-word; -webkit-hyphens:manual; hyphens:manual; }
html[lang="nl"] .aw-title { font-size:clamp(30px, 4.2vw, 64px); }
html[lang="en"] .aw-title { font-size:clamp(34px, 4.4vw, 66px); }
html[lang="fr"] .aw-title, html[lang="es"] .aw-title { font-size:clamp(32px, 4vw, 62px); }
html[lang="de"] .aw-title { font-size:clamp(28px, 3.2vw, 50px); letter-spacing:-.035em; }
@supports (font-size: 1cqw) {
  html[lang="nl"] .aw-title { font-size:clamp(28px, 8.6cqw, 68px); }
  html[lang="de"] .aw-title { font-size:clamp(26px, 7.6cqw, 60px); }
  html[lang="en"] .aw-title { font-size:clamp(30px, 9.6cqw, 70px); }
  html[lang="fr"] .aw-title, html[lang="es"] .aw-title { font-size:clamp(30px, 9.2cqw, 68px); }
}