/* ============================================================
   AiM AI Fluency Test — page styles (Kinetic Signal)
   ============================================================ */

.flu-screen{display:none;min-height:calc(100vh - 80px);padding:140px 0 80px}
.flu-screen.on{display:block}
.flu-wrap{max-width:860px;margin:0 auto;padding:0 40px}
.flu-wrap.narrow{max-width:600px}
.flu-wrap.center{text-align:center}

.flu-h1{font-size:clamp(44px,7.5vw,96px);margin:18px 0 26px}
.flu-h2{font-size:clamp(32px,5vw,60px);margin:14px 0 20px}
.flu-lead{font-size:18px;color:var(--grey);max-width:620px;margin-bottom:34px}
.flu-wrap.center .flu-lead{margin:0 auto 34px}

.flu-facts{display:flex;gap:0;border:1px solid var(--line);margin-bottom:26px;flex-wrap:wrap}
.flu-facts div{flex:1;min-width:130px;padding:18px 20px;border-right:1px solid var(--line)}
.flu-facts div:last-child{border-right:none}
.flu-facts b{font-family:"Archivo",sans-serif;font-size:34px;font-weight:900;display:block;line-height:1}
.flu-facts span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.flu-dims-line{font-size:13px;letter-spacing:.04em;color:var(--faint);margin-bottom:36px}
.flu-fine{font-size:12px;color:var(--faint);margin-top:36px;max-width:620px}

/* details form */
.flu-field{display:block;margin-bottom:22px}
.flu-field span{font-family:"Archivo",sans-serif;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:8px}
.flu-field input{width:100%;border:1px solid var(--line);background:#fff;padding:15px 16px;font:500 16px "Inter",sans-serif;color:var(--black);outline:none;transition:border-color .25s}
.flu-field input:focus{border-color:var(--amber)}
.flu-err{color:#c62828;font-size:14px;margin:-8px 0 16px}

/* quiz chrome */
.flu-topbar{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--line);padding:88px 40px 14px;display:flex;align-items:center;gap:18px}
.flu-count{font-family:"Archivo",sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;white-space:nowrap}
.flu-bar{flex:1;height:4px;background:var(--line);overflow:hidden}
.flu-bar div{height:100%;width:0;background:var(--amber);transition:width .45s var(--out)}
#scrQuiz .flu-wrap{padding-top:110px}

.flu-qt{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(20px,3vw,30px);line-height:1.25;text-transform:none;letter-spacing:0;margin:16px 0 28px;white-space:pre-line}
.flu-qt i{color:var(--grey);font-style:italic}

.flu-ta{width:100%;min-height:190px;border:1px solid var(--line);background:#fff;padding:16px;font:500 16px/1.6 "Inter",sans-serif;color:var(--black);outline:none;resize:vertical;transition:border-color .25s}
.flu-ta:focus{border-color:var(--amber)}
.flu-hint{font-size:13px;color:var(--faint);margin-top:10px}

.flu-choice{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#fff;padding:16px 18px;margin-bottom:12px;font:500 16px/1.5 "Inter",sans-serif;color:var(--black);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.flu-choice:hover{border-color:var(--black)}
.flu-choice.sel{border-color:var(--amber);background:rgba(255,179,0,.09);box-shadow:inset 3px 0 0 var(--amber)}
.flu-choice .k{font-family:"Archivo",sans-serif;font-weight:800;font-size:12px;margin-right:10px;color:var(--grey)}
.flu-choice.sel .k{color:var(--amber)}

.flu-navrow{display:flex;justify-content:space-between;margin-top:34px;gap:14px}
#btnNext:disabled{opacity:.35;pointer-events:none}

/* grading */
.flu-stamp{width:120px;height:120px;margin:0 auto 30px;display:block;animation:spin 6s linear infinite}
.flu-stamp text{font-family:"Archivo",sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;fill:var(--black)}
.flu-stamp circle{fill:var(--amber)}
.flu-dots i{animation:fluBlink 1.2s infinite;font-style:normal}
.flu-dots i:nth-child(2){animation-delay:.2s}
.flu-dots i:nth-child(3){animation-delay:.4s}
@keyframes fluBlink{0%,100%{opacity:.15}50%{opacity:1}}

/* result */
.flu-scorehead{display:flex;align-items:flex-end;gap:30px;flex-wrap:wrap;margin:18px 0 40px}
.flu-bignum{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(80px,14vw,150px);line-height:.9}
.flu-bignum small{font-size:.28em;color:var(--grey);font-weight:800}
.flu-level{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(22px,3.4vw,38px);letter-spacing:.04em;background:var(--black);color:var(--amber);padding:10px 22px;margin-bottom:16px}
.flu-resgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:44px}
.flu-radar svg{width:100%;max-width:380px;display:block;margin:0 auto}
.flu-dimlist{display:flex;flex-direction:column;gap:14px}
.flu-dim b{font-family:"Archivo",sans-serif;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between}
.flu-dim b .num{color:var(--amber)}
.flu-dim .track{height:5px;background:var(--line);margin:6px 0}
.flu-dim .track i{display:block;height:100%;width:0;background:var(--amber);transition:width 1s var(--out)}
.flu-dim p{font-size:13.5px;color:var(--grey)}
.flu-ctabox{border:1px solid var(--line);border-left:4px solid var(--amber);padding:26px 28px;margin-bottom:10px}
.flu-ctabox h3{font-size:20px;margin-bottom:8px}
.flu-ctabox p{color:var(--grey);font-size:15px;margin-bottom:18px}
.flu-ctabox .ctas{display:flex;gap:14px;flex-wrap:wrap}

@media(max-width:760px){
  .flu-wrap{padding:0 22px}
  .flu-topbar{padding:80px 22px 12px}
  .flu-resgrid{grid-template-columns:1fr}
  .flu-screen{padding:120px 0 60px}
}