/*
  iq-app.pro — Mensa-style redesign (premium academic minimalism)
  Palette: Navy #041E35, Gold #FAAA00, Slate #F8FAFC
  Notes:
  - Sharp geometry (4px)
  - Hover shadows only
  - Reveal-on-scroll + parallax support (JS in assets/js/app.js)
*/

:root{
  --navy:#041E35;
  --gold:#FAAA00;
  --white:#FFFFFF;
  --slate:#F8FAFC;
  --text:#334155;
  --muted:#64748B;
  --line: rgba(4,30,53,.12);
  --grid: rgba(255,255,255,.10);

  --radius:4px;
  --container: 1160px;

  --shadow-hover: 0 20px 40px -10px rgba(0,0,0,.10);
  --shadow-hero: 0 30px 80px -30px rgba(0,0,0,.38);

  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--slate);
}
img{max-width:100%;display:block}
a{color:inherit}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: clamp(16px,4vw,24px);
  padding-right: clamp(16px,4vw,24px);
}

/* A11y */
.skip-link{
  position:absolute;left:-999px;top:12px;
  background:var(--navy);color:#fff;
  padding:10px 12px;border-radius: var(--radius);
  z-index:1000;
}
.skip-link:focus{left:12px}

/* Type */
h1,h2,h3{margin:0;color:var(--navy);letter-spacing:-.02em}
h1{font-weight:900;line-height:1.05}
h2{font-weight:900;line-height:1.15}
h3{font-weight:850;line-height:1.2}

p{margin:0 0 14px;line-height:1.65}
.small{font-size:13px;color:var(--muted);line-height:1.6}
.lead{font-size:18px;color:rgba(255,255,255,.86);max-width:70ch}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color: rgba(255,255,255,.78);
}
.kicker .pill{width:10px;height:10px;background:var(--gold);border-radius:2px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.22);
  background: transparent;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover{transform: translateY(-2px); box-shadow: var(--shadow-hover)}
.btn:active{transform: translateY(0); box-shadow:none}

.btn-primary{
  background: var(--gold);
  border-color: rgba(250,170,0,.55);
  color: var(--navy);
}
.btn-primary:hover{background: #ffb91f; border-color: rgba(250,170,0,.75)}

.btn-dark{
  background: var(--navy);
  color:#fff;
  border-color: rgba(4,30,53,.25);
}

.btn-outline{
  border-color: rgba(4,30,53,.18);
  color: var(--navy);
  background: transparent;
}

/* On dark hero, keep outline buttons readable */
.hero .btn-outline{
  border-color: rgba(255,255,255,.22);
  color:#fff;
}
.hero .btn-outline:hover{
  background: rgba(255,255,255,.06);
}

.btn-xl{padding:14px 18px; font-size:13px}

/* Header (transparent -> glass navy) */
.site-header{
  position:fixed;left:0;top:0;right:0;
  z-index:60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .22s var(--ease), border-color .22s var(--ease);
}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0}

.site-header.is-scrolled{
  background: rgba(4,30,53,.92);
  border-color: rgba(255,255,255,.08);
  backdrop-filter: blur(14px) saturate(1.2);
}
.site-header .brand-text{color:#fff}

.brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:900;letter-spacing:-.02em;
}
.brand .mark{
  width:10px;height:10px;
  background: var(--gold);
  border-radius:2px;
  box-shadow: 0 0 0 5px rgba(250,170,0,.14);
}
.brand .name{font-size:16px;color:#fff}
.brand-logo{
  display:block;
  width:22px;
  height:22px;
}
.brand-text{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.3px;
  color:#fff;
  font-size:18px;
}
.brand-text::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:3px;
  background: #FAAA00;
  box-shadow: 0 8px 26px rgba(250,170,0,.25);
  display:inline-block;
}

.nav{display:flex;align-items:center;gap:18px}
.nav a{
  text-decoration:none;
  color: rgba(255,255,255,.86);
  font-weight:750;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:10px 10px;
  border-radius: var(--radius);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.nav a:hover{background: rgba(255,255,255,.08)}
.nav a.cta{
  background: rgba(250,170,0,.92);
  color: var(--navy);
  border: 1px solid rgba(250,170,0,.35);
}
.nav a.cta:hover{background: #ffb91f}

/* Mobile: burger left, centered logo */
.burger{
  display:none;
  width:44px;height:44px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  align-items:center;justify-content:center;
  cursor:pointer;
}
.burger .lines{width:18px;height:12px;position:relative}
.burger .lines span{position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;opacity:.95}
.burger .lines span:nth-child(1){top:0}
.burger .lines span:nth-child(2){top:5px;opacity:.75}
.burger .lines span:nth-child(3){bottom:0}

.mobile-brand-center{display:none;flex:1;justify-content:center}

/* Drawer */
.drawer-overlay{
  position:fixed;inset:0;
  z-index:9998;
  background: rgba(4,30,53,.62);
  opacity:0;pointer-events:none;
  transition: opacity .2s var(--ease);
}
.drawer{
  position:fixed;left:0;top:0;bottom:0;
  z-index:9999;
  width: 300px; max-width: 85vw;
  background: #ffffff;
  color: var(--navy);
  border-right: 1px solid rgba(4,30,53,.12);
  transform: translateX(-102%);
  transition: transform .22s var(--ease);
  padding: 18px;
  display:flex;flex-direction:column;gap:12px;
}
.drawer .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawer .brand .name{color: var(--navy)}
.drawer .brand .mark{box-shadow:none}
.drawer .close{
  border:1px solid rgba(4,30,53,.14);
  background: transparent;
  width:40px;height:40px;
  border-radius: var(--radius);
  cursor:pointer;
}
.drawer nav{display:flex;flex-direction:column;gap:8px}
.drawer nav a{
  text-decoration:none;
  padding:12px 12px;
  border-radius: var(--radius);
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  color: var(--navy);
  background: #f3f6fb;
  border:1px solid rgba(4,30,53,.10);
}
.drawer nav a:hover{background:#eaf0f9}
.drawer .cta{margin-top:8px}
.drawer .btn{width:100%; border-color: rgba(4,30,53,.18); color: var(--navy)}
.drawer .btn.btn-primary{border-color: rgba(250,170,0,.55)}

.drawer-open .drawer-overlay{opacity:1;pointer-events:auto}
.drawer-open .drawer{transform: translateX(0)}

/* Hero */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background: var(--navy);
  color:#fff;
}

/* Blueprint grid + subtle gradients */
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity:.25;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(250,170,0,.20), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.18));
  pointer-events:none;
}

/* Scanline overlay */
.hero .scanlines{
  position:absolute;inset:-2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035),
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 7px
  );
  opacity:.18;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* Noise overlay (SVG data URI) */
.hero .noise{
  position:absolute;inset:0;
  opacity:.07;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.hero .hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(22px,4vw,64px);
  align-items:center;
  padding-top: 72px; /* header offset */
  padding-bottom: 76px;
}

.hero h1{
  color:#fff;
  font-size: clamp(40px, 5vw, 80px);
  max-width: 18ch;
}

.hero p{color: rgba(255,255,255,.82);max-width: 72ch}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin: 22px 0 14px}

.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top: 18px;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  font-size:12px;
}
.badge b{color:#fff}

.hero-visual{
  position:relative;
}
.hero-visual .frame{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.hero-visual img{width:100%;height:auto}

/* Hero ornaments (parallax rings) */
.hero-ring{
  position:absolute;
  border: 1px solid rgba(250,170,0,.35);
  border-radius: 999px;
  width: 720px;height: 720px;
  left: -220px; top: 10vh;
  opacity:.9;
  pointer-events:none;
}
.hero-ring.r2{width: 460px;height: 460px; left: 62%; top: 46vh; border-color: rgba(255,255,255,.20); opacity:.55}
.hero-ring.r3{width: 980px;height: 980px; left: 48%; top: -320px; border-color: rgba(250,170,0,.20); opacity:.55}

/* Stats bar */
.stats-bar{
  background:#fff;
  border-top: 1px solid rgba(4,30,53,.10);
  border-bottom: 1px solid rgba(4,30,53,.10);
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 22px 0;
}
.stat{ text-align:center; }
.stat .num{
  font-weight:950;
  color:var(--navy);
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing:-.02em;
  line-height:1;
}
.stat .label{
  margin-top:6px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}

/* Sections */
.section{padding: clamp(54px, 6vw, 92px) 0}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom: 22px}
.section-header .sub{margin: 8px 0 0;color: var(--muted)}

/* Cards & grids */
.grid-3{display:grid;grid-template-columns: repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns: repeat(2,1fr);gap:16px}

.card{
  background:#fff;
  border:1px solid rgba(4,30,53,.12);
  border-top: 2px solid rgba(4,30,53,.12);
  border-radius: var(--radius);
  padding: 18px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-top-color .18s var(--ease);
}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow-hover); border-top-color: rgba(250,170,0,1)}

.feature{
  position:relative;
  background:#fff;
  border:1px solid rgba(4,30,53,.12);
  border-radius: var(--radius);
  padding:18px;
  padding-top:46px;
  overflow:hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

/* Большая "водяная" цифра справа */
.feature::after{
  content: attr(data-no);
  position:absolute;
  right:16px;
  top:4px;
  font-weight:900;
  font-size: clamp(96px, 10vw, 140px);
  line-height:1;
  letter-spacing:-.06em;
  color: rgba(4,30,53,.06);
  pointer-events:none;
}

/* Контент поверх водяного знака */
.feature > *{ position:relative; z-index:1; }

.feature .no{
  position:absolute;
  left:18px;
  top:14px;
  font-family: var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  color: rgba(4,30,53,.70);
}

/* Hover как у правой карточки */
.feature:hover{
  transform: translateY(-2px);
  border-color: rgba(250,170,0,.70);
  box-shadow: 0 0 0 1px rgba(250,170,0,.22), var(--shadow-hover);
}

.split{display:grid;grid-template-columns: 1.2fr .8fr;gap:16px;align-items:stretch}

.callout{
  background: linear-gradient(180deg, rgba(4,30,53,.04), rgba(4,30,53,.02));
  border:1px solid rgba(4,30,53,.12);
  border-radius: var(--radius);
  padding: 18px;
}

/* FAQ */
.faq{display:grid;gap:10px}
.faq-item{
  border:1px solid rgba(4,30,53,.12);
  border-radius: var(--radius);
  background:#fff;
  overflow:hidden;
}
.faq-q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding: 16px 16px;
  background: transparent;
  border:0;
  cursor:pointer;
  font-weight:850;
  color: var(--navy);
}
.faq-q .chev{opacity:.6}
.faq-a{display:none;padding: 0 16px 16px;color: var(--text)}
.faq-item.open .faq-a{display:block}

/* Footer */
.site-footer{
  background: var(--navy);
  color: rgba(255,255,255,.86);
  padding: 40px 0;
}
.site-footer .brand .name{color:#fff}
.footer-grid{display:grid;grid-template-columns: 1.3fr .7fr;gap:22px;align-items:start}
.footer-links{display:grid;gap:10px;justify-items:start}
.footer-links a{
  text-decoration:none;
  color: rgba(255,255,255,.86);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
}
.footer-links a:hover{color:#fff}

/* Reveal animation */
.reveal{opacity:0;transform: translateY(20px)}
.js .reveal{transition: opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{transition:none}
  .reveal{opacity:1;transform:none}
  .btn{transition:none}
}

/* About page — white paper */
body.page{background: #ffffff}
.page-hero{
  background: linear-gradient(180deg, rgba(4,30,53,.96), rgba(4,30,53,.86));
  color:#fff;
  padding-top: 120px;
  padding-bottom: 48px;
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.18;
  pointer-events:none;
}
.page-hero h1{color:#fff;font-size: clamp(36px, 4vw, 56px)}
.page-hero p{color: rgba(255,255,255,.82)}

.paper{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 clamp(16px,4vw,24px);
}
.paper-card{
  background:#fff;
  border:1px solid rgba(4,30,53,.12);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 28px);
}
.prose{font-family: "Merriweather", var(--serif); color: #1f2937}
.prose p{margin: 0 0 14px; line-height:1.8}
.prose h2, .prose h3{font-family: var(--sans)}

.alert{
  display:flex;gap:12px;align-items:flex-start;
  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(4,30,53,.14);
  background: rgba(248,250,252,.9);
}
.alert .icon{
  width:36px;height:36px;border-radius: var(--radius);
  display:grid;place-items:center;
  background: rgba(4,30,53,.06);
  border:1px solid rgba(4,30,53,.10);
  color: var(--navy);
  flex: 0 0 auto;
}

/* Test interface — lab */
.test-shell{background: var(--slate)}
.test-topbar{
  position:sticky;top:0;z-index:40;
  background: rgba(4,30,53,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px) saturate(1.2);
}
.test-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding: 14px 0}
.test-topbar .brand .name{color:#fff}

.timer{
  display:flex;align-items:center;gap:10px;
  color: rgba(255,255,255,.86);
  font-size: 12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.timer .dot{width:8px;height:8px;background: var(--gold);border-radius:2px}
#timerValue{font-weight:900;color:#fff;letter-spacing:-.01em}

.test-wrap{padding: 18px 0 60px}
.test-card{
  background:#fff;
  border:1px solid rgba(4,30,53,.12);
  border-radius: var(--radius);
  padding: clamp(16px, 2.6vw, 22px);
}
.progress-row{display:grid;grid-template-columns: 1fr 2fr auto;gap:12px;align-items:center;margin-bottom: 16px}
.progress-text{font-weight:850;color:var(--navy)}
.progress-bar{height:10px;border-radius: 999px;background: rgba(4,30,53,.08);overflow:hidden;border:1px solid rgba(4,30,53,.10)}
#progressFill{height:100%;width:0;background: var(--gold)}

.test-grid{display:grid;grid-template-columns: 1.2fr .8fr;gap:16px;align-items:start}
.puzzle-area{
  background:#fff;
  border:1px solid rgba(4,30,53,.12);
  border-radius: var(--radius);
  padding: 12px;
  display:flex;align-items:center;justify-content:center;
}
.puzzle-area svg{max-width: 100%;height:auto}
.puzzle-caption{margin-top:10px;color:var(--muted);font-size:13px}

.options{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.option{
  border-radius: var(--radius);
  border:1px solid rgba(4,30,53,.14);
  background:#fff;
  padding:10px;
  cursor:pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.option:hover{transform: translateY(-2px); box-shadow: var(--shadow-hover)}
.option.selected{border:2px solid var(--navy); box-shadow:none}

.test-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top: 16px}
.note{color: var(--muted);font-size:13px;line-height:1.6}

/* Modals */
.modal-overlay{
  position:fixed;inset:0;
  background: rgba(4,30,53,.62);
  display:none;align-items:center;justify-content:center;
  padding: 18px;
  z-index:9999;
}
.modal-overlay.open{display:flex}
.modal{
  width:min(520px, 100%);
  background:#fff;
  border-radius: var(--radius);
  border:1px solid rgba(4,30,53,.14);
  padding: 18px;
}
.modal-actions{display:flex;justify-content:flex-end;margin-top: 12px}
.modal .btn{border-color: rgba(4,30,53,.18); color: var(--navy)}
.modal .btn.btn-primary{color: var(--navy)}

.finish-overlay{
  position:fixed;inset:0;
  background: rgba(4,30,53,.80);
  display:none;align-items:center;justify-content:center;
  padding: 18px;
  z-index:9999;
}
.finish-overlay.open{display:flex}
.finish-panel{
  width:min(560px, 100%);
  background:#fff;
  border-radius: var(--radius);
  border:1px solid rgba(4,30,53,.14);
  padding: 22px;
  text-align:center;
}
.finish-panel .muted{color: var(--muted)}
.finish-bar{height:10px;border-radius:999px;background: rgba(4,30,53,.08);overflow:hidden;border:1px solid rgba(4,30,53,.10);margin-top:12px}
.finish-bar .fill{height:100%;width:0;background: var(--gold)}

.finish-overlay.open .finish-bar .fill{
  width: 100%;
  transition: width 5s linear;
}

.spinner{width:28px;height:28px;border-radius:999px;border:3px solid rgba(4,30,53,.12);border-top-color: var(--navy);margin: 0 auto 10px;animation: spin 1s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}}

/* Results — certificate */
.result-wrap{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  padding: 72px 0 84px;
  background: #ffffff;
  position:relative;
  overflow:hidden;
}
.result-wrap::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(4,30,53,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(4,30,53,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.55;
  pointer-events:none;
}

.certificate{
  position:relative;
  z-index:1;
  background:#fff;
  border:1px solid rgba(4,30,53,.14);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 28px);
  max-width: 820px;
  margin: 0 auto;
}

.certificate .brand .name{color: var(--navy)}
.certificate .brand .mark{box-shadow:none}

.certificate .topline{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(4,30,53,.10);
  margin-bottom: 18px;
}
.certificate .meta{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: rgba(4,30,53,.55);
}

.spectrum{
  border:1px solid rgba(4,30,53,.12);
  border-radius: var(--radius);
  padding: 14px;
  background: linear-gradient(180deg, rgba(4,30,53,.03), rgba(4,30,53,.01));
  margin: 16px 0;
}
.spectrum .bars{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:6px;
  align-items:end;
  height: 110px;
}
.spectrum .bar{
  background: rgba(4,30,53,.14);
  border-radius: 2px;
}
.spectrum .bar.g{background: rgba(250,170,0,.92)}
.spectrum .labels{
  display:flex;justify-content:space-between;
  margin-top:10px;
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: rgba(4,30,53,.55);
}

.inline-alert{
  display:none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border:1px solid rgba(220,38,38,.22);
  background: rgba(220,38,38,.06);
  color: #991b1b;
  font-size: 13px;
}
.inline-alert.show{display:block}

/* Results — live feed */
.live-board{
  margin-top: 18px;
  border:1px solid rgba(4,30,53,.12);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(4,30,53,.018), rgba(4,30,53,.008));
  overflow:hidden;
  /* Isolate paints so live updates don't trigger full-page repaints */
  contain: layout paint;
}
.live-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid rgba(4,30,53,.10);
}
.live-title{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: rgba(4,30,53,.62);
}
.live-sub{
  margin-top:6px;
  font-size: 13px;
  color: rgba(4,30,53,.62);
}
.live-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(4,30,53,.12);
  background: rgba(255,255,255,.7);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.12em;
  color: rgba(4,30,53,.66);
  white-space:nowrap;
}
.live-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(250,170,0,.95);
  box-shadow: 0 0 0 0 rgba(250,170,0,.38);
  animation: livePulse 2.2s ease-out infinite;
}
@keyframes livePulse{
  0%{ box-shadow: 0 0 0 0 rgba(250,170,0,.38); }
  70%{ box-shadow: 0 0 0 8px rgba(250,170,0,0); }
  100%{ box-shadow: 0 0 0 0 rgba(250,170,0,0); }
}

.live-table{padding: 0; background: rgba(255,255,255,.85);}
.live-row{
  display:grid;
  grid-template-columns: 112px 1.3fr 1fr 1fr;
  gap: 12px;
  align-items:center;
  padding: 10px 14px;
  font-size: 13px;
  border-top: 1px solid rgba(4,30,53,.08);
}
.live-row--head{
  border-top: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.10em;
  text-transform: uppercase;
  color: rgba(4,30,53,.55);
  background: rgba(4,30,53,.02);
}
.live-body{max-height: 280px; overflow:auto;}
.live-time{color: rgba(4,30,53,.60);}
.live-session{display:flex; align-items:center; gap: 10px; min-width:0;}
.live-flag{font-size: 16px; line-height: 1;}
.live-who{min-width:0;}
.live-who strong{display:block; font-weight:700; color: var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.live-who span{display:block; font-size: 12px; color: rgba(4,30,53,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.live-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(4,30,53,.12);
  background: rgba(255,255,255,.65);
  color: rgba(4,30,53,.72);
  font-weight:600;
  white-space:nowrap;
}
.live-chip.accent{
  border-color: rgba(250,170,0,.28);
  background: rgba(250,170,0,.10);
  color: rgba(4,30,53,.86);
}
.live-row{will-change: transform, opacity;}
.live-row.enter{animation: liveIn .22s var(--ease) both;}
.live-row.exit{animation: liveOut .18s ease both;}
@keyframes liveIn{from{opacity:0; transform: translateY(-8px);} to{opacity:1; transform: translateY(0);}}
@keyframes liveOut{to{opacity:0; transform: translateY(8px);}}

@media (prefers-reduced-motion: reduce){
  .live-dot{animation:none !important; box-shadow:none !important;}
  .live-row.enter, .live-row.exit{animation:none !important;}
}

@media (max-width: 640px){
  .live-row{grid-template-columns: 92px 1fr; grid-auto-rows:auto; row-gap: 8px;}
  .live-row > div:nth-child(3), .live-row > div:nth-child(4){justify-self:start}
  .live-row--head{display:none}
  .live-body{max-height: 360px}
}

/* Responsive */
@media (max-width: 980px){
  .hero .hero-grid{grid-template-columns: 1fr; padding-top: 72px}
  .hero h1{max-width: 22ch}
  .split{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .stats-grid{grid-template-columns: 1fr}
  .stat{justify-content:space-between}
  .hero-visual{order:2}
}

@media (max-width: 860px){
  .nav{display:none}
  .burger{display:inline-flex}
  .mobile-brand-center{display:flex}
  .site-header .brand{display:none}
  .drawer .brand{display:flex}
}

/* Test — fit into viewport (Next always reachable without scrolling down) */
body.test-shell .test-wrap{padding: 12px 0 14px}
body.test-shell .test-wrap > .container{
  display:flex;
  flex-direction:column;
  min-height: calc(100dvh - 72px);
}
body.test-shell .test-card{
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 14px;
}
body.test-shell .progress-row{margin-bottom: 8px}

body.test-shell .test-grid{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;              /* если не влезает — скроллится только середина */
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  align-items: center;
}

body.test-shell .puzzle-area{padding: 10px}
body.test-shell .puzzle-area svg{max-height: 44vh; width:auto; max-width:100%}
body.test-shell .puzzle-caption{margin-top: 8px; font-size: 12px}

body.test-shell .options{gap: 8px}
body.test-shell .option{padding: 8px}
body.test-shell .option .label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(4,30,53,.55);
  margin-bottom: 6px;
}
body.test-shell .option .opt{
  display:flex;
  align-items:center;
  justify-content:center;
}
body.test-shell .option .opt svg{
  max-width: 100%;
  height: auto;
  max-height: 72px;
}

body.test-shell .test-actions{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(4,30,53,.10);
}
body.test-shell .note{font-size: 12px; line-height: 1.45}

@media (max-width: 980px){
  body.test-shell .test-grid{grid-template-columns: 1fr}
  body.test-shell .puzzle-area svg{max-height: 34vh}
  body.test-shell .test-wrap > .container > p.note{display:none}
}

/* Make main hero more compact */
.hero{
  padding-top: 72px;   /* was larger */
  padding-bottom: 90px;
  min-height: auto;                  /* remove oversized height */
}

.hero h1, .hero-title{
  font-size: clamp(38px, 5vw, 62px); /* smaller headline */
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero p, .hero-subtitle{
  font-size: 15px;                   /* smaller body */
  line-height: 1.55;
  max-width: 54ch;                   /* prevent overly wide lines */
}

.hero .cta, .hero-actions{
  margin-top: 18px;                  /* tighter buttons */
  gap: 12px;
}

/* Mobile: even more compact */
@media (max-width: 900px){
  .hero{ padding: 44px 0 26px; }
  .hero h1, .hero-title{ font-size: clamp(32px, 9vw, 46px); }
  .hero p, .hero-subtitle{ font-size: 14px; }
}

.glass-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}
.hero-visual{
  padding: 0 !important;
}
.hero-visual img{
  display:block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.35));
}

/* Header spacing on mobile (global) */
header .container,
.topbar .container,
.site-header .container{
  padding-left: 16px;
  padding-right: 16px;
}

/* If you use a specific header inner wrapper */
.header-inner{
  padding-left: 16px;
  padding-right: 16px;
}

/* Brand / logo */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: inherit;
}
.brand-logo{
  width: 22px;
  height: 22px;
  display:block;
}

/* Burger + logo center if needed */
@media (max-width: 980px){
  .topbar, header{
    padding-left: 0;
    padding-right: 0;
  }
}

/* Test page header breathing room */
body.test-shell header .container,
body.test-shell .topbar .container{
  padding-left: 16px;
  padding-right: 16px;
}


.profile-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4,30,53,.72);
  backdrop-filter: blur(10px);
}

.profile-overlay[aria-hidden="true"]{ display:none; }

.profile-card{
  width: min(520px, 100%);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 18px 80px rgba(4,30,53,.35);
}

.profile-form .field{
  display:block;
  margin-top: 12px;
}

.profile-form .field span{
  display:block;
  font-size: 12px;
  opacity: .85;
}

.profile-form input,
.profile-form select{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:#fff;
  outline:none;
}

.profile-actions{ margin-top:14px; }

body.profile-locked .test-wrap{
  pointer-events: none;
  user-select: none;
  filter: blur(2px);
}

.session-badge{
  margin-left:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-size:12px;
  color: rgba(255,255,255,.85);
}

/* Profile overlay readability */
.profile-card,
.profile-card *{
  color: rgba(255,255,255,.92);
}

.profile-card .muted,
.profile-card p.muted,
.profile-card p,
.profile-card .small{
  color: rgba(255,255,255,.70);
}

.profile-form .field span{
  color: rgba(255,255,255,.82);
  font-weight: 600;
  margin-bottom: 6px;
}

.profile-form input,
.profile-form select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}

.profile-form input::placeholder{
  color: rgba(255,255,255,.55);
}

.test-topbar .brand.brand-text{
  color:#fff !important;
  opacity: 1 !important;
}

/* Fix native <select> dropdown (Windows/Chrome) */
.profile-form select { color: rgba(255,255,255,.92); }
.profile-form select option {
  color: #0b1f33;
  background: #ffffff;
}
.profile-form select option:disabled { color: #6b7280; }