/* Odiseea Facilitatorului - Facilitare.ro
   Paleta si tipografia pastrate din originalul Manus. */

:root{
  --paper:#f7f0e2;
  --paper-deep:#ede1ca;
  --card:#fffcf6;
  --ink:#142438;
  --ink-soft:#4d5965;
  --gold:#a47c48;
  --thread:#c7553d;
  --thread-dark:#a93f2b;
  --border:rgba(164,124,72,.34);
  --display:"DM Serif Display",Georgia,serif;
  --body:"Manrope",-apple-system,Segoe UI,Arial,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}

.shell{min-height:100vh;display:grid}
@media(min-width:900px){
  .shell{grid-template-columns:minmax(360px,44%) 1fr}
  .shell.rail-first{grid-template-columns:minmax(320px,34%) 1fr}
  /* pe rezultat pagina e lunga: coloana intunecata ramane pe ecran,
     altfel butonul de reluare ajunge la capatul de jos al paginii */
  .shell.rail-first > .rail{position:sticky;top:0;height:100vh;align-self:start}
}

/* ---------- coloana intunecata ---------- */
.rail{
  background:linear-gradient(180deg,rgba(20,36,56,.90),rgba(20,36,56,.82) 55%,rgba(20,36,56,.96)),
    url(img/fundal-labirint.jpg) 14% 30%/cover no-repeat, var(--ink);
  color:#f8f0df;
  padding:clamp(1.6rem,3.5vw,3.4rem);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.rail::after{
  content:"";position:absolute;inset:auto -40% -45% -40%;height:70%;
  background:radial-gradient(ellipse at center,rgba(199,85,61,.22),transparent 68%);
  pointer-events:none;
}
.rail > *{position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--display);font-size:1.05rem}
.brand img{width:30px;height:30px;border-radius:5px}
.lang-toggle{
  margin-left:auto;flex:0 0 auto;
  background:none;border:1px solid currentColor;color:inherit;
  font-family:var(--body);font-weight:800;font-size:.62rem;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.36rem .58rem;cursor:pointer;opacity:.68;border-radius:2px;
  transition:opacity .18s var(--ease);
}
.lang-toggle:hover{opacity:1}
.lang-toggle--lg{
  font-size:.8rem;padding:.66rem 1.15rem;letter-spacing:.16em;
  opacity:1;border-color:var(--thread-dark);color:var(--thread-dark);
}
.lang-toggle--lg:hover{background:var(--thread-dark);color:#fffaf1}
.rail h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.24;margin:.5rem 0 .6rem}
.rail p{color:rgba(248,240,223,.76);font-size:.95rem;margin:0 0 1rem}
.rail-label{
  color:#e0a892;letter-spacing:.135em;text-transform:uppercase;
  font-size:.66rem;font-weight:800;margin:0;
}

/* ---------- coloana deschisa ---------- */
.main{padding:clamp(1.6rem,4vw,3.6rem);display:flex;flex-direction:column;justify-content:center}
.eyebrow{
  color:var(--thread-dark);letter-spacing:.135em;text-transform:uppercase;
  font-size:.68rem;font-weight:800;line-height:1.4;margin:0 0 .8rem;
}

/* ---------- intro ---------- */
.hero{position:relative;min-height:230px;background:var(--ink)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:14% 32%;position:absolute;inset:0}
@media(min-width:900px){.hero{min-height:100vh}}
h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,6vw,4.3rem);line-height:1.12;
  letter-spacing:-.02em;margin:0 0 1rem;
}
.lede{font-size:1.06rem;color:var(--ink-soft);margin:0 0 1.8rem;max-width:38ch}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.9rem;padding:0;list-style:none}
.facts li{
  border:1px solid var(--border);background:var(--card);
  padding:.42rem .8rem;font-size:.66rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);
}
.note{font-size:.85rem;color:var(--ink-soft);margin:1.4rem 0 0;max-width:42ch}
.credit{font-size:.78rem;color:var(--gold);margin-top:auto;padding-top:2rem}

/* ---------- butoane ---------- */
.btn{
  background:var(--thread-dark);color:#fffaf1;border:1px solid var(--thread-dark);
  box-shadow:4px 4px 0 var(--ink);
  padding:.95rem 1.9rem;font-weight:800;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:4px 4px 0 var(--ink)}
.btn-ghost{
  background:none;border:1px solid rgba(247,240,226,.5);color:#f8f0df;
  box-shadow:none;padding:.7rem 1.3rem;
}
.btn-ghost:hover{transform:none;box-shadow:none;border-color:#f8f0df}
.btn-link{
  background:none;border:0;box-shadow:none;color:var(--ink-soft);
  text-decoration:underline;text-transform:none;letter-spacing:0;
  font-weight:600;font-size:.85rem;padding:.5rem 0;cursor:pointer;
}
.btn-link:hover{transform:none;box-shadow:none;color:var(--thread-dark)}

/* ---------- chestionar ---------- */
.count{font-family:var(--display);display:flex;align-items:baseline;margin:1.1rem 0 .4rem}
.count span{font-size:2.5rem;line-height:1}
.count small{font-size:1rem;opacity:.55;margin-left:.3rem}
.track{background:rgba(247,240,226,.24);height:2px;width:100%;max-width:17rem;margin:.9rem 0 1.4rem}
.track i{display:block;height:100%;background:var(--thread);transition:width .35s var(--ease)}
.question{
  font-family:var(--body);font-weight:700;
  font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.3;margin:0 0 1.6rem;max-width:26ch;
}
.options{display:grid;gap:.75rem;max-width:44rem}
@media(min-width:1100px){.options{grid-template-columns:1fr 1fr}}
.option{
  border:1px solid var(--border);background:var(--card);
  min-height:104px;padding:1.1rem 1.2rem;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:.9rem;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.option:hover{border-color:var(--thread);transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,36,56,.09)}
.option .mark{
  font-family:var(--display);font-size:1.1rem;color:var(--gold);
  border:1px solid var(--border);width:2rem;height:2rem;flex:0 0 2rem;
  display:grid;place-items:center;
}
.option.on{border-color:var(--thread);background:#fdf2ec}
.option.on .mark{background:var(--thread-dark);border-color:var(--thread-dark);color:#fffaf1}
.back{margin-top:1.6rem}

/* ---------- rezultat ---------- */
.result-main{padding:clamp(1.6rem,4vw,3.4rem);display:block}
.arch-head{display:flex;align-items:flex-end;gap:1.2rem;margin:.4rem 0 0}
.arch-head .num{font-family:var(--display);font-size:2.2rem;color:var(--gold);line-height:1}
.arch-head h1{margin:0;font-size:clamp(2.4rem,5.4vw,3.9rem)}
.role{font-family:var(--body);font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.9rem;color:var(--ink-soft);margin:.7rem 0 0}
blockquote{
  font-family:var(--display);font-size:clamp(1.15rem,2.3vw,1.6rem);
  line-height:1.35;margin:1.3rem 0 0;padding-left:1.1rem;
  border-left:3px solid var(--thread);color:var(--ink);
}
.thread{
  display:flex;align-items:center;gap:.55rem;margin:1.7rem 0 0;
  color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;
  font-size:.6rem;font-weight:800;
}
.thread i{height:1px;width:2rem;background:var(--border);display:block}
.grid2{display:grid;gap:1.5rem;margin:2.2rem 0 0}
@media(min-width:760px){.grid2{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.portrait{position:relative;min-height:230px;overflow:hidden;border:1px solid var(--border)}
.portrait img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.portrait span{
  position:absolute;left:0;bottom:0;right:0;padding:.8rem 1rem;
  background:linear-gradient(transparent,rgba(20,36,56,.85));color:#f8f0df;
  font-size:.64rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}
dl{margin:1.4rem 0 0}
dl > div{border-top:1px solid var(--border);padding:.95rem 0}
dt{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--thread-dark)}
dd{margin:.35rem 0 0;color:var(--ink)}
.section{border-top:1px solid var(--border);margin-top:2.4rem;padding-top:1.9rem}
.section h3{font-family:var(--display);font-weight:400;font-size:1.55rem;margin:.2rem 0 1.2rem}
.chips{display:grid;gap:.8rem}
@media(min-width:700px){.chips{grid-template-columns:repeat(3,1fr)}}
.chip{background:var(--paper-deep);padding:1.1rem;border:1px solid var(--border)}
.chip p{margin:0 0 .5rem;font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.chip strong{font-family:var(--display);font-weight:400;font-size:1.4rem;display:block;line-height:1.1}
.chip em{font-style:normal;font-size:.82rem;color:var(--ink-soft);display:block;margin-top:.2rem}
.stage{display:grid;gap:1.2rem;align-items:start}
@media(min-width:700px){.stage{grid-template-columns:1fr 2fr}}
.stage h3{margin:0 0 .4rem}
.scores{margin-top:1.4rem;display:grid;gap:.45rem}
.score{display:grid;grid-template-columns:7.5rem 1fr 1.6rem;align-items:center;gap:.7rem;font-size:.84rem}
.score i{display:block;height:7px;background:var(--paper-deep);position:relative}
.score i b{position:absolute;inset:0 auto 0 0;background:var(--gold);display:block}
.score.top i b{background:var(--thread)}
.score b.num{font-weight:700;text-align:right;color:var(--ink-soft);font-size:.78rem}
.disclaimer{font-size:.83rem;color:var(--ink-soft);margin-top:2.4rem;border-top:1px solid var(--border);padding-top:1.3rem}

/* ---------- captare email ---------- */
.capture{background:var(--ink);color:#f8f0df;padding:clamp(1.4rem,3vw,2.2rem);margin-top:2.4rem}
.capture h3{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:.3rem 0 .5rem;color:#f8f0df}
.capture p{color:rgba(248,240,223,.78);font-size:.93rem;margin:0 0 1.2rem;max-width:52ch}
.capture .rail-label{margin-bottom:.2rem}
.capture form{display:flex;flex-wrap:wrap;gap:.6rem}
.capture input{
  flex:1 1 16rem;background:rgba(247,240,226,.07);color:#f8f0df;
  border:1px solid rgba(247,240,226,.34);padding:.9rem 1rem;font:inherit;font-size:.95rem;
}
.capture input::placeholder{color:rgba(248,240,223,.45)}
.capture input:focus{outline:2px solid var(--thread);outline-offset:1px}
.capture small{display:block;margin-top:.9rem;font-size:.76rem;color:rgba(248,240,223,.55)}
.msg{margin-top:1rem;font-size:.92rem;padding:.8rem 1rem;border-left:3px solid var(--thread)}
.msg.ok{border-color:#7fb069;background:rgba(127,176,105,.14)}
.msg.err{border-color:#e0a892;background:rgba(224,168,146,.14)}

:focus-visible{outline:2px solid var(--thread);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* context mitologic pe ecranul de rezultat */
.myth {
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  background: var(--paper-deep);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
}
.myth .eyebrow { margin-bottom: .4rem; }
.myth p:last-child { margin: 0; font-size: .94rem; line-height: 1.6; opacity: .85; }