/* Homepage only (scoped under .tutorialeu-home). Shared page styles and the dark-theme
   preference stay authoritative; the brand palette is the site's: navy #2c3e50, teal #1abc9c. */
.tutorialeu-home { --home-bg: #f4f7f8; --home-surface: #fff; --home-surface-2: #eef3f5; --home-ink: #2c3e50; --home-muted: #5b6b78; --home-line: #d9e2e6; --home-accent: #1abc9c; --home-accent-ink: #0b7a66; --home-accent-soft: #1abc9c1f; --home-shadow: 0 16px 48px #142d4014; background: var(--home-bg); }
.tutorialeu-home.dark-theme { --home-bg: #111c26; --home-surface: #1b2b38; --home-surface-2: #16242f; --home-ink: #edf5f8; --home-muted: #aabcc7; --home-line: #34495b; --home-accent: #1abc9c; --home-accent-ink: #5fe0c4; --home-accent-soft: #1abc9c2b; --home-shadow: 0 16px 48px #00000055; }
.tutorialeu-home [hidden] { display: none !important; }
.tutorialeu-home main { color: var(--home-ink); }
.tutorialeu-home main a { color: var(--home-accent-ink); }

/* ── Navigation (shared markup, homepage-only tweaks) ─────────────────────────────── */
.tutorialeu-home #mainNav .container { max-width: 1440px; }
@media (min-width: 992px) {
    .tutorialeu-home #mainNav .navbar-brand { font-size: 1.25rem; margin-right: 20px; }
    .tutorialeu-home #mainNav .navbar-nav { gap: 0; }
    .tutorialeu-home #mainNav .nav-item { margin-left: 0 !important; margin-right: 0 !important; }
    .tutorialeu-home #mainNav .nav-link { font-size: .78rem; padding-left: .55rem !important; padding-right: .55rem !important; }
}
/* Seven text entries plus the three controls fit the lg breakpoint once the labels lose their emoji. */
@media (min-width: 992px) and (max-width: 1199px) {
    .tutorialeu-home #mainNav .navbar-brand { font-size: 1.1rem; margin-right: 10px; }
    .tutorialeu-home #mainNav .nav-link { font-size: .72rem; padding-left: .4rem !important; padding-right: .4rem !important; }
    .tutorialeu-home #home-style-btn .interactiv-label { display: none !important; }
}
/* Keyboard focus must be visible on every nav control (styles.css removes it on the three utility buttons). */
.tutorialeu-home #mainNav :is(a, button, #theme-toggle-btn, #motion-toggle-btn, #home-style-btn):focus-visible { outline: 3px solid #1abc9c !important; outline-offset: 2px !important; border-radius: 6px; }
/* Font Awesome is not loaded on the homepage. The page's own icons come from
   assets/icons/home-sprite.svg; the <i> glyphs in the shared header and footer markup are
   painted from CSS masks generated from the same icon set (scripts/build-home-sprite.cjs). */
.tutorialeu-home :is(#mainNav, .footer) i:is(.fas, .fab):not(.svg-inline--fa) { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; background: currentColor; -webkit-mask: var(--fa-mask) center / contain no-repeat; mask: var(--fa-mask) center / contain no-repeat; }
.tutorialeu-home .btn-social { padding: 0 !important; }
.tutorialeu-home .btn-social i:not(.svg-inline--fa) { width: 1.25em !important; height: 1.25em !important; flex-shrink: 0; }
.hi { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; overflow: visible; flex-shrink: 0; }
.hi.fa-2x { font-size: 2em; }
/* Alege stilul paginii principale: afișează doar pictograma în antet. Trăiește acum
   în ACELAȘI <li> ca tema/mișcarea (nu mai are unul separat), deci apare pe orice
   pagină, nu doar pe cea principală. */
.tutorialeu-home #home-style-btn { display: inline-flex; align-items: center; justify-content: center; }
.tutorialeu-home #home-style-btn .interactiv-label { display: none !important; }
/* The mobile stacking for tema/mișcare/stil-pagină now lives generically in styles.css
   (@media max-width: 991.98px) — it needs to apply on every page, not just this one, since
   /clasic and the shared style-switch button can show 2-3 icons in that same <li> too. */
/* Two navigation layers are enough (menu + directory): the side dot rail is a third. */
.tutorialeu-home .sarituri { display: none !important; }

/* @home-sprite-masks:start (generated by scripts/build-home-sprite.cjs) */
.tutorialeu-home i.fa-discord:not(.svg-inline--fa) { --fa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23000' d='M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z'/%3E%3C/svg%3E"); }
.tutorialeu-home i.fa-facebook-f:not(.svg-inline--fa) { --fa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23000' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E"); }
.tutorialeu-home i.fa-twitter:not(.svg-inline--fa) { --fa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E"); }
.tutorialeu-home i.fa-youtube:not(.svg-inline--fa) { --fa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23000' d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E"); }
.tutorialeu-home i.fa-bars:not(.svg-inline--fa) { --fa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E"); }
.tutorialeu-home i.fa-moon:not(.svg-inline--fa) { --fa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'/%3E%3C/svg%3E"); }
.tutorialeu-home i.fa-palette:not(.svg-inline--fa) { --fa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3H344c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E"); }
.tutorialeu-home i.fa-wand-magic:not(.svg-inline--fa) { --fa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M14.1 463.3c-18.7-18.7-18.7-49.1 0-67.9L395.4 14.1c18.7-18.7 49.1-18.7 67.9 0l34.6 34.6c18.7 18.7 18.7 49.1 0 67.9L116.5 497.9c-18.7 18.7-49.1 18.7-67.9 0L14.1 463.3zM347.6 187.6l105-105L429.4 59.3l-105 105 23.3 23.3z'/%3E%3C/svg%3E"); }
.tutorialeu-home i.fa-wand-magic-sparkles:not(.svg-inline--fa) { --fa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23000' d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/svg%3E"); }
/* @home-sprite-masks:end */

/* ── Shared type & controls ───────────────────────────────────────────────────────── */
.home-skip { position: fixed; top: 8px; left: 12px; transform: translateY(-180%); z-index: 9999; padding: 12px 20px; background: var(--home-surface); color: var(--home-ink); border-radius: 8px; }
.home-skip:focus { transform: none; }
.tutorialeu-home :is(a, button, input, summary, select, textarea):focus-visible { outline: 3px solid var(--home-accent); outline-offset: 3px; }

/* Keep the first paint calm while the shared header and page enhancements load. The
   content keeps its space in the document, so revealing it never causes a jump. */
.tutorialeu-home.home-js #home-main > * {
    transition: opacity .42s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
.tutorialeu-home.home-js.home-loading #home-main > * { opacity: 0; transform: translateY(12px); }
.tutorialeu-home.home-js #home-main > :nth-child(2) { transition-delay: .04s; }
.tutorialeu-home.home-js #home-main > :nth-child(3) { transition-delay: .08s; }
.tutorialeu-home.home-js #home-main > :nth-child(4) { transition-delay: .12s; }
.tutorialeu-home.home-js #home-main > :nth-child(5) { transition-delay: .16s; }
.tutorialeu-home.home-js.home-ready #home-main > * { will-change: auto; }
.tutorialeu-home.home-js #mainNav { animation: home-nav-in .38s ease both; }
@keyframes home-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.home-eyebrow { font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--home-accent-ink); margin: 0 0 14px; }
.tutorialeu-home main h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.2; margin: 0; color: var(--home-ink); }
.tutorialeu-home main h3 { font-size: 1.1rem; font-weight: 750; letter-spacing: -.02em; color: var(--home-ink); }

/* ── Hero ─────────────────────────────────────────────────────────────────────────── */
.home-hero { padding: 52px 0 40px; background: radial-gradient(ellipse at 80% 10%, var(--home-accent-soft), transparent 55%), var(--home-bg); border-bottom: 1px solid var(--home-line); }
/* One column now: the house picture used to sit beside the copy in a second column, but
   the house is just one of three equal home styles now (see the style chooser), not a
   themed showcase image — removed rather than left implying otherwise. */
.home-hero-layout { max-width: 760px; }
.home-hero-copy { padding-top: 0; }
.home-hero h1 { font-size: clamp(2.2rem, 3.6vw, 3.3rem); letter-spacing: -.04em; line-height: 1.1; font-weight: 800; margin: 0 0 20px; color: var(--home-ink); }
.home-hero h1 span { color: var(--home-accent-ink); }
.home-intro { max-width: 560px; font-size: 1.06rem; line-height: 1.75; color: var(--home-muted); margin: 0 0 26px; }
.home-intro a { color: var(--home-ink); font-weight: 650; text-decoration-color: var(--home-accent); text-underline-offset: 3px; }
.home-intro a:hover { color: var(--home-accent-ink); }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
.home-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 20px; border-radius: 10px; text-decoration: none !important; font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.3; cursor: pointer; }
.home-primary { background: #1abc9c; color: #1f2d3a !important; border: 1px solid #1abc9c; box-shadow: 0 10px 24px #1abc9c40; }
.home-primary:hover, .home-primary:focus-visible { background: #2fcfae; border-color: #2fcfae; color: #1f2d3a !important; }
.home-primary .hi { color: #1f2d3a; }
.home-secondary { color: var(--home-ink) !important; border: 1px solid var(--home-line); background: var(--home-surface); }
.home-secondary:hover { border-color: var(--home-accent); color: var(--home-accent-ink) !important; }
.home-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: .92rem; color: var(--home-accent-ink); text-decoration: none; }
.home-text-link:hover { text-decoration: underline; }
.contact-youtube-link .hi { color: #e53935; font-size: 1.15em; }
.home-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0; margin: 0; font-size: .85rem; color: var(--home-muted); }
.home-facts strong { color: var(--home-ink); font-weight: 800; }

/* Legatura discreta spre stilul clasic + butonul care redeschide alegatorul de stil. */
.home-style-switch { margin: 4px 0 0; font-size: .85rem; color: var(--home-muted); }
.home-style-switch a { color: var(--home-accent-ink); font-weight: 650; text-decoration: none; }
.home-style-switch a:hover { text-decoration: underline; }
.home-style-switch button { border: 0; background: none; padding: 0; font: inherit; font-weight: 650; color: var(--home-accent-ink); cursor: pointer; text-decoration: none; }
.home-style-switch button:hover { text-decoration: underline; }

/* Alegatorul de stil: o suprapunere peste toata pagina, aratata o singura data (prima
   vizita, cand nu exista inca nicio alegere salvata) sau redeschisa manual din link-ul
   de mai sus. Trei carduri mari — clasic, modern, interactiv — ca "butoanele mari" de
   pe prima pagina de dinainte. */
.home-style-chooser { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; background: #10161ecc; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.home-style-card { width: 100%; max-width: 720px; background: var(--home-surface); border: 1px solid var(--home-line); border-radius: 18px; padding: 28px 26px; box-shadow: 0 30px 80px #00000040; }
.home-style-card h2 { margin: 4px 0 8px; font-size: 1.4rem; }
.home-style-lead { margin: 0 0 20px; color: var(--home-muted); }
.home-style-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home-style-option { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 14px; border-radius: 14px; border: 1px solid var(--home-line); background: var(--home-surface-2); color: var(--home-ink); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, background .15s; }
.home-style-option:hover, .home-style-option:focus-visible { border-color: var(--home-accent); background: var(--home-accent-soft); transform: translateY(-2px); }
.home-style-option-icon { font-size: 1.8rem; line-height: 1; }
.home-style-option-title { font-weight: 800; font-size: 1.02rem; }
.home-style-option-desc { font-size: .82rem; color: var(--home-muted); line-height: 1.4; }
.home-style-badge { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--home-accent-soft); color: var(--home-accent-ink); font-size: .68rem; font-weight: 700; letter-spacing: .04em; vertical-align: middle; }
@media (max-width: 640px) { .home-style-options { grid-template-columns: 1fr; } .home-style-card { padding: 22px 18px; } }
.home-launchpad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; padding-top: 22px; border-top: 1px dashed var(--home-line); }
.home-launchpad-heading { font-size: .8rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--home-muted); margin-right: 6px; }
.home-launchpad a { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--home-line); background: var(--home-surface); color: var(--home-ink); font-size: .88rem; font-weight: 650; text-decoration: none; }
.home-launchpad a:hover { border-color: var(--home-accent); color: var(--home-accent-ink); }
.home-short-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--home-accent-soft); color: var(--home-accent-ink); font-size: .95rem; font-weight: 800; }

/* ── Directory ────────────────────────────────────────────────────────────────────── */
.home-directory { padding: 56px 0 64px; background: var(--home-bg); scroll-margin-top: 100px; }
.home-directory-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
.home-directory-heading .home-eyebrow { margin-bottom: 10px; }
.home-directory-heading > a { font-size: .88rem; font-weight: 650; white-space: nowrap; }
.home-search { margin-bottom: 22px; }
.home-search label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 8px; }
.home-search-field { display: flex; border: 1px solid var(--home-line); border-radius: 10px; background: var(--home-surface); padding: 5px; max-width: 650px; }
.home-search-field:focus-within { border-color: var(--home-accent); box-shadow: 0 0 0 3px var(--home-accent-soft); }
.home-search input { min-width: 0; width: 100%; color: var(--home-ink); background: transparent; border: 0; padding: 11px; font: inherit; }
.home-search input:focus-visible { outline: none; }
.home-search input::placeholder { color: var(--home-muted); opacity: 1; }
.home-search button, .home-more { border: 1px solid var(--home-line); background: var(--home-surface-2); color: var(--home-ink); border-radius: 7px; padding: 9px 14px; font-size: .84rem; font-weight: 600; }
#home-results { font-size: .84rem; color: var(--home-muted); margin: 8px 0 0; min-height: 1.2em; }
.home-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.home-category { border: 1px solid var(--home-line); border-radius: 14px; background: var(--home-surface); padding: 24px; scroll-margin-top: 110px; }
.home-category-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.home-number { color: var(--home-accent-ink); font-size: .8rem; font-weight: 750; border-bottom: 2px solid var(--home-accent); padding-bottom: 4px; }
.home-category-count { font-size: .78rem; color: var(--home-muted); }
.home-category h3 { margin-bottom: 6px; }
.home-category > p { color: var(--home-muted); font-size: .86rem; line-height: 1.6; min-height: 2.7em; margin-bottom: 14px; }
.home-page-list { list-style: none; padding: 0; margin: 0; }
.home-page-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 9px 0; font-size: .9rem; color: var(--home-ink); border-top: 1px solid var(--home-line); text-decoration: none; }
.home-page-list a span { color: var(--home-muted); font-size: .85rem; }
.home-page-list a:hover { color: var(--home-accent-ink); text-decoration: underline; }
.home-inpage a { color: var(--home-muted); }
.home-more { width: 100%; margin-top: 12px; min-height: 44px; }
.home-category-toggle { all: unset; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.home-category-toggle::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--home-muted); border-bottom: 2px solid var(--home-muted); transform: rotate(45deg); margin: 0 6px 4px 0; transition: transform .2s ease; flex-shrink: 0; }
.home-category-toggle[aria-expanded="false"]::after { transform: rotate(-45deg); margin-bottom: 0; }
.home-category-toggle:disabled { cursor: default; }
.home-category-toggle:disabled::after { display: none; }
.home-category-toggle:focus-visible { outline: 3px solid var(--home-accent); outline-offset: 4px; border-radius: 6px; }
.home-more:hover { border-color: var(--home-accent); color: var(--home-accent-ink); }

/* ── Despre strip ─────────────────────────────────────────────────────────────────── */
.home-about { padding: 48px 0; background: var(--home-surface); border-top: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); scroll-margin-top: 100px; }
.home-about-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.home-about h2 { margin-bottom: 14px; }
.home-about p { color: var(--home-muted); line-height: 1.7; margin: 0; max-width: 62ch; }
.home-about strong { color: var(--home-ink); }
.home-social { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 0; margin: 0; }
.home-social a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--home-line); color: var(--home-ink); font-weight: 650; font-size: .9rem; text-decoration: none; }
.home-social a:hover { border-color: var(--home-accent); color: var(--home-accent-ink); }
/* The old "din cer" reveal (styles.css) fades this section in from blur; here it stays put. */
.tutorialeu-home #about :is(h2, p, div, ul, li, a) { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }

/* ── Content blocks below the directory ───────────────────────────────────────────── */
/* Backgrounds carry the #home-main id so they beat styles.css's per-section id rules (#ai is yellow there). */
.tutorialeu-home #home-main .home-block { padding: 64px 0; background: var(--home-bg); scroll-margin-top: 96px; }
.tutorialeu-home #home-main .home-block-alt { background: var(--home-surface-2); border-top: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); }
.tutorialeu-home #home-main :is(.home-card, .home-tool) { background: var(--home-surface); }
.tutorialeu-home .game-app-item[data-category]::after { display: none; }
.tutorialeu-home #weather .btn-xl { font-size: .95rem; padding: .6rem 1.3rem; }
.home-block-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: 30px; }
.home-block-head .home-eyebrow { margin-bottom: 10px; }
.home-block-head > p { color: var(--home-muted); line-height: 1.7; margin: 0; font-size: .98rem; }
.home-block-link { font-weight: 700; font-size: .9rem; white-space: nowrap; text-decoration: none; }
.home-block-link:hover { text-decoration: underline; }
.home-subblock { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--home-line); scroll-margin-top: 100px; }
.home-subblock-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; }
.home-subblock-head h3 { margin: 0 0 4px; }
.home-subblock-head p { margin: 0; color: var(--home-muted); font-size: .92rem; }
.home-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.home-card { border: 1px solid var(--home-line); border-radius: 16px; background: var(--home-surface); padding: 26px; scroll-margin-top: 100px; }
.home-card > h3 { margin-bottom: 6px; }
.home-card > p { color: var(--home-muted); line-height: 1.65; margin-bottom: 16px; font-size: .95rem; }
.home-card-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.home-card-links a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 10px; background: var(--home-surface-2); color: var(--home-ink); font-weight: 650; font-size: .9rem; text-decoration: none; border: 1px solid transparent; }
.home-card-links a:hover { border-color: var(--home-accent); color: var(--home-accent-ink); }
.home-card-more { margin: 14px 0 0; font-size: .86rem; color: var(--home-muted); }

/* The site's tile grid, calmer: smaller icons, tighter gaps, no per-tile hover jump. */
.tutorialeu-home .game-apps-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 18px 12px; padding: 8px 0 0; max-width: none; justify-content: start; }
.tutorialeu-home .game-app-icon { width: 64px; height: 64px; font-size: 1.7rem; border-radius: 16px; box-shadow: 0 6px 14px #0000001f; margin-bottom: .5rem; }
.tutorialeu-home .game-app-label { font-size: .84rem; font-weight: 650; color: var(--home-ink); line-height: 1.3; }
.tutorialeu-home .game-app-item:hover, .tutorialeu-home .game-app-item.is-pressed { transform: translateY(-3px); }
.tutorialeu-home .game-app-item:hover .game-app-label { color: var(--home-accent-ink); }
.tutorialeu-home .home-tiles-compact { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.tutorialeu-home .home-tiles-compact .game-app-icon { width: 54px; height: 54px; font-size: 1.4rem; border-radius: 14px; }
.tutorialeu-home :is(.game-app-icon, .game-app-icon *, .cube-divider-container, .rubik-divider-container, .rubik-div-face, .divider-custom-icon) { animation: none !important; }
.tutorialeu-home .game-app-icon .hi { width: 1em; height: 1em; }
.tutorialeu-home .game-app-icon .remi-board-icon { width: 32px; height: 22px; border-width: 2px; border-radius: 4px; gap: 3px; padding: 3px; }
.tutorialeu-home .game-app-icon .remi-line { height: 2px; }
.tutorialeu-home .home-tiles-compact .game-app-icon .remi-board-icon { width: 26px; height: 18px; border-width: 2px; gap: 2px; padding: 2px; }
.tutorialeu-home .game-app-icon .multiplayer-badge, .tutorialeu-home .game-app-icon .ai-badge { position: absolute; right: 6px; bottom: 6px; font-size: .7rem; opacity: .85; filter: drop-shadow(0 2px 3px #0000004d); z-index: 2; }
.tutorialeu-home .home-tiles-compact .game-app-icon .multiplayer-badge, .tutorialeu-home .home-tiles-compact .game-app-icon .ai-badge { right: 4px; bottom: 4px; font-size: .6rem; }

/* Tools: a weather card plus a grid of tool cards, each a tile + one sentence + link. */
.home-tools-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
.tutorialeu-home :is(.home-card, .home-tool, .home-category, .home-card-weather, .home-tools-layout > *, .home-duo > *, .home-portfolio-item) { min-width: 0; }
.home-card-weather .terminal-window { text-align: left; max-width: 100%; }
.tutorialeu-home #weather .output-area { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tutorialeu-home #weather .output-area pre { white-space: pre; overflow-x: auto; max-width: 100%; font-size: .8rem; line-height: 1.25; }
.tutorialeu-home #weather .terminal-body .input-line { flex-wrap: nowrap; }
.tutorialeu-home #weather .cmd-input { min-width: 0; width: 100%; }
.home-card-weather .weather-hint { font-size: .8rem; color: var(--home-muted); }
.home-card-weather #btn-terminal-run { min-width: 40px; min-height: 36px; }
.home-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* The cards that continue below the weather card, across the whole width. Three columns
   here rather than two: the row is wider than the right-hand column was, and two would
   leave the fiches looking stretched. */
.home-tool-grid-full { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.home-tool { border: 1px solid var(--home-line); border-radius: 14px; background: var(--home-surface); padding: 18px 20px; scroll-margin-top: 100px; display: flex; flex-direction: column; gap: 10px; }
/* "Aplicații simple" nests a whole tile grid (a display:grid child) inside this flex
   column card. A grid child's auto-fill/auto-fit columns need a definite width to size
   against, and that isn't reliably resolved before a flex parent's own stretch sizing —
   it was shrinking to fit only its first tile, stacking every tile in one column instead
   of a real grid. An explicit width forces the size grid actually needs to lay out. */
.home-tool .game-apps-grid { width: 100%; }
/* A card with one lead app (its own icon+name doubling as the card's title) lays that
   single tile out sideways. A card that is itself a grid of many small apps (below) keeps
   the grid's own icon-on-top tiles instead — the row layout above would apply to every
   .game-app-item inside a .home-tool by default, tile-grid ones included, without this. */
.home-tool > .game-app-item { flex-direction: row; align-items: center; gap: 14px; }
.home-tool > .game-app-item .game-app-icon { width: 46px; height: 46px; font-size: 1.25rem; border-radius: 12px; margin: 0; flex-shrink: 0; }
.home-tool > .game-app-item .game-app-label { font-size: 1rem; font-weight: 750; text-align: left; }
.home-tool > .game-app-item:hover { transform: none; }
.home-tool > h3 { margin: 0; font-size: 1.05rem; font-weight: 750; }
/* Fourteen small apps deserve the full row, not half of it squeezed next to a sibling card. */
.home-tool-wide { grid-column: 1 / -1; }
.home-tool > p { margin: 0; color: var(--home-muted); font-size: .9rem; line-height: 1.6; }
.home-tool-link { font-weight: 700; font-size: .88rem; text-decoration: none; margin-top: auto; }
.home-tool-link:hover { text-decoration: underline; }
.home-tool-links { font-size: .88rem; line-height: 1.9; color: var(--home-muted) !important; margin-top: auto; }
.home-tool-links a { font-weight: 650; text-decoration: none; }
.home-tool-links a:hover { text-decoration: underline; }
/* Garaj: the swap script replaces the tile with a dropdown of the visitor's cars. */
.home-tool #garaj-cars-tile .dropdown-menu { text-align: left; }

/* Zodiac: the starry photo is applied only when the card comes near (index-page.js adds .is-near). */
.tutorialeu-home #home-main .home-zodiac { margin-top: 20px; color: #fff; background: linear-gradient(135deg, #1a2440 0%, #2c3e50 60%, #1f3b4d 100%); border-color: #2c3e50; }
.tutorialeu-home #home-main .home-zodiac.is-near { background-image: linear-gradient(rgba(20, 24, 48, .55), rgba(20, 24, 48, .7)), url(../assets/img/menu/zodiac-background.webp); background-size: cover; background-position: center; }
/* The one-shot "reveal" animations styles.css plays on #video and #zodiac (tiles fading in one by one, the dragon flying in) are template decoration; the blocks simply stand still here. */
.tutorialeu-home #video.e-trezita .portfolio-item, .tutorialeu-home #zodiac.e-trezita, .tutorialeu-home #zodiac.e-trezita * { animation: none !important; opacity: 1; }
.home-zodiac-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px 40px; align-items: end; }
.tutorialeu-home #home-main .home-zodiac h3 { color: #fff; margin-bottom: 6px; }
.home-zodiac-head p { color: #d7e2ea !important; margin: 0; font-size: .95rem; line-height: 1.6; }
.home-zodiac-head .home-tool-links { text-align: right; }
.home-zodiac a { color: #7fe7d1; }
.home-zodiac-details { margin-top: 18px; }
.home-zodiac-details > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid #ffffff59; color: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.home-zodiac-details > summary::-webkit-details-marker { display: none; }
.home-zodiac-details > summary::before { content: '+'; font-weight: 800; }
.home-zodiac-details[open] > summary::before { content: '–'; }
.home-zodiac-details > summary:hover { background: #ffffff1a; }
.home-zodiac-details > .row { margin-top: 18px; }
.home-zodiac .zodiac-card { background: #ffffff1f !important; color: #fff; }
.home-zodiac .zodiac-card .card-title, .home-zodiac .zodiac-card .card-text { color: #fff; }
.home-zodiac .form-select, .home-zodiac .form-control { background-color: #fff; color: #2c3e50; }
.home-zodiac .form-floating > label { color: #52606d; }
.home-zodiac .zodiac-icon { width: 28px; height: 28px; margin-right: 6px; }
.home-zodiac .home-btn { min-height: 44px; padding: 8px 16px; font-size: .92rem; }
.home-zodiac .zodiac-card-header .hi { font-size: 1.6rem; }
.home-zodiac .zodiac-card-header .fa-sun { color: #ffd166; }
.home-zodiac .zodiac-card-header .fa-dragon { color: #ff8a80; }

/* Presenting video: reuse the stage, drop the warm template gradient. */
.tutorialeu-home #home-main .presenting-hero { display: block; padding: 64px 0; background: var(--home-surface-2); border-top: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); color: var(--home-ink); cursor: default; }
.tutorialeu-home .presenting-hero-stage { max-width: 1140px; cursor: pointer; }
.tutorialeu-home .presenting-hero .home-block-head { margin-bottom: 26px; }
.tutorialeu-home .presenting-hero-cta.home-yt-pill { background: #ffffffe8; color: #2c3e50; border: 1px solid #ffffff; border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px #00000040; }
.tutorialeu-home .presenting-hero-cta.home-yt-pill:hover, .tutorialeu-home .presenting-hero-cta.home-yt-pill:focus-visible { background: #fff; color: #1f2d3a; }
.tutorialeu-home .presenting-hero-cta.home-yt-pill .hi { color: #e53935; font-size: 1.2em; }
.tutorialeu-home .presenting-hero-chapter .hi { font-size: 1em; }
.tutorialeu-home .presenting-hero-chapter--alt .hi { color: inherit; }

/* Portfolio: buttons that open the video/app windows. */
.home-portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tutorialeu-home .portfolio .home-portfolio-item { all: unset; display: block; cursor: pointer; border-radius: 12px; overflow: hidden; border: 1px solid var(--home-line); background: var(--home-surface); box-sizing: border-box; width: 100%; margin: 0; position: relative; }
.tutorialeu-home .portfolio .home-portfolio-item:focus-visible { outline: 3px solid var(--home-accent); outline-offset: 3px; }
.tutorialeu-home .portfolio .home-portfolio-item img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; filter: none; transition: transform .4s ease; }
.tutorialeu-home .portfolio .home-portfolio-item:hover img { transform: scale(1.04); }
.tutorialeu-home .portfolio .home-portfolio-item span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: .88rem; font-weight: 650; color: var(--home-ink); }
.tutorialeu-home .portfolio .home-portfolio-item span::after { content: '▶'; font-size: .7rem; color: var(--home-accent-ink); }
.tutorialeu-home .portfolio .home-portfolio-item:hover span { color: var(--home-accent-ink); }

/* Contact keeps the shared form; just a calmer frame. */
.tutorialeu-home #contact .form-floating > .form-control { background: var(--home-surface); color: var(--home-ink); border-color: var(--home-line); }
.tutorialeu-home #contact .contact-actions { margin-top: 10px; }
.tutorialeu-home #contact .contact-actions .home-btn { min-width: 180px; }

/* ── Responsive ───────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .home-hero { padding-top: 40px; }
    .home-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-about-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .home-social { justify-content: flex-start; }
    .home-block-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .home-tools-layout { grid-template-columns: minmax(0, 1fr); }
    .home-tool-grid-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-zodiac-head { grid-template-columns: minmax(0, 1fr); }
    .home-zodiac-head .home-tool-links { text-align: left; }
    .home-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .home-hero { padding: 26px 0 30px; }
    .home-hero h1 { font-size: 2.15rem; }
    .home-intro { font-size: 1rem; }
    .home-actions a { flex: 1 1 auto; justify-content: center; }
    .home-launchpad { margin-top: 26px; padding-top: 18px; }
    .home-launchpad-heading { width: 100%; }
    .home-directory { padding: 40px 0; }
    .home-directory-heading { align-items: start; flex-direction: column; gap: 12px; }
    .home-categories { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .home-category, .home-card { padding: 18px; }
    .home-category > p { min-height: 0; }
    /* One category open at a time: the others fold to their title row (home-directory.js). */
    .home-category.is-folded > :is(p, ul, .home-more) { display: none; }
    .home-category.is-folded { padding-bottom: 14px; }
    .home-category.is-folded h3 { margin-bottom: 0; }
    .home-category.is-folded .home-category-top { margin-bottom: 8px; }
    .tutorialeu-home #home-main .home-block { padding: 44px 0; }
    .home-duo, .home-tool-grid, .home-card-links { grid-template-columns: minmax(0, 1fr); }
    .home-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .tutorialeu-home .portfolio .home-portfolio-item span { font-size: .78rem; padding: 8px 10px; }
    .home-subblock-head { flex-direction: column; align-items: start; gap: 8px; }
    .tutorialeu-home .game-apps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
    .tutorialeu-home .game-app-icon { width: 48px; height: 48px; font-size: 1.3rem; border-radius: 13px; }
    .tutorialeu-home .game-app-label { font-size: .74rem; }
    .tutorialeu-home .home-tiles-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tutorialeu-home .reduceri-intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tutorialeu-home .reduceri-intro-card-image { aspect-ratio: 16 / 9; }
    .home-tool { padding: 14px 16px; gap: 8px; }
    .home-tool .game-app-item .game-app-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .home-tool .game-app-item .game-app-label { font-size: .95rem; }
    .home-tool > p { font-size: .86rem; }
    .tutorialeu-home #home-main .presenting-hero { padding: 44px 0; }
    .tutorialeu-home #apps { display: none; }
}
@media (max-width: 360px) {
    .tutorialeu-home .game-apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---- Nav dropdown menus: scrollable with compact items ---- */
.tutorialeu-home .navbar-nav .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    min-width: 220px;
}
.tutorialeu-home .navbar-nav .dropdown-item {
    font-size: .88rem;
    padding: .4rem .9rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    line-height: 1.3;
}
.tutorialeu-home .navbar-nav .dropdown-item .hi {
    font-size: 1.05rem;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    opacity: .85;
}
.tutorialeu-home .navbar-nav .dropdown-item:hover .hi {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tutorialeu-home *, .tutorialeu-home *::before, .tutorialeu-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}