/* All comments normalized to English-only. */
:root{
  --bg:#0a1122;
  --panel:#0b1730;
  --panel-2:#0a152b;
  --ink:#f2f6ff;         
  --muted:#cfe0ff;
  --line:rgba(255,255,255,.26);
  --brand:#11c6ff;
  --brand-2:#2ad173;
  --shadow:0 18px 48px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(17,198,255,.30), 0 18px 52px rgba(17,198,255,.14);
  --radius:18px;
  --maxw:1080px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font:16px/1.62 Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
  
  background:
    radial-gradient(1200px 600px at 8% -10%, rgba(17,198,255,.12), transparent 60%),
    radial-gradient(900px 500px at 92% -8%, rgba(42,209,115,.12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 80px),
    var(--bg);
  letter-spacing:.2px;
}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:20px}

/* Header */
.header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(to bottom, rgba(10,17,34,.9), rgba(10,17,34,.6));border-bottom:1px solid var(--line)}
.brand{margin:auto;padding:14px 0 12px;display:grid;place-items:center}
.brand-img{height:80px; width:auto; display:block;}
.brand-text{display:none; font-weight:900; font-size:1.2rem; letter-spacing:.6px; text-transform:lowercase;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}

.brand-img[src=""], .brand-img:not([src]){display:none}
.brand-img[src=""], .brand-img:not([src]) + .brand-text{display:block}

/* Hero */
.hero{padding:24px 0 10px; display:grid; gap:18px}
.title{font-weight:900;font-size:clamp(28px,4.6vw,42px);line-height:1.12}
.sub{color:var(--muted)}

.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.quizCard{display:grid;gap:16px;padding:18px}
.progress{height:9px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.bar{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.q{display:grid;gap:12px}
.qTitle{font-weight:800}
.qDesc{color:var(--muted)}
.qList{display:grid;gap:12px}
.qItem{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);background:rgba(6,10,20,.62);cursor:pointer;transition:.15s ease}
.qItem:hover{border-color:rgba(17,198,255,.52)}
.qItem:focus-visible{outline:2px solid var(--brand)}
.radio{width:20px;height:20px;border:2px solid rgba(255,255,255,.8);border-radius:999px;position:relative;flex:0 0 auto}
.qItem[aria-checked="true"] .radio::after{content:"";position:absolute;inset:3px;border-radius:999px;background:linear-gradient(180deg,var(--brand),var(--brand-2))}
.qActions{display:flex;gap:10px;flex-wrap:wrap}

.btn{-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.15rem;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  color:var(--ink);font-weight:800;cursor:pointer;transition:.18s ease;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,rgba(17,198,255,.36),rgba(17,198,255,.12));border-color:rgba(17,198,255,.55);box-shadow:var(--glow)}


.media-img{
  display:block; margin:14px auto 0;
  width:100%; max-width:960px; height:auto;
  border:none; border-radius:14px; box-shadow:0 12px 36px rgba(0,0,0,.45);
  object-fit:cover; background:transparent;
}


.section{margin-top:26px}
.feature{display:grid;gap:16px;grid-template-columns:1.25fr .75fr}
@media (max-width:960px){.feature{grid-template-columns:1fr}}
.panel-pad{padding:18px}
.klist{display:grid;gap:12px;margin-top:12px;list-style:none;padding:0}
.kitem{display:flex;gap:10px;align-items:flex-start}
.kitem i{width:22px;height:22px;border-radius:8px;border:1px solid rgba(42,209,115,.66);
  background:linear-gradient(180deg,rgba(42,209,115,.4),rgba(42,209,115,.12));display:inline-grid;place-items:center;color:#eafff1;font-weight:800}


.risk{margin:40px 0; display:flex; justify-content:center}
.risk .box{
  width:100%; max-width:860px; padding:22px 28px;
  border:1px solid rgba(255,255,255,.28); border-radius:16px;
  background:
    radial-gradient(120% 140% at 15% -40%, rgba(255,106,106,.22), transparent 60%),
    linear-gradient(180deg, rgba(24,28,48,.90), rgba(16,22,40,.96));
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  color:var(--muted);
  line-height:1.6;
}
.risk h3{margin:0 0 10px;font-size:1.08rem;color:#ffd1d1}

/* Footer */
.footer{margin:0 0 36px;color:#b8c9f4;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.links{display:grid;grid-auto-flow:column;gap:14px}

/* Helpers */
.hide{display:none !important}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fade{animation:fade .28s ease both}

/* ============================== */
/* UI/UX contrast and alignment fixes */
/* ============================== */

/* Quiz/Q&A area: improve readability */
.quizCard .qDesc { color: #dbe8ff; } /* higher contrast for description */
.qItem {
  background: rgba(9,14,28,.72);
  border-color: rgba(255,255,255,.32);
}
.qItem span { color: var(--ink); }            /* brighter option text */
.qItem:hover {
  border-color: rgba(17,198,255,.66);
  background: rgba(12,18,36,.82);
  transform: translateY(-1px);
}
.qItem[aria-checked="true"]{
  border-color: rgba(42,209,115,.75);
  background: linear-gradient(180deg, rgba(42,209,115,.18), rgba(17,198,255,.10));
  box-shadow: 0 10px 28px rgba(17,198,255,.18);
}
.radio { border-color: rgba(255,255,255,.9); } /* clearer radio ring */
.qItem[aria-checked="true"] .radio::after { inset: 4px; } /* larger inner dot */

/* Risk disclosure: center align */
.risk { margin: 40px 0; display: flex; justify-content: center; }
.risk .box { text-align: center; margin: 0 auto; }
.risk h3 { text-align: center; margin: 0 0 12px; }
/* Fallback if we cannot change markup: center by heading hook */
.risk-title, .risk-title + * { text-align: center; margin-left: auto; margin-right: auto; }

/* Header brand: image-only mode */
.brand { margin: auto; padding: 14px 0 12px; display: grid; place-items: center; }
.brand-text { display: none !important; } /* hide any leftover brand text */

/* --- Risk section: align exactly like the sections above (centered inside .wrap) --- */
.wrap.risk { 
  display:block; 
  margin:40px auto; 
  padding-left:20px; 
  padding-right:20px;
}
.wrap.risk .box {
  max-width:var(--maxw); 
  margin-left:auto; 
  margin-right:auto; 
  text-align:center;
}
.wrap.risk h3 { text-align:center; }

/* --- Uniform section sizing --- */
.card, .panel-pad { width:100%; max-width: var(--maxw); margin: 0 auto; box-sizing: border-box; }
.feature { display:grid; gap:20px; grid-template-columns:1fr 1fr; align-items:stretch; }
@media (max-width:960px){ .feature{ grid-template-columns:1fr; } }
/* Force media visuals to consistent aspect ratio */
.media-img{ aspect-ratio:16/9; object-fit:cover; width:100%; height:auto; }

/* --- Cookie Banner (US style) --- */
.cookie-banner{
  position:fixed; inset:auto 0 0 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 24px; z-index:9999;
  background:rgba(10,17,34,.94); color:#fff; box-shadow:0 -6px 24px rgba(0,0,0,.35);
}
.cookie-banner a{ color: var(--brand-2); text-decoration: underline; }
.cookie-banner .btn{ border:none; }
.cookie-text{ margin:0; line-height:1.5; }

/* --- Logo no longer sticky --- */
.header{ position:static; background:none; border:none; backdrop-filter:none; }

/* --- Hero intro card to keep within panel bounds --- */
.hero-intro .title{ margin-top:0; }
.hero-intro .sub{ margin-bottom:0; }

/* --- Cookie banner layout with close --- */
.cookie-banner{ gap:16px; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-close{ background:transparent !important; border:1px solid rgba(255,255,255,.3) !important; }

/* Ensure long headings wrap nicely inside cards */
.card .title{ word-wrap:break-word; overflow-wrap:anywhere; }
.brand {
  position: relative;
  display: inline-block;
}
.brand::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #11c6ff, #2ad173, #11c6ff);
  filter: blur(20px);
  animation: rotateHalo 6s linear infinite;
  z-index: 0;
}
.brand-img { position: relative; z-index: 1; }

@keyframes rotateHalo {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================
   Fancy centered logo effects
   – static center, no layout shift
   ============================ */

/* Control logo size here */
:root { --logo-size: 80px; }

/* Ensure the logo container is a positioning context and stays centered */
.brand{
  position: relative;                /* for absolute pseudo-elements */
  display:grid; place-items:center;  /* already centering, keep it */
}

/* Logo image itself – no movement; only glow filters */
.brand-img{
  height: var(--logo-size);
  width: auto;
  display: block;
  will-change: filter;
  /* Subtle neon pulse (no translate/scale) */
  animation: logoPulse 3.6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 8px rgba(17,198,255,.55))
    drop-shadow(0 0 16px rgba(42,209,115,.35));
}

/* Rotating halo behind the logo – does not affect layout */
.brand::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);   /* keeps effect centered on logo */
  width: calc(var(--logo-size) * 2.2);
  height: calc(var(--logo-size) * 2.2);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #11c6ff, #2ad173, #11c6ff
  );
  filter: blur(22px);
  opacity:.6;
  pointer-events:none;
  z-index:0;
  animation: rotateHalo 12s linear infinite;
}

/* Soft lens glow in front (screen blend look) */
.brand::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: calc(var(--logo-size) * 1.2);
  height: calc(var(--logo-size) * 1.2);
  border-radius:50%;
  background: radial-gradient(
    rgba(255,255,255,.18), transparent 60%
  );
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:0;
}

/* Keep actual logo above the effects */
.brand > .brand-img { position: relative; z-index: 1; }

/* Animations */
@keyframes logoPulse{
  0%,100%{
    filter:
      drop-shadow(0 0 8px rgba(17,198,255,.55))
      drop-shadow(0 0 16px rgba(42,209,115,.35));
  }
  50%{
    filter:
      drop-shadow(0 0 16px rgba(17,198,255,.85))
      drop-shadow(0 0 28px rgba(42,209,115,.55));
  }
}

@keyframes rotateHalo{
  from{ transform: translate(-50%,-50%) rotate(0deg); }
  to  { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .brand-img{ animation: none; }
  .brand::before{ animation: none; }
}

/* Hide Q2 actions row completely */
#q2 .qActions, #q2 #finish { display: none !important; }