/* =====================================================================
   Prima pagină – ilustrația animată „web design” (includes/illus/hero-home.php),
   butonul verde din meniu și alegerea limbii
   ===================================================================== */
.hero__visual--home { display: flex; justify-content: center; }
.wdx { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / .9; margin-left: auto; }
.wdx__ring { position: absolute; inset: 6% 4%; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.12); animation: wdxSpin 40s linear infinite; }
.wdx__ring--2 { inset: 18% 16%; border-style: solid; border-color: color-mix(in srgb, var(--a1) 25%, transparent); animation-duration: 26s; animation-direction: reverse; }
.wdx__ring::after { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 16px var(--a2); }
.wdx__ring--2::after { background: #a78bfa; box-shadow: 0 0 16px #a78bfa; top: auto; bottom: -5px; }
@keyframes wdxSpin { to { transform: rotate(360deg); } }
.wdx__blob { position: absolute; inset: 20% 18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--a1) 45%, transparent), rgba(124,58,237,.25) 55%, transparent 72%); filter: blur(40px); animation: wdxPulse 6s ease-in-out infinite; }
@keyframes wdxPulse { 50% { transform: scale(1.12); opacity: .75; } }
@keyframes wdxFloat { 50% { transform: translateY(-10px); } }

.wdx__browser {
  position: absolute; left: 5%; top: 11%; width: 82%; z-index: 2; border-radius: 16px; overflow: hidden;
  background: #14131c; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 90px -25px rgba(0,0,0,.85), 0 0 70px -20px color-mix(in srgb, var(--a1) 60%, transparent);
  transform: perspective(1400px) rotateY(-9deg) rotateX(4deg); animation: wdxTilt 9s ease-in-out infinite;
}
@keyframes wdxTilt { 50% { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg) translateY(-8px); } }
.wdx__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #1c1b26; border-bottom: 1px solid rgba(255,255,255,.07); }
.wdx__bar .dots i { width: 9px; height: 9px; }
.wdx__url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 7px; background: #0e0d14; font-size: 11.5px; color: #c9c8d6; overflow: hidden; }
.wdx__url-list { position: relative; flex: 1; height: 16px; overflow: hidden; }
.wdx__url-list b { position: absolute; inset: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.wdx__url-list b.is-on, .wdx__url-list b:only-child { opacity: 1; transform: none; }
.wdx__live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #86efac; }
.wdx__live i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; }
.wdx__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0e0d14; }
.wdx__shot { position: absolute; inset: 0; opacity: 0; clip-path: inset(0 0 0 100%); transition: opacity .9s ease, clip-path 1s cubic-bezier(.7,0,.2,1); }
.wdx__shot.is-on, .wdx__shot:only-of-type { opacity: 1; clip-path: inset(0 0 0 0); }
.wdx__shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.wdx__shot.is-on img { animation: wdxKen 4.2s ease-out both; }
@keyframes wdxKen { from { transform: scale(1.12) translateY(2%); } to { transform: scale(1.02); } }
.wdx__shot--mock .mock { height: 100%; aspect-ratio: auto; }
.wdx__scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0 46%, color-mix(in srgb, var(--a2) 22%, transparent) 50%, transparent 54%); background-size: 100% 220%; animation: wdxScan 4.2s linear infinite; mix-blend-mode: screen; }
@keyframes wdxScan { from { background-position: 0 120%; } to { background-position: 0 -120%; } }
.wdx__select { position: absolute; left: 7%; top: 14%; width: 48%; height: 46%; border: 1.5px solid var(--a2); border-radius: 4px; animation: wdxSelect 8s ease-in-out infinite; }
.wdx__select::before, .wdx__select::after { content: ''; position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid var(--a2); }
.wdx__select::before { left: -4px; top: -4px; }
.wdx__select::after { right: -4px; bottom: -4px; }
.wdx__select span { position: absolute; left: -1px; top: -21px; padding: 2px 7px; border-radius: 4px 4px 4px 0; background: var(--a2); color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
@keyframes wdxSelect { 0%, 12% { opacity: 0; transform: scale(.9); } 20%, 55% { opacity: 1; transform: none; } 65%, 100% { opacity: 0; transform: translate(40%, 30%) scale(.7); } }

.wdx__phone { position: absolute; right: 1%; bottom: 3%; width: 24%; aspect-ratio: 9 / 18.5; z-index: 4; border-radius: 26px; padding: 5px; background: linear-gradient(145deg, #3a3946, #111017); box-shadow: 0 30px 60px -15px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12) inset; animation: wdxFloat 6s ease-in-out infinite; animation-delay: -2s; }
.wdx__notch { position: absolute; left: 50%; top: 9px; width: 30%; height: 9px; margin-left: -15%; border-radius: 9px; background: #0a0a0f; z-index: 2; }
.wdx__phone-screen { position: relative; height: 100%; border-radius: 21px; overflow: hidden; background: #f6f6f9; }
.wdx__pm { position: absolute; inset: 0 0 auto; display: grid; gap: 7px; padding: 24px 8px 8px; animation: wdxPhoneScroll 9s ease-in-out infinite; }
@keyframes wdxPhoneScroll { 0%, 15% { transform: none; } 50%, 65% { transform: translateY(-45%); } 100% { transform: none; } }
.wdx__pm-nav { display: flex; align-items: center; justify-content: space-between; }
.wdx__pm-nav b { width: 34%; height: 9px; border-radius: 4px; background: #12121a; }
.wdx__pm-nav i { width: 14px; height: 9px; border-radius: 2px; border-top: 2px solid #12121a; border-bottom: 2px solid #12121a; }
.wdx__pm-hero { display: grid; gap: 5px; padding: 12px 9px; border-radius: 10px; background: linear-gradient(150deg, #1b1824, #2b1a2a); }
.wdx__pm-hero span { height: 7px; border-radius: 3px; background: rgba(255,255,255,.85); }
.wdx__pm-hero span:nth-child(2) { width: 70%; background: var(--grad); }
.wdx__pm-hero em { width: 55%; height: 14px; margin-top: 4px; border-radius: 99px; background: var(--grad); }
.wdx__pm-img { height: 60px; border-radius: 10px; overflow: hidden; background: #ddd; }
.wdx__pm-img img { width: 100%; height: 100%; object-fit: cover; }
.wdx__pm-card { display: flex; gap: 6px; align-items: center; padding: 7px; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.wdx__pm-card i { width: 16px; height: 16px; border-radius: 5px; background: color-mix(in srgb, var(--a1) 20%, #fff); }
.wdx__pm-card span { flex: 1; height: 6px; border-radius: 3px; background: #dcdce4; }

.wdx__code { position: absolute; left: -3%; bottom: 7%; width: 47%; z-index: 5; border-radius: 14px; overflow: hidden; background: rgba(13,12,20,.95); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 26px 60px -18px rgba(0,0,0,.9); animation: wdxFloat 7s ease-in-out infinite; }
.wdx__code-top { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 10.5px; color: #9a99aa; border-bottom: 1px solid rgba(255,255,255,.07); }
.wdx__code-top .dots i { width: 7px; height: 7px; }
.wdx__code pre { margin: 0; padding: 10px 12px 12px; font: 500 11.5px/1.75 ui-monospace, Consolas, monospace; color: #e4e3ee; white-space: normal; }
.wdx__code pre > span { display: block; white-space: pre; overflow: hidden; width: 0; animation: wdxType 8s steps(28) infinite; }
.wdx__code .t2 { animation-delay: .7s; }
.wdx__code .t3 { animation-delay: 1.4s; }
.wdx__code .t4 { animation-delay: 2.1s; }
@keyframes wdxType { 0% { width: 0; } 18%, 85% { width: 100%; } 100% { width: 0; } }
.wdx__code em { font-style: normal; color: #ff7a8a; }
.wdx__code u { text-decoration: none; color: #fbbf24; }
.wdx__code s { text-decoration: none; color: #86efac; }
.wdx__caret { display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--a2); animation: blink 1s steps(1) infinite; }

.wdx__palette { position: absolute; left: 0; top: 1%; z-index: 5; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.96); color: #12121a; box-shadow: 0 20px 45px -15px rgba(0,0,0,.6); animation: wdxFloat 6.5s ease-in-out infinite; animation-delay: -1s; }
.wdx__palette b { display: block; font: 700 11.5px/1 var(--display); margin-bottom: 8px; }
.wdx__palette div { display: flex; gap: 6px; }
.wdx__palette i { width: 20px; height: 20px; border-radius: 7px; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.06); animation: wdxSwatch 5s ease-in-out infinite; }
.wdx__palette i:nth-child(2) { animation-delay: .4s; }
.wdx__palette i:nth-child(3) { animation-delay: .8s; }
.wdx__palette i:nth-child(4) { animation-delay: 1.2s; }
.wdx__palette i:nth-child(5) { animation-delay: 1.6s; }
@keyframes wdxSwatch { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-5px) scale(1.12); } }

.wdx__score { position: absolute; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.96); color: #12121a; box-shadow: 0 20px 45px -15px rgba(0,0,0,.6); animation: wdxFloat 5.5s ease-in-out infinite; animation-delay: -3s; }
.wdx__score b { display: block; font: 700 14px/1.2 var(--display); }
.wdx__score small { color: #4f5063; font-size: 11.5px; }
.wdx__score .gauge { width: 42px; height: 42px; }
.wdx__score .gauge span { width: 33px; height: 33px; font-size: 13px; }

.wdx__badge { position: absolute; left: 38%; bottom: 0; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 7px; border-radius: 999px; background: rgba(20,19,28,.92); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 12px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.7); animation: wdxFloat 7.5s ease-in-out infinite; }
.wdx__badge span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); }
.wdx__badge b { font-weight: 700; white-space: nowrap; }

.wdx__cursor { position: absolute; z-index: 6; left: 30%; top: 40%; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); animation: wdxCursor 8s cubic-bezier(.65,0,.35,1) infinite; }
.wdx__click { position: absolute; z-index: 5; width: 34px; height: 34px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--a2); opacity: 0; animation: wdxClick 8s linear infinite; }
@keyframes wdxCursor {
  0% { left: 62%; top: 72%; } 15% { left: 18%; top: 30%; } 22% { left: 18%; top: 30%; transform: scale(.85); } 26% { transform: none; }
  45% { left: 50%; top: 58%; } 55% { left: 50%; top: 58%; } 75% { left: 82%; top: 20%; } 82% { left: 82%; top: 20%; transform: scale(.85); } 86% { transform: none; } 100% { left: 62%; top: 72%; }
}
@keyframes wdxClick {
  0%, 21% { opacity: 0; left: 18%; top: 30%; transform: scale(.3); } 22% { opacity: 1; left: 18%; top: 30%; transform: scale(.3); } 30% { opacity: 0; left: 18%; top: 30%; transform: scale(1.6); }
  81% { opacity: 0; left: 82%; top: 20%; transform: scale(.3); } 82% { opacity: 1; left: 82%; top: 20%; transform: scale(.3); } 90%, 100% { opacity: 0; left: 82%; top: 20%; transform: scale(1.6); }
}

@media (max-width: 980px) {
  .hero__visual--home { max-width: 560px; margin: 10px auto 0; width: 100%; }
  .wdx { margin: 0 auto; }
}
@media (max-width: 560px) {
  .wdx { aspect-ratio: 1 / 1; }
  .wdx__browser { left: 2%; width: 90%; top: 17%; }
  .wdx__code { width: 60%; left: 0; bottom: 3%; }
  .wdx__code pre { font-size: 9.5px; padding: 8px 9px 10px; }
  .wdx__phone { width: 27%; bottom: 2%; }
  .wdx__badge { display: none; }
  .wdx__palette { padding: 8px 9px; }
  .wdx__palette i { width: 15px; height: 15px; border-radius: 5px; }
  .wdx__score { padding: 7px 10px 7px 7px; gap: 8px; }
  .wdx__score .gauge { width: 34px; height: 34px; }
  .wdx__score .gauge span { width: 27px; height: 27px; font-size: 11px; }
  .wdx__select span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wdx__code pre > span { width: 100%; }
  .wdx__select { opacity: 1; }
}

/* ===== Butonul verde din meniu (ca „Anti-DDoS” pe HostEasy) ===== */
.btn--green {
  position: relative; color: #fff; border: 1px solid rgba(134,239,172,.35);
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 10px 26px -8px rgba(34,197,94,.75), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--green:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(34,197,94,.9), inset 0 1px 0 rgba(255,255,255,.3); filter: brightness(1.05); }
.btn--green::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(34,197,94,.55); opacity: 0; animation: greenRing 2.6s ease-out infinite; pointer-events: none; }
@keyframes greenRing { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.18); } }
.btn--green .btn__ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); margin-left: -4px; }
.btn--green:hover .btn__ic .ico { transform: none; }

/* ===== Alegerea limbii ===== */
.navbar__inner { gap: 18px; }
.lang { position: relative; flex-shrink: 0; }
.lang__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s; }
.lang__btn:hover, .lang.is-open .lang__btn { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.09); }
.lang__btn .lang__chev { transition: transform .25s; }
.lang.is-open .lang__chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 120; width: 240px; max-width: calc(100vw - 32px); padding: 8px; border-radius: 16px;
  background: #15141f; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px -10px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), visibility .2s;
}
.lang__menu::before { content: ''; position: absolute; right: 18px; top: -6px; width: 12px; height: 12px; background: #15141f; border-left: 1px solid rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12); transform: rotate(45deg); }
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__head { padding: 6px 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8b8a9c; }
.lang__menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; font-size: 14.5px; font-weight: 600; color: #e4e3ec; transition: background .15s, color .15s; }
.lang__menu a span { flex: 1; }
.lang__menu a small { font-size: 11.5px; font-weight: 700; color: #7f7e90; }
.lang__menu a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lang__menu a.is-active { background: color-mix(in srgb, var(--a1) 16%, transparent); color: #fff; }
.lang__menu a.is-active small { color: var(--a2); }
.lang__menu .lflag { width: 24px; height: 17px; }

@media (min-width: 981px) {
  .navbar__inner > .nav { margin-left: auto; }
}
@media (max-width: 980px) {
  .lang { margin-left: auto; }
  .lang__btn { width: auto; justify-content: center; height: 44px; padding: 0 11px; }
  .lang__menu { position: absolute; display: block; margin-top: 0; box-shadow: 0 30px 70px -10px rgba(0,0,0,.75); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); }
  .lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
  .nav__cta { justify-content: center; }
  .lang__btn b { display: none; }
  .navbar__inner { gap: 10px; }
}
@media (max-width: 560px) {
  .lang__menu { width: calc(100vw - 32px); max-width: 320px; right: -54px; }
  .lang__menu::before { right: 72px; }
  .lang__menu a { padding: 13px 14px; font-size: 16px; }
}