:root{
  --bg:#eef5f0;
  --surface:#ffffff;
  --surface-2:#f8fbf9;
  --text:#122018;
  --muted:#617169;
  --line:#d9e8df;
  --line-strong:#bfd7c9;
  --brand:#198754;
  --brand-dark:#106942;
  --brand-2:#2fba77;
  --accent:#f5c451;
  --accent-soft:#fff4d5;
  --shadow:0 24px 70px rgba(18,32,24,.10);
  --shadow-soft:0 16px 40px rgba(25,135,84,.08);
  --radius-xl:32px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#edf5f0 0%, #f5faf7 50%, #eef4f1 100%);
  min-height:100vh;
}

.page-bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.blob{
  position:absolute;
  filter:blur(10px);
  opacity:.65;
}
.blob-1{
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(47,186,119,.22), rgba(47,186,119,0));
  top:-80px;right:-80px;
}
.blob-2{
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(245,196,81,.18), rgba(245,196,81,0));
  left:-120px;bottom:-160px;
}
.grid-noise{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
}

.shell{
  width:min(1220px, calc(100% - 28px));
  margin:0 auto;
  padding:22px 0 42px;
  position:relative;
  z-index:1;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:inherit;
  text-decoration:none;
}
.brand-mark{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;font-weight:900;font-size:24px;
  box-shadow:0 14px 28px rgba(25,135,84,.22);
}
.brand-copy strong{
  display:block;
  font-size:22px;
  line-height:1;
}
.brand-copy small{
  display:block;
  color:var(--muted);
  margin-top:5px;
  font-size:15px;
}
.topbar-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.top-pill{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow-soft);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--brand-dark);
}
.top-pill-dark{
  background:#102218;
  color:#fff;
}

.card{
  background:rgba(255,255,255,.80);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  border-radius:var(--radius-xl);
}

.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:26px;
  padding:28px;
  align-items:stretch;
}
.eyebrow{
  display:inline-block;
  color:var(--brand-dark);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:12px;
}
h1{
  margin:0 0 14px;
  font-size:clamp(38px,5vw,66px);
  line-height:.98;
  letter-spacing:-.055em;
}
.hero .lead{
  margin:0 0 26px;
  font-size:18px;
  line-height:1.65;
  color:var(--muted);
  max-width:690px;
}

.intro-steps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:18px;
}
.mini-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,250,247,.9));
  border:1px solid var(--line);
  border-radius:18px;
}
.mini-step span{
  width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--accent-soft);
  color:#9c7300;
  font-weight:900;
  flex:none;
}
.mini-step strong{display:block;font-size:14px}
.mini-step small{display:block;color:var(--muted);margin-top:4px}

.species-panel{
  margin-top:8px;
  padding:18px;
  border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(248,251,249,.92), rgba(255,255,255,.92));
}
.species-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-end;
  margin-bottom:14px;
}
.species-head strong{
  font-size:16px;
}
.species-head small{
  color:var(--muted);
  text-align:right;
}

.choice-grid{
  display:grid;
  gap:12px;
}
.choice-grid.two{grid-template-columns:1fr 1fr}
.choice-grid.four{grid-template-columns:repeat(4,1fr)}

.choice{
  appearance:none;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #fff, #f9fcfa);
  border-radius:20px;
  padding:16px;
  transition:.22s ease;
  color:var(--text);
  cursor:pointer;
  position:relative;
}
.choice:hover{
  border-color:var(--line-strong);
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(18,32,24,.06);
}
.choice.selected{
  border-color:rgba(25,135,84,.35);
  background:linear-gradient(180deg, rgba(233,249,241,.95), rgba(248,252,250,.95));
  box-shadow:0 0 0 4px rgba(25,135,84,.08), 0 18px 38px rgba(25,135,84,.10);
}
.choice.selected .choice-check{
  opacity:1;
  transform:scale(1);
}
.intro-choice-grid{gap:14px}
.species-choice{
  min-height:126px;
  display:flex;
  align-items:center;
  gap:16px;
  padding-right:56px;
}
.species-art{
  width:58px;
  height:58px;
  border-radius:18px;
  flex:none;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#dbefe3,#f2faf6);
  border:1px solid rgba(25,135,84,.10);
}
.species-art:before,
.species-art:after{
  content:"";
  position:absolute;
  background:#1b6f48;
  opacity:.92;
}
.dog-art:before{
  width:26px;height:22px;
  border-radius:14px 14px 12px 12px;
  left:15px;top:20px;
}
.dog-art:after{
  width:18px;height:18px;
  border-radius:7px 12px 12px 8px;
  left:21px;top:10px;
  box-shadow:-10px 4px 0 -2px #1b6f48;
}
.cat-art:before{
  width:24px;height:22px;
  border-radius:16px 16px 12px 12px;
  left:17px;top:21px;
}
.cat-art:after{
  width:22px;height:18px;
  left:18px;top:10px;
  background:linear-gradient(135deg,#1b6f48 0 48%, transparent 48% 52%, #1b6f48 52% 100%);
  clip-path:polygon(0 100%, 18% 20%, 40% 72%, 60% 20%, 82% 72%, 100% 100%);
  border-radius:4px;
}
.choice-copy{
  display:block;
  text-align:left;
}
.choice-copy b{
  display:block;
  font-size:20px;
  margin-bottom:4px;
}
.choice-copy small{
  color:var(--muted);
  font-size:13px;
}
.choice-check{
  position:absolute;
  right:16px;
  top:16px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--brand),var(--brand-dark));
  opacity:0;
  transform:scale(.86);
  transition:.22s ease;
}
.choice-check:before{
  content:"";
  position:absolute;
  width:8px;height:4px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
  left:6px;top:7px;
}

.hero-actions{
  margin-top:18px;
}
.primary,.secondary{
  border:0;
  border-radius:16px;
  min-height:56px;
  padding:14px 22px;
  font-family:inherit;
  font-weight:800;
  font-size:16px;
  cursor:pointer;
  transition:.22s ease;
}
.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  box-shadow:0 16px 34px rgba(25,135,84,.25);
}
.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 38px rgba(25,135,84,.30);
}
.primary.large{
  width:100%;
  min-height:62px;
  font-size:18px;
}
.secondary{
  background:#eef4f0;
  border:1px solid var(--line);
  color:var(--text);
}
.secondary:hover{
  background:#f8fbf9;
}
.micro{
  margin:12px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.hero-visual{
  display:flex;
}
.visual-card{
  width:100%;
  border-radius:28px;
  padding:22px;
  background:
    radial-gradient(circle at top right, rgba(245,196,81,.28), transparent 34%),
    linear-gradient(180deg, #163427 0%, #113324 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.visual-card:before{
  content:"";
  position:absolute;
  inset:auto -70px -70px auto;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(47,186,119,.35), transparent 60%);
}
.visual-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.visual-badge{
  display:inline-flex;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
}
.visual-spark{
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #ffd979, #f5c451);
  box-shadow:0 0 18px rgba(245,196,81,.55);
}

.mock-score{
  display:flex;
  gap:18px;
  align-items:center;
  margin:28px 0 24px;
}
.mock-ring{
  width:120px;height:120px;
  border-radius:50%;
  background:conic-gradient(#3ad18a 0 56%, rgba(255,255,255,.12) 56% 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  flex:none;
}
.mock-ring:after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:#18392b;
}
.mock-ring strong,.mock-ring small{
  position:relative;z-index:2;
}
.mock-ring strong{
  font-size:42px;
  letter-spacing:-.05em;
}
.mock-ring small{
  margin-left:5px;
  color:rgba(255,255,255,.72);
  font-weight:700;
}
.mock-copy b{
  display:block;
  font-size:23px;
  margin-bottom:6px;
}
.mock-copy small{
  display:block;
  color:rgba(255,255,255,.76);
  line-height:1.5;
}

.mock-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:26px;
}
.metric-box{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
.metric-box small{
  display:block;
  color:rgba(255,255,255,.68);
  margin-bottom:6px;
}
.metric-box strong{
  font-size:14px;
  line-height:1.35;
}

.silhouette-wrap{
  margin-top:auto;
  display:flex;
  gap:14px;
  align-items:flex-end;
  justify-content:flex-end;
}
.silhouette{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.14);
}
.silhouette-dog{
  width:150px;height:92px;
  border-radius:40px 55px 28px 28px;
}
.silhouette-dog:before{
  content:"";
  position:absolute;
  width:44px;height:42px;
  border-radius:22px 26px 20px 18px;
  right:-14px;top:-8px;
  background:inherit;border:inherit;
}
.silhouette-dog:after{
  content:"";
  position:absolute;
  left:28px;bottom:-26px;
  width:14px;height:28px;background:rgba(255,255,255,.18);
  border-radius:8px;
  box-shadow:42px 0 0 rgba(255,255,255,.18), 82px 0 0 rgba(255,255,255,.18), 114px -2px 0 rgba(255,255,255,.18);
}
.silhouette-cat{
  width:82px;height:110px;
  border-radius:40px 40px 22px 22px;
}
.silhouette-cat:before{
  content:"";
  position:absolute;
  top:-20px;left:12px;
  width:58px;height:28px;
  background:linear-gradient(135deg, rgba(255,255,255,.22) 0 47%, transparent 47% 53%, rgba(255,255,255,.22) 53% 100%);
  clip-path:polygon(0 100%, 22% 10%, 38% 62%, 62% 10%, 78% 62%, 100% 100%);
}
.silhouette-cat:after{
  content:"";
  position:absolute;
  right:-18px;bottom:18px;
  width:24px;height:62px;
  border:6px solid rgba(255,255,255,.16);
  border-left:none;border-radius:0 20px 22px 0;
}

.wizard, .result{
  margin-top:22px;
  padding:28px;
}
.wizard-top, .result-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  margin-bottom:24px;
}
.wizard-top h2, .result-head h2{
  margin:0;
  font-size:38px;
  line-height:1.05;
  letter-spacing:-.04em;
}
.progress-wrap{
  width:min(340px,100%);
  min-width:260px;
}
.progress-meta{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.progress{
  height:8px;border-radius:999px;
  background:#e8efea;
  overflow:hidden;
}
.progress i{
  display:block;height:100%;width:25%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:999px;
  transition:width .3s ease;
}

.step-grid{
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:26px;
}
.step-copy{
  padding:24px;
  border-radius:24px;
  background:linear-gradient(180deg, #153729 0%, #123325 100%);
  color:#fff;
  position:sticky;
  top:18px;
  align-self:start;
}
.step-no{
  display:inline-flex;
  width:48px;height:48px;border-radius:16px;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font-size:16px;font-weight:900;letter-spacing:.08em;
}
.step-copy h3{
  margin:18px 0 10px;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.03em;
}
.step-copy p{
  margin:0 0 18px;
  color:rgba(255,255,255,.75);
  line-height:1.6;
}
.step-note{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
.step-note strong{
  display:block;
  font-size:13px;
  margin-bottom:6px;
}
.step-note span{
  display:block;
  color:rgba(255,255,255,.76);
  font-size:13px;
  line-height:1.5;
}

.step-fields{
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,251,249,.95));
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
}
.field-label{
  display:block;
  margin:0 0 9px;
  font-size:13px;
  font-weight:800;
  color:#183226;
}
.field-label + *{margin-bottom:18px}
.field-label em{
  font-style:normal;
  color:var(--muted);
  font-weight:600;
}
input,select{
  width:100%;
  min-height:54px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  color:var(--text);
  padding:14px 16px;
  font-size:15px;
  transition:.18s ease;
}
input:focus,select:focus{
  border-color:rgba(25,135,84,.35);
  box-shadow:0 0 0 4px rgba(25,135,84,.08);
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.input-unit{
  display:flex;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:18px;
  background:#fff;
}
.input-unit input{
  border:0;margin:0;border-radius:0;
}
.input-unit span{
  padding:0 16px;
  display:flex;
  align-items:center;
  color:var(--muted);
  font-weight:800;
  background:#f3f7f4;
}
.compact-choice{
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:4px;
}
.compact-choice .line-title{
  display:block;
  font-size:17px;
  font-weight:800;
}
.compact-choice small{
  display:block;
  color:var(--muted);
  font-size:12px;
}

.checkline{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px 18px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  margin-top:4px;
}
.checkline input{
  width:20px;height:20px;min-height:auto;
  margin-top:2px;
}
.checkline span{
  display:block;
}
.checkline b{
  display:block;
  font-size:14px;
  margin-bottom:4px;
}
.checkline small{
  display:block;
  color:var(--muted);
  line-height:1.45;
}

.hint{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.6;
}
.stack{
  display:grid;
  gap:12px;
}
.score-choice{
  width:100%;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, #fff, #f9fcfa);
  padding:16px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  text-align:left;
  transition:.2s ease;
}
.score-choice:hover{
  border-color:var(--line-strong);
  box-shadow:0 8px 24px rgba(18,32,24,.05);
}
.score-choice.selected{
  border-color:rgba(25,135,84,.36);
  background:linear-gradient(180deg, rgba(233,249,241,.95), rgba(248,252,250,.95));
  box-shadow:0 0 0 4px rgba(25,135,84,.08);
}
.score-choice b{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}
.score-choice span{
  display:block;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.score-choice i{
  flex:none;
  min-width:54px;
  text-align:center;
  font-style:normal;
  padding:8px 10px;
  border-radius:12px;
  background:#f2f7f4;
  color:#365746;
  font-size:12px;
  font-weight:900;
}
.top-gap{margin-top:20px}

.error{
  margin-top:18px;
  padding:14px 16px;
  border-radius:16px;
  background:#fff0ee;
  border:1px solid #ffd1ca;
  color:#98392e;
  font-weight:700;
  font-size:13px;
}
.actions{
  display:flex;
  gap:12px;
  margin-top:24px;
}
.actions .secondary{width:220px}
.actions .primary{flex:1}

.result-head{
  align-items:center;
}
.result-copy p{
  margin:8px 0 0;
  color:var(--muted);
}
.result-score-box{
  display:flex;
  gap:18px;
  align-items:center;
  padding:18px;
  border-radius:26px;
  background:linear-gradient(180deg, #f8fbf9, #ffffff);
  border:1px solid var(--line);
}
.score-ring{
  width:144px;
  height:144px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:conic-gradient(var(--brand) 0 55%, #e7ece9 55%);
  position:relative;
  flex:none;
}
.score-ring:after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:#fff;
}
.score-ring strong,.score-ring span{position:relative;z-index:2}
.score-ring strong{
  font-size:58px;
  letter-spacing:-.06em;
}
.score-ring span{
  font-size:18px;
  color:var(--muted);
  margin-left:4px;
}
.score-summary{
  max-width:360px;
}
.score-summary h3{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.05;
}
.score-summary p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.result-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.info-box{
  padding:20px;
  border-radius:20px;
  background:linear-gradient(180deg, #fff, #f8fbf9);
  border:1px solid var(--line);
}
.info-box small{
  display:block;
  color:var(--muted);
  margin-bottom:6px;
}
.info-box strong{
  font-size:18px;
}

.context{
  margin-top:16px;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg, #fff7de, #fffaf0);
  border:1px solid #f4e3a9;
  color:#5d4a17;
  line-height:1.6;
  font-size:14px;
}
#logicConfidence{
  background:linear-gradient(180deg, #eef8f2, #f7fcf9);
  border-color:#cde6d4;
  color:#214934;
}

.recommend{
  margin:22px 0;
  padding:22px;
  border-radius:24px;
  background:linear-gradient(180deg, #153729 0%, #123325 100%);
  color:#fff;
}
.recommend-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-end;
  margin-bottom:14px;
}
.recommend-head h4{
  margin:0;
  font-size:22px;
  letter-spacing:-.02em;
}
.recommend-head span{
  color:rgba(255,255,255,.65);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.recommend ul{
  margin:0;
  padding-left:20px;
  line-height:1.7;
  color:rgba(255,255,255,.82);
}

.notice{
  padding:18px;
  border-radius:18px;
  background:#f4f8f5;
  border:1px solid var(--line);
  margin-bottom:20px;
}
.notice b{
  display:block;
  margin-bottom:6px;
  font-size:13px;
}
.notice p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
}
.footer{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:18px 6px 6px;
  color:var(--muted);
  font-size:12px;
}

.hidden{display:none !important}

@media (max-width: 1080px){
  .hero{
    grid-template-columns:1fr;
  }
  .hero-visual{
    order:-1;
  }
  .visual-card{
    min-height:440px;
  }
  .step-grid{
    grid-template-columns:1fr;
  }
  .step-copy{
    position:relative;
    top:0;
  }
  .wizard-top, .result-head{
    flex-direction:column;
    align-items:stretch;
  }
  .progress-wrap{
    width:100%;
    min-width:auto;
  }
}

@media (max-width: 760px){
  .shell{
    width:min(100% - 18px, 100%);
    padding-top:14px;
  }
  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .topbar-right{
    width:100%;
  }
  .hero,.wizard,.result{
    padding:18px;
    border-radius:24px;
  }
  h1{
    font-size:42px;
  }
  .intro-steps,
  .choice-grid.two,
  .result-grid,
  .mock-metrics{
    grid-template-columns:1fr;
  }
  .species-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .species-head small{
    text-align:left;
  }
  .field-row,
  .choice-grid.four{
    grid-template-columns:1fr 1fr;
  }
  .result-score-box{
    flex-direction:column;
    align-items:flex-start;
  }
  .score-ring{
    width:128px;height:128px;
  }
  .actions{
    flex-direction:column;
  }
  .actions .secondary,
  .actions .primary{
    width:100%;
  }
  .footer{
    flex-direction:column;
    padding-left:2px;
  }
}

@media (max-width: 520px){
  .brand-copy strong{
    font-size:20px;
  }
  .hero .lead{
    font-size:16px;
  }
  .field-row,
  .choice-grid.four{
    grid-template-columns:1fr;
  }
  .species-choice{
    min-height:110px;
  }
  .score-choice{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ===== Dinamică v5 ===== */

@keyframes floatSoft {
  0%,100% { transform:translate3d(0,0,0) rotate(0deg); }
  50% { transform:translate3d(0,-12px,0) rotate(.6deg); }
}
@keyframes floatSoftAlt {
  0%,100% { transform:translate3d(0,0,0) rotate(0deg); }
  50% { transform:translate3d(8px,-8px,0) rotate(-.8deg); }
}
@keyframes breatheGlow {
  0%,100% { box-shadow:0 0 0 4px rgba(25,135,84,.07),0 18px 38px rgba(25,135,84,.10); }
  50% { box-shadow:0 0 0 7px rgba(25,135,84,.10),0 22px 44px rgba(25,135,84,.15); }
}
@keyframes slideFadeUp {
  from { opacity:0; transform:translateY(18px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes scorePop {
  0% { opacity:0; transform:scale(.82) rotate(-8deg); }
  65% { transform:scale(1.04) rotate(1deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes shimmerBar {
  from { transform:translateX(-140%); }
  to { transform:translateX(240%); }
}
@keyframes bgDrift {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(18px,-10px,0) scale(1.06); }
}

.blob-1{animation:bgDrift 12s ease-in-out infinite}
.blob-2{animation:bgDrift 15s ease-in-out infinite reverse}

.visual-card{
  transform-style:preserve-3d;
  transition:transform .18s ease-out, box-shadow .22s ease;
  will-change:transform;
}
.visual-card.is-tilting{
  box-shadow:0 32px 70px rgba(12,35,24,.28);
}
.mock-ring{animation:floatSoft 4.6s ease-in-out infinite}
.silhouette-dog{animation:floatSoft 5.4s ease-in-out infinite}
.silhouette-cat{animation:floatSoftAlt 4.8s ease-in-out infinite}

.choice.selected{
  animation:breatheGlow 3.2s ease-in-out infinite;
}

.wizard:not(.hidden),
.result:not(.hidden){
  animation:slideFadeUp .42s cubic-bezier(.2,.8,.2,1) both;
}
.step:not(.hidden){
  animation:slideFadeUp .34s cubic-bezier(.2,.8,.2,1) both;
}
.result:not(.hidden) .score-ring{
  animation:scorePop .58s cubic-bezier(.2,.9,.2,1.2) both;
}
.progress{
  position:relative;
}
.progress:after{
  content:"";
  position:absolute;
  inset:0;
  width:35%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:shimmerBar 2.8s ease-in-out infinite;
  pointer-events:none;
}

.selected-species-summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  margin-bottom:18px;
  border-radius:18px;
  background:linear-gradient(180deg,#eef9f3,#f8fcfa);
  border:1px solid #cfe7d8;
}
.summary-dot{
  width:12px;height:12px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 0 0 6px rgba(25,135,84,.09);
  flex:none;
}
.selected-species-summary small{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:2px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}
.selected-species-summary strong{
  display:block;
  font-size:17px;
}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}


/* ===== Rezultat spectaculos v6 ===== */
.result-epic{
  overflow:hidden;
  position:relative;
}
.result-epic:before{
  content:"";
  position:absolute;
  inset:auto -120px -140px auto;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(47,186,119,.12), transparent 65%);
  pointer-events:none;
}
.result-hero-panel{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:center;
  padding:26px;
  border-radius:28px;
  background:
    radial-gradient(circle at top right, rgba(245,196,81,.18), transparent 28%),
    linear-gradient(135deg, #113527 0%, #153d2d 46%, #1c533d 100%);
  color:#fff;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.result-hero-panel:after{
  content:"";
  position:absolute;
  inset:auto -40px -40px auto;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 68%);
}
.result-badge-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 10px;
}
.result-tone-pill,.result-mini-pill{
  display:inline-flex;
  align-items:center;
  padding:9px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.result-tone-pill{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.12);
}
.result-mini-pill{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
}
.result-hero-copy h2{
  color:#fff;
  font-size:44px;
  margin:0 0 10px;
}
.result-hero-copy p{
  margin:0;
  line-height:1.65;
  color:rgba(255,255,255,.78);
  max-width:580px;
}
.result-score-stage{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
}
.score-orbit{
  position:relative;
  width:182px;
  height:182px;
  display:grid;
  place-items:center;
  flex:none;
}
.score-glow{
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,196,81,.22), transparent 60%);
  filter:blur(10px);
}
.result-epic .score-ring{
  width:156px;
  height:156px;
  box-shadow:0 26px 54px rgba(7,19,13,.28);
}
.result-epic .score-ring:after{
  background:#fff;
}
.result-epic .score-summary{
  max-width:320px;
}
.result-epic .score-summary h3{
  color:#fff;
  font-size:30px;
  margin:0 0 8px;
}
.result-epic .score-summary p{
  color:rgba(255,255,255,.78);
  line-height:1.65;
}
.card-lite{
  padding:20px;
  border-radius:24px;
  background:linear-gradient(180deg, #fff, #f9fcfa);
  border:1px solid var(--line);
}
.bcs-spectrum{
  margin-bottom:18px;
}
.spectrum-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-end;
  margin-bottom:16px;
}
.spectrum-head strong{
  font-size:18px;
}
.spectrum-head small{
  color:var(--muted);
}
.spectrum-scale{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:10px;
}
.spectrum-dot{
  position:relative;
  height:68px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#f6faf8);
  display:grid;
  place-items:center;
  cursor:default;
  transition:.22s ease;
}
.spectrum-dot span{
  font-size:18px;
  font-weight:900;
  color:#4d6258;
}
.spectrum-dot.is-active{
  transform:translateY(-3px) scale(1.03);
  border-color:rgba(25,135,84,.36);
  box-shadow:0 0 0 4px rgba(25,135,84,.08), 0 18px 34px rgba(25,135,84,.12);
}
.spectrum-dot.is-active span{
  color:#12402d;
}
.spectrum-dot.is-active:after{
  content:"";
  position:absolute;
  inset:auto 14px 10px 14px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}
.spectrum-dot.range-low{background:linear-gradient(180deg,#fff4ef,#fffdfc)}
.spectrum-dot.range-ideal{background:linear-gradient(180deg,#eef9f3,#fbfffc)}
.spectrum-dot.range-high{background:linear-gradient(180deg,#fff9e9,#fffefb)}
.spectrum-legend{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.spectrum-legend span:nth-child(2){text-align:center}
.spectrum-legend span:nth-child(3){text-align:right}

.result-dashboard{
  margin-bottom:18px;
}
.result-main-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:14px;
}
.spotlight-card{
  padding:20px;
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#f8fbf9);
  border:1px solid var(--line);
  min-height:156px;
}
.spotlight-card small{
  display:block;
  color:var(--muted);
  margin-bottom:8px;
}
.spotlight-card strong{
  display:block;
  font-size:22px;
  line-height:1.15;
  margin-bottom:10px;
}
.spotlight-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}
.chip-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.factor-chip{
  display:inline-flex;
  align-items:center;
  padding:9px 12px;
  border-radius:999px;
  background:#eef7f2;
  border:1px solid #d2e7d8;
  color:#1c533d;
  font-size:12px;
  font-weight:800;
}
.insight-band{
  padding:22px;
  border-radius:24px;
  background:
    radial-gradient(circle at top right, rgba(245,196,81,.14), transparent 24%),
    linear-gradient(135deg,#fff,#f8fbf9);
  border:1px solid var(--line);
}
.insight-band-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-end;
  margin-bottom:16px;
}
.insight-band-head strong{
  font-size:20px;
}
.insight-band-head small{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.insight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.insight-box{
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
}
.insight-label{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.insight-box strong{
  font-size:20px;
  line-height:1.2;
}
.epic-recommend{
  padding:24px;
}
.epic-notice{
  margin-bottom:18px;
}
.result-actions{
  display:flex;
  gap:12px;
}
.result-actions .secondary{width:260px}
.result-actions .primary{flex:1}

/* Result states */
.result-state-lean .result-hero-panel{
  background:
    radial-gradient(circle at top right, rgba(255,179,120,.18), transparent 26%),
    linear-gradient(135deg, #41261f 0%, #5d3327 48%, #7a4b34 100%);
}
.result-state-ideal .result-hero-panel{
  background:
    radial-gradient(circle at top right, rgba(245,196,81,.18), transparent 28%),
    linear-gradient(135deg, #113527 0%, #153d2d 46%, #1c533d 100%);
}
.result-state-heavy .result-hero-panel{
  background:
    radial-gradient(circle at top right, rgba(245,196,81,.20), transparent 28%),
    linear-gradient(135deg, #3d2e12 0%, #604718 48%, #836220 100%);
}

@media (max-width: 1080px){
  .result-hero-panel{
    grid-template-columns:1fr;
  }
  .result-score-stage{
    justify-content:flex-start;
  }
  .result-main-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 760px){
  .result-hero-panel{
    padding:18px;
    border-radius:24px;
  }
  .result-hero-copy h2{
    font-size:34px;
  }
  .result-score-stage{
    flex-direction:column;
    align-items:flex-start;
  }
  .score-orbit{
    width:160px;
    height:160px;
  }
  .result-epic .score-ring{
    width:138px;height:138px;
  }
  .spectrum-scale{
    grid-template-columns:repeat(3,1fr);
  }
  .result-main-grid,
  .insight-grid{
    grid-template-columns:1fr;
  }
  .result-actions{
    flex-direction:column;
  }
  .result-actions .secondary,
  .result-actions .primary{
    width:100%;
  }
}


/* ===== Body Passport + History v7 ===== */
.smart-tools-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:16px;
  margin:18px 0;
}

.passport-card{
  min-height:330px;
  padding:22px;
  border-radius:28px;
  color:#fff;
  background:
    radial-gradient(circle at 86% 16%, rgba(245,196,81,.32), transparent 22%),
    radial-gradient(circle at 16% 84%, rgba(47,186,119,.26), transparent 28%),
    linear-gradient(145deg,#0e2b20 0%,#174934 52%,#1b6a49 100%);
  position:relative;
  overflow:hidden;
  box-shadow:0 26px 50px rgba(17,53,39,.18);
}
.passport-card:before{
  content:"";
  position:absolute;
  width:180px;height:180px;border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  right:-72px;top:-62px;
  box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 58px rgba(255,255,255,.018);
}
.passport-card:after{
  content:"G";
  position:absolute;
  right:18px;
  bottom:-26px;
  font-size:150px;
  line-height:1;
  font-weight:900;
  color:rgba(255,255,255,.045);
  letter-spacing:-.08em;
}
.passport-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  position:relative;
  z-index:2;
}
.passport-kicker{
  display:block;
  color:rgba(255,255,255,.68);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  font-weight:900;
}
.passport-top h4{
  margin:7px 0 0;
  font-size:30px;
  line-height:1;
  letter-spacing:-.035em;
}
.passport-score{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:70px;
  height:48px;
  padding:0 14px;
  border-radius:16px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.13);
  font-weight:900;
  font-size:19px;
  backdrop-filter:blur(8px);
}
.passport-body{
  position:relative;
  z-index:2;
  margin-top:44px;
}
.passport-status small{
  display:block;
  color:rgba(255,255,255,.64);
  margin-bottom:5px;
}
.passport-status strong{
  display:block;
  font-size:25px;
  max-width:280px;
}
.passport-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:24px;
}
.passport-meta span{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  min-width:0;
}
.passport-meta small{
  display:block;
  color:rgba(255,255,255,.60);
  margin-bottom:5px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.passport-meta b{
  display:block;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.passport-bottom{
  position:absolute;
  z-index:2;
  left:22px;
  right:22px;
  bottom:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:rgba(255,255,255,.52);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.history-panel{
  padding:22px;
  border-radius:28px;
  background:linear-gradient(180deg,#fff,#f8fbf9);
  border:1px solid var(--line);
}
.history-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}
.history-head .eyebrow{
  margin-bottom:5px;
}
.history-head h4{
  margin:0;
  font-size:24px;
  letter-spacing:-.025em;
}
.history-count{
  padding:8px 11px;
  border-radius:999px;
  background:#eef7f2;
  border:1px solid #d2e7d8;
  color:#245a41;
  font-size:11px;
  font-weight:900;
}
.history-empty{
  min-height:210px;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
  line-height:1.65;
  padding:20px;
  border:1px dashed var(--line-strong);
  border-radius:20px;
  background:#fbfdfc;
}
.history-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.history-summary>div{
  padding:12px 14px;
  border-radius:16px;
  background:#f4f8f5;
  border:1px solid var(--line);
}
.history-summary small{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:4px;
}
.history-summary strong{
  font-size:14px;
}
.history-chart-wrap{
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg,#fbfdfc,#f4f8f5);
  border:1px solid var(--line);
  padding:8px 8px 2px;
}
.history-chart{
  width:100%;
  height:180px;
  display:block;
}
.history-list{
  display:flex;
  gap:8px;
  overflow:auto;
  padding:12px 2px 2px;
  scrollbar-width:thin;
}
.history-item{
  min-width:122px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}
.history-item small{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-bottom:4px;
}
.history-item strong{
  display:block;
  font-size:14px;
}
.history-item span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
}

.utility-actions{
  display:flex;
  gap:12px;
  margin:0 0 14px;
}
.utility-actions .secondary{
  flex:1;
}
.utility-actions .is-success{
  background:#e8f7ee;
  color:#175837;
  border-color:#c3e4ce;
}

@media (max-width:1080px){
  .smart-tools-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .passport-meta{
    grid-template-columns:1fr;
  }
  .passport-card{
    min-height:440px;
  }
  .passport-bottom{
    flex-direction:column;
  }
  .history-summary{
    grid-template-columns:1fr;
  }
  .utility-actions{
    flex-direction:column;
  }
}


/* ===== Fix clipping header rezultat v7.1 ===== */
.result-hero-panel{
  padding-top: 38px !important;
  align-items: start !important;
}

.result-hero-copy{
  padding-top: 4px;
}

.result-hero-copy h2{
  line-height: 1.16 !important;
  padding-top: 6px;
  overflow: visible;
}

.result-hero-copy .eyebrow{
  margin-bottom: 14px;
}

.result-score-stage{
  align-self: center;
}

@media (max-width: 760px){
  .result-hero-panel{
    padding-top: 28px !important;
  }

  .result-hero-copy h2{
    line-height: 1.18 !important;
    padding-top: 4px;
  }
}


/* ===== Fix scroll recomandări v7.2 ===== */
.epic-recommend{
  scroll-margin-top: 110px;
  scroll-margin-bottom: 110px;
}


/* ===== Fix definitiv rezultat + scroll v7.3 ===== */

/* Hero-ul are suficient spațiu pentru scor, indiferent de zoom/font rendering. */
.result-hero-panel{
  min-height: 260px !important;
  padding: 34px 28px !important;
  align-items: center !important;
}

.result-hero-copy{
  padding-top: 0 !important;
}

.result-hero-copy h2{
  line-height: 1.12 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.result-score-stage{
  align-self: center !important;
  min-height: 194px;
  padding: 6px 0;
  overflow: visible;
}

.score-orbit{
  width: 182px;
  height: 182px;
  flex: 0 0 182px;
  margin: 0 !important;
}

.result-epic .score-ring{
  transform-origin: center center;
}

/* Efect scurt când ajungem la recomandări, ca utilizatorul să vadă clar ținta. */
@keyframes recommendFocusPulse{
  0%{
    box-shadow:0 0 0 0 rgba(47,186,119,0);
    transform:translateY(0);
  }
  35%{
    box-shadow:0 0 0 7px rgba(47,186,119,.16),0 24px 52px rgba(17,53,39,.18);
    transform:translateY(-2px);
  }
  100%{
    box-shadow:0 0 0 0 rgba(47,186,119,0);
    transform:translateY(0);
  }
}

.epic-recommend.recommend-focus{
  animation:recommendFocusPulse 1.25s ease both !important;
}

/* Nu mai depindem de scroll-margin pentru buton, dar rămâne util pentru accesibilitate. */
.epic-recommend{
  scroll-margin-top:80px !important;
}

@media (max-width:760px){
  .result-hero-panel{
    min-height: auto !important;
    padding: 26px 20px !important;
    align-items: stretch !important;
  }

  .result-score-stage{
    min-height: 168px;
  }

  .score-orbit{
    width:160px;
    height:160px;
    flex-basis:160px;
  }
}


/* ===== Fix scor invizibil în cerc v7.4 ===== */
.result-epic .score-ring strong{
  color: #183226 !important;
}

.result-epic .score-ring span{
  color: #5f7268 !important;
}

.result-epic .score-ring{
  color: #183226 !important;
}

.result-epic .score-ring:after{
  background: #ffffff !important;
}