/* ALIEN LAB · site v1.1: secțiuni noi, insigna de pe șorț, indicator de derulare, Lenis.
   Mișcare: arcuri din alien-lab/motion.css; doar transform și opacity. */

/* ───── iconițe ───── */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic--l{width:32px;height:32px}
.ic--xl{width:44px;height:44px;stroke-width:1.25}

/* ───── Lenis ───── */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.progress{position:fixed;left:0;right:0;top:0;z-index:60;height:3px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ───── indicator „Derulează” ───── */
.cue{position:absolute;z-index:6;left:50%;bottom:calc(var(--marq-h,46px) + 20px);display:flex;flex-direction:column;align-items:center;gap:8px;min-width:44px;min-height:44px;margin-left:-40px;width:80px;color:var(--hero-ink);text-decoration:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:opacity 300ms ease-in,transform var(--spring-soft-d) var(--spring-soft)}
.cue__mouse{position:relative;width:24px;height:38px;border:1.5px solid currentColor;border-radius:14px}
.cue__mouse i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:currentColor;animation:cue 1.8s var(--spring-bouncy) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}20%{opacity:1}60%{transform:translateY(12px);opacity:1}100%{transform:translateY(14px);opacity:0}}
html.is-scrolled .cue{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition:opacity 300ms ease-in,visibility 0s 300ms,transform 300ms ease-in}
.cue:focus-visible{opacity:1;visibility:visible}
@media (max-height:820px){.cue{display:none}[data-theme="tech"] .hx__side--l{display:none}}
[data-theme="organic"] .cue{left:var(--gut);margin-left:0;align-items:flex-start}
[data-theme="tech"] .cue{left:calc(var(--gut) + 40px)}
@media (max-width:900px){.cue{display:none}}

/* ───── insigna ALIEN LAB pe șorțul mascotei ───── */
.pin{--pin-s:clamp(10px,3.2%,22px);position:absolute;z-index:3;left:var(--pin-x);top:var(--pin-y);width:var(--pin-s);aspect-ratio:1;margin:calc(var(--pin-s) / -2) 0 0 calc(var(--pin-s) / -2);border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#FFFFFF 0 6%,transparent 7%),conic-gradient(from 210deg,#9AA0A8,#F4F5F6,#7D838B,#E6E8EA,#9AA0A8);
  box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.25);overflow:hidden;pointer-events:auto;cursor:default;
  transform:rotate(-8deg);transition:transform var(--spring-bouncy-d) var(--spring-bouncy)}
.pin svg{position:absolute;inset:12%;width:76%;height:76%;border-radius:50%;padding:12%;background:var(--pin-bg,#0B0C0D);color:var(--pin-fg,#F1F2F0);box-sizing:border-box}
.pin::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:translateX(-70%);transition:transform 700ms ease-out}
.pin:hover{transform:rotate(4deg) scale(1.12)}
.pin:hover::after{transform:translateX(70%)}
[data-theme="tech"] .pin{--pin-bg:#105BFF;--pin-fg:#FFFFFF}
[data-theme="organic"] .pin{--pin-bg:#015D47;--pin-fg:#E0F354}
[data-theme="violet"] .pin{--pin-bg:#6331FB;--pin-fg:#88F9C0}
.pin{animation:pin-in var(--spring-bouncy-d) var(--spring-bouncy) 600ms backwards;animation-play-state:var(--pin-play,paused)}
.pin.is-on{--pin-play:running}
@keyframes pin-in{from{transform:rotate(-40deg) scale(0)}to{transform:rotate(-8deg) scale(1)}}
.char__tag,.machine__tag{display:none}

/* ───── Organic: aură crem în spatele mascotei, butoane în hero ───── */
.hx__halo{display:none}
[data-theme="organic"] .hx__halo{display:block;position:absolute;z-index:0;left:50%;bottom:calc(var(--marq-h,28px) - 2%);width:min(56vh,46vw,640px);margin-left:calc(min(56vh,46vw,640px) / -2);fill:#F4EFE6}
.hx__btns{display:none}
[data-theme="organic"] .hx__btns{position:absolute;z-index:5;left:var(--gut);top:calc(54% + 1.5 * clamp(28px,3.2vw,52px) + 12px);display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:901px){[data-theme="organic"] .hx__btns{max-width:calc(50vw - min(62vh,52vw,720px) * .33 - var(--gut) - 16px)}}
[data-theme="organic"] .hx__it{top:54%;bottom:auto}
.btn--ghost{background:transparent;color:var(--hero-ink);box-shadow:inset 0 0 0 1.5px currentColor}
[data-theme="organic"] .hx .btn:not(.btn--ghost){background:#0B0C0D;color:#FFFFFF}
@media (hover:hover){.btn--ghost:hover{background:var(--hero-ink);color:var(--hx-bg,var(--base));filter:none}}
@media (max-width:900px){
  [data-theme="organic"] .hx__halo{width:min(96vw,500px);margin-left:calc(min(96vw,500px) / -2);bottom:auto;top:calc(30% + 4%)}
  [data-theme="organic"] .hx__btns{top:max(205px,calc(9% + clamp(120px,24vw,400px) * .78 + 16px));gap:8px}
  [data-theme="organic"] .hx{min-height:760px}
  [data-theme="organic"] .hx__w--2{bottom:calc(6% + 50px)}
  [data-theme="organic"] .hx__btns .btn{min-height:46px;padding:0 18px;font-size:15px}
  [data-theme="organic"] .hx__it{top:auto;bottom:6%}
}

/* ───── Live: oamenii, imediat după hero ───── */
.live{position:relative;padding:clamp(72px,9vw,128px) 0;overflow:hidden}
.live__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:clamp(16px,2.4vw,32px);align-items:end}
.live__txt{align-self:center}
.live__txt .lead{margin-top:20px}
.live figure{margin:0;border-radius:var(--r-md);overflow:hidden}
.live img{width:100%;height:auto;aspect-ratio:1856/2304;object-fit:cover}
.live__b{translate:0 -12%}
.live__facts{margin:32px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.live__facts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.live__facts b{display:block;font-family:var(--font-display);font-size:18px}
.live__facts span{color:var(--ink-2)}
.live__badge{position:absolute;right:calc(var(--gut) + 3%);top:clamp(48px,7vw,96px);display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transform:rotate(4deg)}
.live__badge i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:blink 1.4s ease-in-out infinite}
[data-theme="organic"] .live{background:var(--panel);color:var(--on-panel)}
[data-theme="organic"] .live .lead,[data-theme="organic"] .live__facts span,[data-theme="organic"] .live .kick{color:#0B0C0D}
[data-theme="organic"] .live .kick::before{background:#0B0C0D}
[data-theme="organic"] .live__badge{background:#0B0C0D;color:#E0F354}
[data-theme="tech"] .live{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px}
[data-theme="violet"] .live{background:radial-gradient(50% 60% at 80% 40%,rgba(99,49,251,.4),transparent 70%)}
@media (max-width:900px){.live__in{grid-template-columns:1fr 1fr}.live__txt{grid-column:1/-1}.live__b{translate:0 -8%}.live__badge{top:24px}}

/* ───── Spectacolul: șină laterală cu ceștile reale ───── */
.rail{margin-top:56px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;padding-block:12px 12px}
.rail:focus-visible{outline-offset:-3px}
.rail__in{display:flex;gap:clamp(16px,2.4vw,32px);padding-inline:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));width:max-content}
.rail .cup{width:clamp(240px,30vw,400px);scroll-snap-align:start;scroll-margin-left:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)))}
.rail .cup figcaption{font-family:var(--font-title);font-stretch:62%;font-weight:900;font-size:clamp(28px,3vw,44px);letter-spacing:0;line-height:1.05;color:var(--ink)}
.rail .cup__dish{transition:transform var(--spring-bouncy-d) var(--spring-bouncy)}
@media (hover:hover){.rail .cup:hover .cup__dish{transform:rotate(-12deg) scale(1.03)}}
.rail__end{display:flex;flex-direction:column;justify-content:center;gap:12px;width:clamp(220px,22vw,300px);margin:0;padding:24px;border:1.5px dashed var(--line);border-radius:var(--r-md);font-family:var(--font-ital);font-style:italic;font-size:clamp(22px,2vw,28px);line-height:1.2;scroll-snap-align:start}
.rail__end .mono{font-style:normal;color:var(--accent)}
.rail__hint{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--ink-2)}

/* ───── De ce ALIEN LAB: bento ───── */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:16px;margin-top:56px}
.bento__i{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,32px);border-radius:var(--r-md);background:var(--base-2);border:1px solid var(--line);transition:opacity 600ms var(--ease),translate var(--spring-snappy-d) var(--spring-snappy)}
.bento__i h3{margin:auto 0 0;font-family:var(--font-display);font-size:clamp(22px,2vw,28px);line-height:1.15}
.bento__i p{margin:0;color:var(--ink-2)}
.bento__i .ic{color:var(--accent)}
.bento__i--a{grid-column:span 2;grid-row:span 2;background:var(--panel);color:var(--on-panel);border-color:transparent}
.bento__i--a p,.bento__i--a .ic{color:var(--on-panel)}
.bento__i--a h3{font-family:var(--font-title);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(48px,6vw,96px);line-height:.95}
.bento__i--d{grid-column:span 2}
.bento__q{grid-column:1/-1;display:flex;align-items:center;margin:0;padding:clamp(20px,2.4vw,32px);font-family:var(--font-title);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(36px,4.4vw,72px);line-height:1;color:var(--ink)}
.bento__q em{font-family:var(--font-ital);font-weight:500;text-transform:none;font-stretch:100%;color:var(--accent)}
@media (hover:hover){.bento__i:hover{translate:0 -4px}}
[data-theme="organic"] .bento__q em{color:#E0F354}
[data-theme="organic"] .bento__i--a{color:#0B0C0D}
[data-theme="organic"] .bento__i--a p,[data-theme="organic"] .bento__i--a .ic{color:#0B0C0D}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento__i--a,.bento__i--d,.bento__q{grid-column:1/-1;grid-row:auto}}
@media (max-width:520px){.bento{grid-template-columns:1fr}}

/* ───── Cafea și lapte: alegere interactivă ───── */
.mix__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.mix__set{margin:32px 0 0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:10px}
.mix__set legend{margin-bottom:14px;color:var(--ink-2)}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border:1.5px solid var(--field-line,var(--ink-2));border-radius:var(--r-pill);font-weight:500;transition:transform var(--spring-snappy-d) var(--spring-snappy),background-color 160ms ease-out,border-color 160ms ease-out}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.chip input:active+span{transform:scale(.95)}
.mix__cup{display:flex;flex-direction:column;align-items:center;gap:20px}
.mix__svg{width:min(360px,80%);height:auto;transition:transform var(--spring-bouncy-d) var(--spring-bouncy)}
.mix__svg.is-pop{transform:rotate(18deg) scale(1.03)}
.mix__saucer{fill:var(--base-2);stroke:var(--line);stroke-width:2}
.mix__rim{fill:#0B0C0D}
.mix__crema{fill:var(--crema,#8A5A2B);transition:fill 400ms ease-out}
.mix__art,.mix__drop{fill:var(--foam,#F4EFE6);transition:fill 400ms ease-out}
.mix__out{margin:0;text-align:center}
.mix__out b{display:block;font-family:var(--font-display);font-size:clamp(22px,2vw,28px)}
.mix__out span{color:var(--ink-2)}
@media (max-width:900px){.mix__in{grid-template-columns:1fr}}

/* ───── Cum lucrăm ───── */
.steps__l{margin:56px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.steps__l li{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:28px 24px 32px;border-top:2px solid var(--accent)}
.steps__l .ic{color:var(--accent)}
.steps__n{font-family:var(--font-title);font-stretch:62%;font-weight:900;font-size:clamp(56px,6vw,96px);line-height:.9;color:var(--ink);opacity:.18;position:absolute;right:16px;top:16px;z-index:-1}
.steps__l h3{margin:8px 0 0;font-family:var(--font-display);font-size:24px}
.steps__l p{margin:0;color:var(--ink-2)}
[data-theme="tech"] .steps__l li::after{content:"";position:absolute;left:0;right:0;top:-8px;height:6px;background:repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px 12px);opacity:.6}
[data-theme="organic"] .steps__l li{border-top:0;padding-top:40px}
[data-theme="organic"] .steps__l li::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-conic-gradient(#E0F354 0 25%,#F4EFE6 0 50%) 0 0/12px 12px}
@media (max-width:900px){.steps__l{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps__l{grid-template-columns:1fr}}

/* ───── Practic: preț orientativ și ce ne trebuie ───── */
.practic__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
.tbl{margin-top:32px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.tbl table{width:100%;min-width:480px;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tbl thead th{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.tbl tbody th{font-family:var(--font-display);font-weight:600}
.tbl td{color:var(--ink-2);font-variant-numeric:tabular-nums}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.practic__note{margin:14px 0 0;color:var(--ink-2)}
.needs{padding:clamp(24px,3vw,40px);border-radius:var(--r-md);background:var(--panel);color:var(--on-panel)}
.needs h3{margin:0 0 20px}
.needs ul{margin:0;padding:0;list-style:none;display:grid;gap:18px}
.needs li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
.needs b{display:block;font-family:var(--font-display);font-size:19px}
[data-theme="organic"] .needs{color:#0B0C0D}
@media (max-width:900px){.practic__in{grid-template-columns:1fr}}

/* ───── Întrebări ───── */
.faq__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,80px)}
.faq__l details{border-bottom:1px solid var(--line)}
.faq__l details:first-child{border-top:1px solid var(--line)}
.faq__l summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;font-family:var(--font-display);font-size:clamp(19px,1.6vw,24px);font-weight:500;cursor:pointer;list-style:none}
.faq__l summary::-webkit-details-marker{display:none}
.faq__ic{transition:transform var(--spring-bouncy-d) var(--spring-bouncy);color:var(--accent)}
.faq__l details[open] .faq__ic{transform:rotate(135deg)}
.faq__l details p{margin:0 0 20px;max-width:60ch;color:var(--ink-2)}
.faq__l details[open] p{animation:faq-in var(--spring-soft-d) var(--spring-soft)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:900px){.faq__in{grid-template-columns:1fr}}

/* ───── decor pe direcții ───── */

[data-theme="organic"] .faq{background:var(--base-2)}

@media (prefers-reduced-motion:reduce){
  .cue__mouse i,.live__badge i,.pin,.faq__l details[open] p{animation:none}
  .pin,.pin::after,.rail .cup__dish,.mix__svg,.bento__i,.chip span,.faq__ic,.cue{transition:none}
}

@media (min-width:901px) and (max-width:1060px){.nav__links{gap:16px;letter-spacing:.08em}}
[data-theme="violet"] .cue{left:auto;right:var(--gut);margin-left:0}
[data-theme="violet"] .why{background:radial-gradient(circle at 12% 18%,#fff 0 1.2px,transparent 1.6px),radial-gradient(circle at 72% 12%,#fff 0 1.2px,transparent 1.6px),radial-gradient(circle at 38% 64%,#88F9C0 0 1.6px,transparent 2px),radial-gradient(circle at 88% 78%,#fff 0 1.2px,transparent 1.6px),radial-gradient(circle at 22% 88%,#fff 0 1.2px,transparent 1.6px),radial-gradient(circle at 55% 30%,#fff 0 1px,transparent 1.4px),radial-gradient(circle at 6% 52%,#88F9C0 0 1.2px,transparent 1.6px),radial-gradient(circle at 94% 40%,#fff 0 1px,transparent 1.4px),radial-gradient(circle at 64% 92%,#fff 0 1.2px,transparent 1.6px),radial-gradient(circle at 30% 6%,#fff 0 1px,transparent 1.4px),radial-gradient(circle at 80% 58%,#88F9C0 0 1px,transparent 1.4px)}
/* banda cu desene: derulare automată, fără prindere (prinderea se bate cu mișcarea continuă) */
.rail.rail--auto{scroll-snap-type:none;scrollbar-width:none}
.rail.rail--auto::-webkit-scrollbar{display:none}
.rail__row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.rail__row .rail__hint{margin-top:0}
.rail__ctl{display:flex;gap:8px}
.rail__btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1.5px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font:inherit;font-size:20px;cursor:pointer;transition:border-color 160ms ease-out}
.rail__btn:hover{border-color:var(--ink)}
.rail__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}