/* ==========================================================================
   «Αναδόμηση 3D Noetic» (r95 2026-10-12 · r96 2026-10-13)
   Φορτώνεται ΜΟΝΟ στο page-templates/template-3d-rebuild.php, ΜΑΖΙ με το ai-scan.css (κοινά στυλ as-*).
   Εδώ μόνο ό,τι είναι ειδικό της σελίδας. Σέβεται το prefers-reduced-motion.
   ========================================================================== */

.b4d-page { --b4d-soil: #7b5a3a; --b4d-lime: #c8b28a; --b4d-terra: #c2410c; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.b4d-hero { padding-top: 5.5rem; }
.b4d-hero__glow {
	background:
		radial-gradient(ellipse 900px 520px at 72% 38%, rgba(194,65,12,.20), transparent 65%),
		radial-gradient(ellipse 700px 380px at 15% 80%, rgba(59,130,246,.12), transparent 60%),
		radial-gradient(ellipse 600px 300px at 50% 0%, rgba(20,184,166,.10), transparent 70%),
		linear-gradient(180deg, transparent 60%, var(--bg) 100%);
}
.b4d-hero__inner { grid-template-columns: 1.05fr .95fr; }
.b4d-kicker { border-color: rgba(250,204,21,.45); background: rgba(250,204,21,.07); color: #fcd34d; }
.b4d-dot { background: #f97316; box-shadow: 0 0 12px rgba(249,115,22,.9); }
.b4d-hero__title { background-image: linear-gradient(120deg, #f8fafc 0%, #fcd34d 35%, #fb923c 60%, #5eead4 85%, #a5b4fc 100%); }

.b4d-stage { margin: 0; display: flex; flex-direction: column; align-items: center; }
.b4d-stage__frame { position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden;
	background: #020617; border: 1px solid rgba(250,204,21,.28);
	box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 70px rgba(194,65,12,.18); }
.b4d-stage__frame > img, .b4d-stage__frame > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.b4d-stage__live { position: absolute; inset: 0; }
.b4d-stage__live > svg { width: 100%; height: 100%; display: block; border-radius: 0; }
.b4d-stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.b4d-stage__live.is-live > svg { visibility: hidden; }
.b4d-stage__live.is-live > .b4d-stage__canvas { opacity: 1; }
.b4d-stage__cap { max-width: 520px; }

.b4d-legend { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .9rem; }
.b4d-legend__item { display: inline-flex; align-items: center; gap: .4rem; font: 700 .7rem var(--font-mono); letter-spacing: 1.2px; color: rgb(var(--tone)); }
.b4d-legend__item i { width: 12px; height: 12px; border-radius: 3px; background: rgba(var(--tone), .25); border: 1.5px solid rgb(var(--tone)); }
.b4d-legend__item.b4d-tone--warm i, .b4d-legend__item.b4d-tone--grey i { border-style: dashed; }

.b4d-tone--red { --tone: 239,68,68; } .b4d-tone--cyan { --tone: 34,211,238; } .b4d-tone--warm { --tone: 250,204,21; } .b4d-tone--grey { --tone: 148,163,184; }

/* ── SVG γραφικά ────────────────────────────────────────────────────────── */
.b4d-viz { border-radius: 14px; }
.b4d-void { animation: asBreath 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.b4d-metal { animation: asRing 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.b4d-arch { animation: asDash 1.6s linear infinite; }
.b4d-slice--move { animation: b4dSlice 6s ease-in-out infinite; }
.b4d-vplane { animation: b4dSweep 6s ease-in-out infinite; }
.b4d-orbit { animation: asDash 1.4s linear infinite; }

/* ── Επίπεδα ────────────────────────────────────────────────────────────── */
.b4d-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; counter-reset: tier; }
.b4d-tier { position: relative; padding: 1.4rem 1.25rem 1.3rem; border-radius: 20px; border: 1px solid rgba(var(--tone), .35);
	background: linear-gradient(180deg, rgba(var(--tone), .09), rgba(15,23,42,.62)); transition: transform .3s var(--ease); }
.b4d-tier:hover { transform: translateY(-4px); }
.b4d-tier::after { counter-increment: tier; content: counter(tier); position: absolute; top: 1rem; right: 1.1rem; font: 800 2rem var(--font-mono); color: rgba(var(--tone), .18); }
.b4d-tier__icon { font-size: 1.5rem; }
.b4d-tier__tag { display: inline-block; margin: .7rem 0 .55rem; padding: .25rem .65rem; border-radius: 8px; font: 800 .8rem var(--font-mono); letter-spacing: 1.6px;
	color: rgb(var(--tone)); background: rgba(var(--tone), .12); border: 1px solid rgba(var(--tone), .55); }
.b4d-tone--warm .b4d-tier__tag, .b4d-tone--grey .b4d-tier__tag { border-style: dashed; }
.b4d-tier p { margin: 0; color: #cbd5e1; font-size: .88rem; line-height: 1.6; }

/* ── Στιγμιότυπα (οριζόντια πλαίσια 16:10) ─────────────────────────────── */
.b4d-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem 1.6rem; }
.b4d-shot { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; perspective: 1000px; }
.b4d-shot__frame { max-width: none; aspect-ratio: 16 / 10; border-radius: 18px; border-width: 1px !important; border-color: rgba(148,163,184,.22) !important; }
.b4d-shot__frame > img, .b4d-shot__frame > video { object-position: center; }

/* ── Αποστολή .glb ──────────────────────────────────────────────────────── */
.b4d-export { background: radial-gradient(900px 480px at 80% 50%, rgba(34,211,238,.09), transparent 60%), var(--bg); }
.b4d-glb { display: grid; gap: 1.1rem; padding: 1.5rem; border-radius: 22px; border: 1px solid rgba(34,211,238,.3); background: rgba(15,23,42,.6);
	box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 50px rgba(34,211,238,.10); }
.b4d-glb__file { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: 1rem; border-radius: 16px;
	background: rgba(20,184,166,.08); border: 1px dashed rgba(20,184,166,.5); }
.b4d-glb__ext { grid-row: span 2; display: inline-flex; width: 62px; height: 62px; align-items: center; justify-content: center; border-radius: 14px;
	background: rgba(20,184,166,.16); border: 1px solid rgba(20,184,166,.55); color: #5eead4; font: 800 .9rem var(--font-mono); letter-spacing: 1px; }
.b4d-glb__name { color: var(--text); font: 700 .9rem var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4d-glb__meta { color: var(--text-muted); font: .75rem var(--font-mono); }
.b4d-glb__group strong { display: block; margin-bottom: .55rem; color: var(--text); font-size: .95rem; }
.b4d-chips { margin: 0; justify-content: flex-start; }
.b4d-chips--apps li { border-color: rgba(250,204,21,.4); background: rgba(250,204,21,.06); color: #fde68a; }
.b4d-glb__note { margin: 0; color: var(--text-muted); font-size: .84rem; line-height: 1.55; }

/* ── Χρέωση / απόρρητο / CTA ───────────────────────────────────────────── */
.b4d-link { color: #5eead4; text-decoration: none; font-weight: 700; }
.b4d-link:hover { text-decoration: underline; }
.b4d-privacy { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.05); }
.b4d-privacy strong { color: #67e8f9; }
.b4d-cta { border-color: rgba(250,204,21,.3); background: radial-gradient(700px 300px at 50% 0%, rgba(194,65,12,.18), transparent 70%), rgba(15,23,42,.6); }
.b4d-tm { margin: 1.4rem auto 0; max-width: 820px; text-align: center; color: #64748b; font-size: .76rem; line-height: 1.55; }

@keyframes b4dSlice { 0%,100% { transform: translateY(-30px); } 50% { transform: translateY(26px); } }
@keyframes b4dSweep { 0%,100% { transform: translateX(-26px) translateY(-15px); } 50% { transform: translateX(22px) translateY(13px); } }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.b4d-hero__inner { grid-template-columns: 1fr; }
	.b4d-tiers { grid-template-columns: repeat(2, 1fr); }
	.b4d-shots { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.b4d-tiers, .b4d-shots { grid-template-columns: 1fr; }
	.b4d-glb { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.b4d-stage__canvas { display: none; }
	.b4d-stage__live.is-live > svg { visibility: visible; }
}