:root{
  --bg:#bfc1c3;
  --paper:#d7d8d9;
  --paper-light:#ececeb;
  --paper-mid:#c8c9ca;
  --ink:#34383d;
  --muted:#6d7278;
  --line:rgba(74,78,84,.18);
  --silver-1:#f2f2f1;
  --silver-2:#d0d1d2;
  --silver-3:#a7aaad;
  --silver-4:#85898e;
  --dark:#4b5158;
  --dark-2:#343a40;
  --sans:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

*{box-sizing:border-box}

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.5),transparent 26%),
    linear-gradient(145deg,#aeb1b4,#d5d6d7);
  color:var(--ink);
  font-family:var(--sans)
}

body{padding:0}

button,
a{font:inherit}

.app-shell{
  width:100%;
  min-height:100vh;
  margin:0
}

.screen{
  display:none;
  width:100%;
  min-height:100vh;
  padding:28px 42px 34px;
  border-radius:0;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 13% 10%,rgba(255,255,255,.88),transparent 30%),
    radial-gradient(circle at 82% 82%,rgba(137,142,147,.2),transparent 34%),
    linear-gradient(135deg,#e2e2e1 0%,#cdcecf 50%,#bfc1c3 100%);
  box-shadow:none
}

.screen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(116deg,transparent 0 40%,rgba(255,255,255,.22) 48%,transparent 57%);
  opacity:.7
}

.screen.active{
  display:flex;
  flex-direction:column;
  animation:screenFade .35s ease both
}

@keyframes screenFade{
  from{opacity:0}
  to{opacity:1}
}

.dark{
  color:#f4f5f6;
  background:
    radial-gradient(circle at 74% 18%,rgba(213,216,219,.12),transparent 30%),
    linear-gradient(145deg,#596068 0%,#444b52 52%,#343a40 100%)
}

.silver-dark::after{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-130px;
  height:340px;
  opacity:.18;
  background:
    repeating-radial-gradient(ellipse at 50% 100%,transparent 0 18px,rgba(255,255,255,.14) 19px 20px);
  pointer-events:none
}

.topline{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  color:#5f6469;
  z-index:3
}

.dark .topline{color:#d0d3d6}
.socials{display:flex;gap:30px}

.home-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  gap:42px;
  align-items:center;
  flex:1;
  z-index:1
}

.home-copy{padding:28px 0}
.eyebrow{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:#6f7479}

.home-copy h1,
.result-hero h1{
  font:600 clamp(52px,7vw,94px)/.96 var(--sans);
  letter-spacing:-.055em;
  margin:18px 0 28px
}

.lead{
  max-width:560px;
  font-size:18px;
  line-height:1.65;
  color:#555b60
}

.facts{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  margin-top:38px;
  font-size:14px
}

.home-art{
  height:500px;
  position:relative;
  perspective:900px
}

.silver-halo{
  position:absolute;
  width:350px;
  height:350px;
  right:42px;
  top:48px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,#f7f7f6 0 7%,#dcddde 27%,#bfc1c3 61%,#9da1a5 100%);
  box-shadow:
    0 38px 62px rgba(48,52,56,.2),
    inset -30px -34px 50px rgba(80,84,89,.15),
    inset 24px 18px 36px rgba(255,255,255,.68)
}

.silver-platform{
  position:absolute;
  width:420px;
  height:50px;
  right:0;
  bottom:42px;
  transform:skewX(-18deg);
  border-radius:7px;
  background:linear-gradient(180deg,#dedfdf,#a8abad);
  box-shadow:0 26px 34px rgba(0,0,0,.16)
}

.silver-person{
  position:absolute;
  width:92px;
  height:208px;
  border-radius:48px 48px 30px 30px;
  background:linear-gradient(145deg,#ededec,#c0c2c3 58%,#a1a4a7);
  box-shadow:
    inset 14px 10px 20px rgba(255,255,255,.4),
    inset -15px -16px 22px rgba(80,82,84,.1),
    0 22px 28px rgba(0,0,0,.12)
}

.silver-person::before{
  content:"";
  position:absolute;
  width:66px;
  height:66px;
  left:13px;
  top:-42px;
  border-radius:50%;
  background:inherit
}

.silver-person::after{
  content:"";
  position:absolute;
  width:126px;
  height:22px;
  left:-17px;
  top:72px;
  border-radius:30px;
  background:inherit;
  transform:rotate(-10deg)
}

.person-standing{
  right:118px;
  bottom:88px;
  transform:rotate(7deg)
}

.person-seated{
  width:80px;
  height:124px;
  right:275px;
  bottom:82px;
  transform:rotate(-13deg) scale(.9)
}

.silver-shadow{
  position:absolute;
  width:320px;
  height:44px;
  right:28px;
  bottom:25px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(31,34,38,.2),transparent 68%);
  filter:blur(4px)
}

.primary{
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:18px 22px;
  background:linear-gradient(180deg,#596068,#434a51);
  color:white;
  font-weight:650;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  box-shadow:0 14px 28px rgba(34,39,45,.21),inset 0 1px 0 rgba(255,255,255,.14);
  cursor:pointer;
  transition:.18s ease;
  z-index:2
}

.primary:hover{transform:translateY(-1px);filter:brightness(1.04)}
.primary span{font-size:24px}
.wide{width:100%}

.intro-center{
  max-width:700px;
  margin:auto;
  text-align:center;
  padding:16px 0;
  z-index:1
}

.brain-art{
  height:205px;
  display:grid;
  place-items:center;
  position:relative
}

.brain-cloud{
  width:185px;
  height:140px;
  position:relative;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.14))
}

.brain-cloud span{
  position:absolute;
  border-radius:50%;
  background:linear-gradient(145deg,#efefee,#b6b8ba);
  box-shadow:inset 8px 8px 12px rgba(255,255,255,.48),inset -8px -8px 12px rgba(72,74,76,.1)
}

.brain-cloud span:nth-child(1){width:92px;height:92px;left:10px;top:26px}
.brain-cloud span:nth-child(2){width:105px;height:105px;right:0;top:18px}
.brain-cloud span:nth-child(3){width:80px;height:80px;left:55px;top:0}
.brain-cloud span:nth-child(4){width:76px;height:76px;left:48px;bottom:0}
.brain-cloud span:nth-child(5){width:62px;height:62px;right:18px;bottom:5px}

.brain-orbit{
  position:absolute;
  border:1px solid rgba(79,83,87,.15);
  border-radius:50%
}

.orbit-one{width:235px;height:150px}
.orbit-two{width:165px;height:230px}

.intro-center h2,
.analysis-wrap h2,
.cta-copy h2,
.details-content h2{
  font:650 48px/1.05 var(--sans);
  letter-spacing:-.04em
}

.intro-center p{font-size:18px;line-height:1.55}
.muted{color:#71767b}

.models{
  margin-top:26px;
  text-align:left;
  padding:20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(236,236,235,.58);
  backdrop-filter:blur(8px)
}

.models strong{display:block;margin-bottom:10px}
.models div{display:grid;grid-template-columns:1fr 1fr;padding:5px 0;color:#5c6165}

.test-screen{padding-bottom:24px}

.question-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  z-index:1
}

.question-top strong{text-align:right}
.icon-button{border:0;background:transparent;font-size:28px;cursor:pointer;justify-self:start;color:var(--ink)}

.progress{
  height:7px;
  background:rgba(88,93,98,.15);
  border-radius:99px;
  margin:22px 0 34px;
  overflow:hidden;
  z-index:1
}

.progress div{
  height:100%;
  width:5%;
  background:linear-gradient(90deg,#737980,#4b5259);
  transition:width .35s ease
}

.question-wrap{
  max-width:920px;
  margin:auto;
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:12px 0 30px;
  z-index:1
}

.question-wrap h2{
  font:650 clamp(34px,4.6vw,58px)/1.08 var(--sans);
  letter-spacing:-.045em;
  margin:0 0 36px
}

.question-enter{animation:questionIn .28s ease}
@keyframes questionIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.answers{display:grid;gap:13px}

.answer{
  border:1px solid rgba(75,79,84,.16);
  background:rgba(232,232,231,.66);
  border-radius:13px;
  padding:18px 20px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  font-size:17px;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
  box-shadow:0 5px 14px rgba(42,45,48,.03)
}

.answer:hover{
  transform:translateY(-1px);
  background:rgba(241,241,240,.82);
  border-color:rgba(75,79,84,.28)
}

.answer.selected{
  background:linear-gradient(180deg,#70767d,#555c63);
  color:#fff;
  border-color:#646a71;
  box-shadow:0 16px 30px rgba(34,39,45,.2)
}

.radio{
  width:25px;
  height:25px;
  border:1.5px solid #9da2a7;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
  font-size:13px;
  font-weight:800
}

.answer.selected .radio{
  border-color:#fff;
  background:#e9eaeb;
  color:#555c63
}

.answer-check{min-width:18px;font-size:18px;font-weight:800}
.hint{text-align:center;color:#74797e;margin-top:25px}

.analysis-decoration{
  position:absolute;
  right:3%;
  bottom:2%;
  width:340px;
  height:340px;
  opacity:.36
}

.analysis-ring{
  position:absolute;
  inset:35px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%
}

.ring-b{inset:75px 10px 10px 75px}

.analysis-person{
  position:absolute;
  width:74px;
  height:165px;
  right:120px;
  bottom:70px;
  border-radius:40px 40px 24px 24px;
  background:linear-gradient(145deg,#dfe1e2,#979ca1)
}

.analysis-person::before{
  content:"";
  position:absolute;
  width:54px;
  height:54px;
  left:10px;
  top:-35px;
  border-radius:50%;
  background:inherit
}

.analysis-wrap{
  max-width:720px;
  margin:auto;
  width:100%;
  z-index:1
}

.analysis-wrap h2{margin-bottom:50px}
.analysis-steps{display:grid;gap:24px;font-size:18px}

.analysis-step{
  display:flex;
  gap:15px;
  color:#aeb3b8;
  transition:color .35s ease,transform .35s ease
}

.analysis-step.done{color:#fff;transform:translateX(5px)}
.analysis-mark{width:24px;flex:none;font-weight:800}

.analysis-box{
  margin-top:58px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:22px;
  background:rgba(255,255,255,.05)
}

.loading{
  height:7px;
  background:rgba(255,255,255,.11);
  overflow:hidden;
  border-radius:99px
}

.loading i{
  display:block;
  width:38%;
  height:100%;
  background:linear-gradient(90deg,#9fa4a9,#dfe2e4,#9fa4a9);
  animation:load 1.4s infinite
}

@keyframes load{from{transform:translateX(-110%)}to{transform:translateX(330%)}}

.result-hero{
  text-align:center;
  max-width:980px;
  margin:auto;
  width:100%;
  padding-top:18px;
  z-index:1
}

.result-hero h1{
  font-size:clamp(58px,9vw,108px);
  letter-spacing:.01em
}

.result-figure{
  height:215px;
  position:relative;
  max-width:560px;
  margin:auto
}

.result-platform{
  position:absolute;
  width:390px;
  height:42px;
  right:24px;
  bottom:28px;
  transform:skewX(-20deg);
  border-radius:8px;
  background:linear-gradient(#dfe0e0,#a7aaad);
  box-shadow:0 20px 30px rgba(0,0,0,.14)
}

.result-person{
  position:absolute;
  background:linear-gradient(145deg,#efefee,#b7b9bb 58%,#9da0a3);
  border-radius:44% 44% 38% 38%;
  z-index:2;
  box-shadow:inset 12px 10px 18px rgba(255,255,255,.4),0 20px 24px rgba(0,0,0,.11)
}

.result-person::before{
  content:"";
  position:absolute;
  width:62%;
  aspect-ratio:1;
  border-radius:50%;
  background:inherit;
  left:18%;
  top:-28%
}

.result-person-big{width:100px;height:165px;right:100px;bottom:48px;transform:rotate(14deg)}
.result-person-small{width:76px;height:112px;left:84px;bottom:28px;transform:rotate(-12deg)}

.result-glow{
  position:absolute;
  width:300px;
  height:160px;
  right:35px;
  bottom:45px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.4),transparent 66%);
  filter:blur(12px)
}

.result-tagline{
  max-width:720px;
  margin:0 auto 28px;
  font-size:18px;
  line-height:1.55;
  color:#555b60
}

.result-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:18px 0 28px
}

.result-cards article{
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px;
  background:rgba(230,230,229,.52);
  text-align:left;
  backdrop-filter:blur(8px)
}

.result-cards h3{font-size:15px}
.result-cards p{font-size:13px;line-height:1.45;color:#5f656a}

.tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
  margin-top:38px;
  z-index:1
}

.tab{
  border:0;
  background:none;
  padding:18px 8px;
  font-size:12px;
  letter-spacing:.08em;
  color:#6d7277;
  border-bottom:2px solid transparent;
  cursor:pointer
}

.tab.active{color:#34383d;border-bottom-color:#5c6268}

.details-content{
  max-width:820px;
  margin:45px auto 30px;
  width:100%;
  flex:1;
  z-index:1
}

.details-content p{font-size:18px;line-height:1.65;color:#555c61}
.details-list{display:grid;gap:16px;margin-top:28px}

.detail-item,.note{
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(230,230,229,.5)
}

.detail-item{display:flex;gap:15px}
.detail-item b{font:700 22px var(--sans)}
.note{margin-top:30px}

.cta-copy{
  max-width:700px;
  margin:auto 0;
  padding:50px 0;
  z-index:1
}

.cta-copy h2{font-size:58px}
.cta-copy h3{font:650 31px/1.25 var(--sans);letter-spacing:-.03em;margin:28px 0}
.cta-copy p{font-size:17px;line-height:1.65;color:#d4d7d9}
.cta-copy blockquote{margin:44px 0 0;padding-left:20px;border-left:2px solid #aaa;font:italic 21px/1.45 var(--sans)}
.link-button{text-decoration:none}

.cta-art{
  position:absolute;
  right:38px;
  bottom:60px;
  width:360px;
  height:360px;
  opacity:.55
}

.cta-chair{
  position:absolute;
  width:220px;
  height:160px;
  right:0;
  bottom:0;
  border-radius:70px 70px 35px 35px;
  background:linear-gradient(145deg,#cfd1d2,#7e848a);
  box-shadow:0 25px 35px rgba(0,0,0,.24)
}

.cta-chair::before{
  content:"";
  position:absolute;
  width:150px;
  height:125px;
  border-radius:50px;
  background:inherit;
  left:-48px;
  bottom:12px;
  transform:rotate(-10deg)
}

.cta-table{
  position:absolute;
  width:120px;
  height:18px;
  left:0;
  bottom:42px;
  border-radius:50%;
  background:#aeb1b4
}

.cta-table::after{
  content:"";
  position:absolute;
  width:8px;
  height:86px;
  left:56px;
  top:11px;
  background:#858a90
}

.cta-glass{
  position:absolute;
  width:24px;
  height:42px;
  left:48px;
  bottom:61px;
  border:2px solid rgba(255,255,255,.65);
  border-radius:4px 4px 8px 8px
}

@media(max-width:900px){
  .screen{padding:22px 20px 26px}
  .home-grid{grid-template-columns:1fr}
  .home-art{height:300px}
  .silver-halo{width:220px;height:220px;right:12px;top:28px}
  .silver-platform{width:275px;height:38px;right:0;bottom:20px}
  .silver-person{width:58px;height:130px}
  .silver-person::before{width:43px;height:43px;left:8px;top:-28px}
  .silver-person::after{width:78px;height:16px;top:42px;left:-10px}
  .person-standing{right:68px;bottom:54px}
  .person-seated{right:170px;bottom:49px;width:52px;height:82px}
  .result-cards{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
  .topline{font-size:9px}
  .socials{gap:10px}
  .home-copy h1{font-size:50px}
  .lead{font-size:16px}
  .facts{gap:14px;margin-top:28px;font-size:13px}
  .intro-center h2,.analysis-wrap h2,.cta-copy h2{font-size:40px}
  .progress{margin-bottom:18px}
  .question-wrap{justify-content:flex-start;padding-top:28px}
  .question-wrap h2{font-size:31px}
  .answer{font-size:15px;padding:16px}
  .analysis-decoration{opacity:.12;right:-100px}
  .result-cards{grid-template-columns:1fr}
  .result-hero h1{font-size:52px}
  .result-figure{height:180px}
  .tab{font-size:9px}
  .cta-art{opacity:.16;right:-90px}
  .models div{grid-template-columns:1fr;gap:2px;padding:7px 0}
}