/* =========================================================
   GENIUS SQUAD — Design System v2 "Blueprint"
   Fonturi: Space Grotesk (titluri) + Inter (text)
   ========================================================= */

:root {
    /* Paleta de brand */
    --ink: #0b1b22;            /* petrol aproape negru */
    --ink-2: #10262f;
    --paper: #f2f6f6;
    --card: #ffffff;
    --teal: #0e8f85;
    --teal-deep: #00666b;
    --teal-bright: #2fd4c5;
    --orange: #f26522;
    --amber: #ffa94d;
    --text: #23343b;
    --muted: #5d7078;
    --line: rgba(11, 27, 34, 0.09);

    /* Aliasuri legacy (folosite de panoul de admin) */
    --primar-teal: var(--teal);
    --highlight-orange: var(--orange);

    --radius: 22px;
    --shadow-soft: 0 10px 30px rgba(11, 27, 34, 0.07);
    --shadow-lift: 0 24px 50px rgba(11, 27, 34, 0.14);
    --grad-teal: linear-gradient(120deg, var(--teal-deep) 0%, var(--teal) 55%, var(--teal-bright) 100%);
    --grad-orange: linear-gradient(120deg, #e4530f 0%, var(--orange) 55%, var(--amber) 100%);
}

/* ---------- Baza ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background-color: var(--paper);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -0.02em;
}
::selection { background: var(--orange); color: #fff; }
a { color: var(--teal); }
img { max-width: 100%; }

.text-teal { color: var(--teal) !important; }
.text-orange { color: var(--orange) !important; }

/* Cuvinte cu gradient în titluri */
.grad-text {
    background: var(--grad-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.grad-text-teal {
    background: linear-gradient(120deg, var(--teal-bright), #8ef0e4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Eyebrow — eticheta mică de deasupra titlurilor */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--teal);
}
.eyebrow::before {
    content: '';
    width: 26px; height: 2px;
    background: var(--grad-orange);
    border-radius: 2px;
}
.eyebrow.on-dark { color: var(--teal-bright); }

/* ---------- Header / Navigație ---------- */
.topbar {
    background: var(--ink);
    color: rgba(255,255,255,0.75);
    font-size: 0.8rem;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color .25s; }
.topbar a:hover { color: var(--amber); }
.topbar .bi { color: var(--teal-bright); }

.navbar-gs {
    background: rgba(11, 27, 34, 0.86) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding-top: 10px; padding-bottom: 10px;
}
.navbar-gs .navbar-brand img {
    max-height: 48px; width: auto;
    filter: brightness(0) invert(1);   /* logo alb pe fundal închis */
}
.navbar-gs .nav-link {
    color: rgba(255,255,255,0.72) !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    margin: 0 3px;
    padding: 8px 11px !important;
    border-radius: 999px;
    /* Fara rupere pe doua randuri. Meniul a crescut cu „Laborator 3D", iar
       „Solutii B2B" si „Cotatie 3D" se despicau in doua, ceea ce ingrosa bara si
       facea randul strambe. Marginile si spatiile interioare sunt stranse cat sa
       incapa toate pe un rand pe laptop; sub 1200 px scad si mai mult. */
    white-space: nowrap;
    transition: color .25s ease, background .25s ease;
}
.navbar-gs .nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.07); }
.navbar-gs .nav-link.active-link {
    color: #fff !important;
    background: rgba(47, 212, 197, 0.14);
    box-shadow: inset 0 0 0 1px rgba(47, 212, 197, 0.35);
}
/* Laboratorul 3D: turcoaz, ca sa se deosebeasca de portocaliul cotatiei.
   Sunt doua actiuni diferite — una cere pret, cealalta te lasa sa construiesti. */
.navbar-gs .nav-link-lab { color: var(--teal, #2FD4C5) !important; }
.navbar-gs .nav-link-lab:hover {
    color: #fff !important;
    background: rgba(47, 212, 197, 0.18);
    box-shadow: inset 0 0 0 1px rgba(47, 212, 197, 0.45);
}
.navbar-gs .nav-link-3d { color: var(--amber) !important; }
.navbar-gs .nav-link-3d:hover,
.navbar-gs .nav-link-3d.active-link {
    color: #fff !important;
    background: rgba(242, 101, 34, 0.18);
    box-shadow: inset 0 0 0 1px rgba(242, 101, 34, 0.45);
}
.navbar-gs .navbar-toggler { border-color: rgba(255,255,255,0.25); }
.navbar-gs .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Butoane ---------- */
.btn-gs-orange {
    background: var(--grad-orange);
    color: #fff !important;
    border: none;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(242, 101, 34, 0.35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.btn-gs-orange:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(242, 101, 34, 0.45); color: #fff; }

.btn-gs-teal {
    background: var(--grad-teal);
    color: #fff !important;
    border: none;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(14, 143, 133, 0.30);
    transition: transform .25s ease, box-shadow .25s ease;
}
.btn-gs-teal:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(14, 143, 133, 0.42); color: #fff; }

.btn-gs-ghost {
    background: transparent;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.35);
    font-weight: 700;
    border-radius: 999px;
    transition: all .25s ease;
}
.btn-gs-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.btn-gs-dark {
    background: var(--ink);
    color: #fff !important;
    border: none;
    font-weight: 700;
    border-radius: 999px;
    transition: all .25s ease;
}
.btn-gs-dark:hover { background: var(--ink-2); transform: translateY(-2px); box-shadow: var(--shadow-soft); }

.btn-gs-outline {
    background: transparent;
    color: var(--ink) !important;
    border: 1.5px solid rgba(11,27,34,0.25);
    font-weight: 700;
    border-radius: 999px;
    transition: all .25s ease;
}
.btn-gs-outline:hover { border-color: var(--ink); background: var(--ink); color: #fff !important; }

/* ---------- Carduri ---------- */
.gs-card {
    background: var(--card);
    color: var(--text);   /* text mereu închis pe cardul alb, chiar și în secțiuni dark */
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.gs-card.lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(14, 143, 133, 0.35);
}

/* Alias legacy pentru admin */
.card-custom {
    background: var(--card);
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.icon-chip {
    width: 62px; height: 62px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 18px;
    font-size: 1.7rem;
    background: rgba(14, 143, 133, 0.1);
    color: var(--teal);
    transition: transform .3s ease;
}
.gs-card:hover .icon-chip { transform: rotate(-6deg) scale(1.08); }
.icon-chip.orange { background: rgba(242, 101, 34, 0.1); color: var(--orange); }
.icon-chip.violet { background: rgba(102, 16, 242, 0.08); color: #6610f2; }
.icon-chip.mint   { background: rgba(32, 201, 151, 0.1); color: #17a689; }

/* ---------- Secțiuni întunecate cu grilă "blueprint" ---------- */
.section-dark {
    position: relative;
    background: var(--ink);
    color: #eef4f4;
    overflow: hidden;
}
.section-dark::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(47, 212, 197, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 212, 197, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 30%, transparent 100%);
    pointer-events: none;
}
.section-dark > .container { position: relative; z-index: 2; }

/* Orbe cu gradient animate */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    pointer-events: none;
    animation: orb-float 14s ease-in-out infinite alternate;
}
.orb-teal { background: radial-gradient(circle, rgba(47,212,197,0.55), transparent 65%); }
.orb-orange { background: radial-gradient(circle, rgba(242,101,34,0.5), transparent 65%); animation-delay: -6s; }
@keyframes orb-float {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(50px, -40px) scale(1.15); }
}

/* ---------- Hero homepage ---------- */
.hero-main { padding: 175px 0 120px; }
.hero-main h1 { font-size: clamp(2.5rem, 5.4vw, 4.3rem); font-weight: 700; line-height: 1.08; }
.hero-main .lead { color: rgba(238, 244, 244, 0.72); font-size: 1.18rem; }

.hero-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.85);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

/* Cardul "consolă" din hero */
.console-card {
    background: rgba(16, 38, 47, 0.75);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.45);
    overflow: hidden;
    font-family: 'Space Grotesk', monospace;
}
.console-card .console-head {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.console-card .dot { width: 11px; height: 11px; border-radius: 50%; }
.console-card .console-body { padding: 22px; }
.console-line { font-size: 0.86rem; color: rgba(255,255,255,0.55); margin-bottom: 10px; }
.console-line .ok { color: var(--teal-bright); }
.console-line .accent { color: var(--amber); }

/* Rânduri imprimantă în cardul live */
.printer-row {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.printer-row:last-child { border-bottom: none; }
.printer-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
}
.printer-meta {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

/* Punct pulsatoriu „LIVE" */
.live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #28c840;
    box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.6);
    animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.6); }
    70% { box-shadow: 0 0 0 7px rgba(40, 200, 64, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0); }
}

.progress-print {
    height: 9px;
    background: rgba(255,255,255,0.08);
    border-radius: 99px;
    overflow: hidden;
}
.progress-print span {
    display: block; height: 100%;
    width: 78%;
    border-radius: 99px;
    background: var(--grad-orange);
    animation: print-progress 4s ease-in-out infinite alternate;
}
@keyframes print-progress { from { width: 46%; } to { width: 88%; } }

.stat-mini {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 14px 16px;
    text-align: center;
}
.stat-mini b { display: block; font-size: 1.35rem; color: #fff; font-family: 'Space Grotesk', sans-serif; }
.stat-mini small { color: rgba(255,255,255,0.55); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Constelația ecosistemului (hero) ---------- */
.eco-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: rgba(16, 38, 47, 0.7);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    backdrop-filter: blur(10px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.45);
    overflow: hidden;
}
.eco-stage::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(47, 212, 197, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 212, 197, 0.06) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}
.eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.eco-lines line { stroke: rgba(47, 212, 197, 0.4); stroke-width: 0.5; stroke-dasharray: 2.5 2.5; }
.eco-hub {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 104px; height: 104px;
    border-radius: 50%;
    background: var(--grad-orange);
    color: #fff; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; line-height: 1.1;
    box-shadow: 0 12px 34px rgba(242, 101, 34, 0.55);
    animation: eco-pulse 3s ease-in-out infinite;
}
.eco-hub i { font-size: 1.5rem; margin-bottom: 3px; }
.eco-hub span { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.82rem; }
.eco-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 104px;
    padding: 12px 8px;
    border-radius: 16px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(6px);
    color: #fff; text-align: center; z-index: 2;
    animation: eco-float 4.5s ease-in-out infinite;
}
.eco-node i { display: block; font-size: 1.5rem; margin-bottom: 5px; color: var(--teal-bright); }
.eco-node b { font-size: 0.82rem; font-weight: 600; }
.eco-node.n1 { top: 18%; left: 50%; }
.eco-node.n2 { top: 78%; left: 22%; animation-delay: -1.5s; }
.eco-node.n3 { top: 78%; left: 78%; animation-delay: -3s; }
@keyframes eco-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-9px); }
}
@keyframes eco-pulse {
    0%, 100% { box-shadow: 0 12px 34px rgba(242, 101, 34, 0.5); }
    50%      { box-shadow: 0 12px 50px rgba(242, 101, 34, 0.85); }
}

/* ---------- Vitrina materialelor (laborator 3D) ---------- */
.mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mat-chip {
    display: flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    padding: 9px 11px;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.mat-chip:hover {
    background: rgba(47, 212, 197, 0.12);
    border-color: rgba(47, 212, 197, 0.4);
    transform: translateY(-2px);
}
.mat-chip .mc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mat-chip b { display: block; color: #fff; font-size: 0.85rem; font-family: 'Space Grotesk', sans-serif; line-height: 1.1; }
.mat-chip em { display: block; font-style: normal; color: rgba(255,255,255,0.5); font-size: 0.68rem; }

@media (prefers-reduced-motion: reduce) {
    .eco-node, .eco-hub { animation: none !important; }
}

/* ---------- Banda marquee ---------- */
.marquee {
    background: var(--grad-orange);
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    padding: 13px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.marquee-track { display: inline-block; animation: marquee-scroll 30s linear infinite; }
.marquee-track span { margin: 0 26px; opacity: 0.95; }
.marquee-track .sep { opacity: 0.5; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Antet pagini interioare (folosit și de admin) ---------- */
.page-header {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding: 150px 0 70px;
    overflow: hidden;
}
.page-header::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(47, 212, 197, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 212, 197, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 20%, transparent 95%);
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 20%, transparent 95%);
    pointer-events: none;
}
.page-header::after {
    content: '';
    position: absolute;
    right: -140px; top: -140px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,101,34,0.35), transparent 65%);
    filter: blur(60px);
    pointer-events: none;
}
.page-header .container { position: relative; z-index: 2; }
.page-header .lead { color: rgba(238,244,244,0.7); }

/* ---------- Formulare ---------- */
.form-control, .form-select {
    border-radius: 12px;
    border: 1.5px solid var(--line);
    padding: 0.65rem 0.95rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 0.22rem rgba(14, 143, 133, 0.13);
}
label.form-label, .gs-label {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: inline-block;
}

/* ---------- Pași numerotați (laborator 3D) ---------- */
.step-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    padding: 26px 28px;
    transition: all .3s ease;
}
.step-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(242, 101, 34, 0.55);
    transform: translateX(6px);
}
.step-num {
    position: absolute; top: 14px; right: 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.6rem; font-weight: 700;
    color: rgba(242, 101, 34, 0.22);
    line-height: 1;
}

/* ---------- Carduri materiale 3D ---------- */
.material-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--teal);
    border-radius: 18px;
    padding: 26px;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}
.material-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.mat-title { font-weight: 700; font-size: 1.35rem; }
.mat-price {
    display: inline-block;
    color: var(--orange); font-weight: 700; font-size: 0.85rem;
    background: rgba(242,101,34,0.08);
    padding: 3px 12px; border-radius: 99px;
    margin-bottom: 14px;
}

/* ---------- Calculator 3D ---------- */
#viewer-container {
    width: 100%; height: 550px;
    background:
        radial-gradient(circle at 50% 120%, rgba(47,212,197,0.12), transparent 60%),
        radial-gradient(circle, #1a2b33 0%, #0a141a 100%);
    border-radius: 20px;
    overflow: hidden; position: relative;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    cursor: grab;
    transition: box-shadow .3s ease;
}
#viewer-container:hover { box-shadow: 0 25px 60px rgba(14, 143, 133, 0.35); }
#viewer-container:active { cursor: grabbing; }
.overlay-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.4);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: 1.4rem;
    pointer-events: none; text-align: center;
}
.panel-calcul {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 38px;
    box-shadow: var(--shadow-soft);
}
.price-display {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem; font-weight: 700;
    color: var(--teal-deep); line-height: 1;
}
.step-badge {
    background: var(--grad-orange); color: white;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-weight: 700; margin-right: 10px;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(242,101,34,0.4);
}
.upload-zone {
    display: block;
    border: 2px dashed rgba(14, 143, 133, 0.4);
    border-radius: 16px;
    background: rgba(14, 143, 133, 0.04);
    padding: 26px 20px;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
    transition: all .25s ease;
}
.upload-zone:hover { border-color: var(--teal); background: rgba(14, 143, 133, 0.09); }

/* ---------- Portal / tab-uri ---------- */
.portal-pills {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px;
    box-shadow: var(--shadow-soft);
}
.portal-pills .nav-link {
    border-radius: 999px !important;
    font-weight: 700;
    color: var(--text);
    padding: 10px 22px;
}
.portal-pills .nav-link.active { background: var(--ink) !important; color: #fff !important; }

/* ---------- Footer ---------- */
.footer-gs {
    position: relative;
    background: var(--ink);
    color: rgba(238,244,244,0.75);
    overflow: hidden;
    margin-top: 90px;
}
.footer-gs::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(47, 212, 197, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 212, 197, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
.footer-gs .container { position: relative; z-index: 2; }
.footer-gs .footer-top-line { height: 3px; background: var(--grad-orange); }
.footer-gs h6 {
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.footer-gs a { color: rgba(238,244,244,0.65); text-decoration: none; transition: color .25s, padding-left .25s; }
.footer-gs a:hover { color: var(--amber); padding-left: 4px; }
.footer-gs .social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff; font-size: 1.1rem;
    transition: all .25s ease;
}
.footer-gs .social-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; padding-left: 0; transform: translateY(-3px); }

/* ---------- Tabele ---------- */
.table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* ---------- Diverse ---------- */
.badge-soft-teal { background: rgba(14,143,133,0.1); color: var(--teal); font-weight: 700; }
.badge-soft-orange { background: rgba(242,101,34,0.1); color: var(--orange); font-weight: 700; }

/* ===== Showcase aplicație — ramă de browser + miniaturi ===== */
.browser-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 24px 50px rgba(11, 27, 34, 0.16);
    background: #fff;
}
.browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    background: linear-gradient(180deg, #2a3b42, #22323a);
    border-bottom: 1px solid rgba(0,0,0,0.15);
}
.browser-bar .b-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.browser-url {
    margin-left: 12px;
    flex: 1;
    max-width: 340px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
    padding: 4px 14px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browser-viewport {
    position: relative;
    aspect-ratio: 15 / 8;
    background: #e9eef0;
    overflow: hidden;
}
.browser-viewport img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* captura se vede INTEGRAL, fără tăiere */
    object-position: center;
    display: block;
    cursor: zoom-in;
    transition: opacity .25s ease;
}
/* Bara de progres a slideshow-ului (ca o bară de încărcare a browserului) */
.stage-progress {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: rgba(11, 27, 34, 0.08);
    z-index: 3;
    pointer-events: none;
}
.stage-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--grad-orange);
    animation: stage-fill 5s linear forwards;
}
/* Pauză la hover, când e deschis lightbox-ul sau fila e ascunsă */
.app-showcase:hover .stage-progress span,
.app-showcase.is-paused .stage-progress span { animation-play-state: paused; }

@keyframes stage-fill { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
    .stage-progress { display: none; }
    .stage-progress span { animation: none !important; }
}

.stage-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(11, 27, 34, 0.62);
    color: #fff;
    font-size: 1.45rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 1;                       /* mereu vizibile — se vede clar că poți naviga */
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: background .25s ease, transform .25s ease;
    backdrop-filter: blur(6px);
    z-index: 4;
}
.stage-nav:hover { background: var(--orange); transform: translateY(-50%) scale(1.08); }
.stage-nav.prev { left: 16px; }
.stage-nav.next { right: 16px; }
.stage-expand {
    position: absolute;
    top: 14px; right: 14px;
    width: 40px; height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(11, 27, 34, 0.55);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all .25s ease;
    backdrop-filter: blur(6px);
}
.browser-viewport:hover .stage-expand { opacity: 1; }
.stage-expand:hover { background: var(--teal); }

.stage-meta {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.stage-counter {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    background: var(--ink);
    padding: 3px 12px;
    border-radius: 999px;
    flex: none;
}
.stage-caption {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

/* Bulinuțe de navigare (slideshow clasic) */
.showcase-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    flex-wrap: wrap;
    width: 100%;
}
.showcase-dots .dot {
    flex: 0 0 auto;          /* nu se strâng niciodată, indiferent de context */
    width: 10px; height: 10px;
    min-width: 10px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(11, 27, 34, 0.22);
    cursor: pointer;
    transition: all .3s ease;
}
.showcase-dots .dot:hover { background: rgba(11, 27, 34, 0.45); }
.showcase-dots .dot.active {
    width: 28px;
    min-width: 28px;
    background: var(--orange);
}

@media (max-width: 575.98px) {
    .browser-viewport { aspect-ratio: 3 / 2; }
    .stage-nav { width: 38px; height: 38px; font-size: 1.2rem; }
    .stage-nav.prev { left: 8px; }
    .stage-nav.next { right: 8px; }
}

/* Showcase-ul suprapus peste hero-ul paginii de produs */
.showcase-float {
    margin-top: -96px;
    position: relative;
    z-index: 10;
}
@media (max-width: 991.98px) { .showcase-float { margin-top: -70px; } }

/* ===== Conținut formatat al prezentării de produs ===== */
.continut-produs { color: var(--muted); font-size: 1.03rem; line-height: 1.8; }
.continut-produs > *:first-child { margin-top: 0 !important; }

.continut-produs p { margin-bottom: 1.15rem; }
.continut-produs strong, .continut-produs b { color: var(--text); font-weight: 700; }
.continut-produs a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.continut-produs a:hover { color: var(--orange); }

/* ---- Etichete generice produse de editorul vizual (h2/h3/ul/blockquote/table) ---- */
.continut-produs h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink);
    line-height: 1.3;
    margin: 2.6rem 0 1.1rem;
    padding-top: 1.6rem;
    padding-left: 16px;
    border-top: 1px solid var(--line);
    position: relative;
}
.continut-produs h2::before {
    content: '';
    position: absolute;
    left: 0; top: 1.65rem;
    width: 5px; height: 1.4em;
    border-radius: 3px;
    background: var(--grad-orange);
}
.continut-produs > h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.continut-produs > h2:first-child::before { top: 0.1em; }
.continut-produs h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text);
    margin: 1.8rem 0 .85rem;
}
.continut-produs h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    margin: 1.5rem 0 .7rem;
}
.continut-produs ul { list-style: none; padding-left: 0; margin: 0 0 1.3rem; }
.continut-produs ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: .6rem;
}
.continut-produs ul li::before {
    content: '\F26E';
    font-family: 'bootstrap-icons';
    position: absolute; left: 0; top: 1px;
    color: var(--teal);
    font-size: 1rem;
}
.continut-produs ol { padding-left: 1.3rem; margin: 0 0 1.3rem; }
.continut-produs ol li { margin-bottom: .5rem; padding-left: 6px; }
.continut-produs ol li::marker { color: var(--teal); font-weight: 700; }
.continut-produs blockquote {
    display: flex;
    gap: 14px;
    background: rgba(242, 101, 34, 0.06);
    border-left: 4px solid var(--orange);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 1.4rem 0;
    color: var(--text);
    font-style: normal;
}
.continut-produs blockquote::before {
    content: '\F431';
    font-family: 'bootstrap-icons';
    color: var(--orange);
    font-size: 1.2rem;
    flex: none;
}
.continut-produs blockquote p:last-child { margin-bottom: 0; }
.continut-produs .tabel-produs-wrap { overflow-x: auto; margin: 1.4rem 0; }
.continut-produs table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    font-size: .95rem;
}
.continut-produs table th {
    background: var(--ink);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
}
.continut-produs table td {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    color: var(--text);
    vertical-align: top;
}
.continut-produs table tbody tr:nth-child(even) { background: rgba(14, 143, 133, 0.035); }

/* Titlu de secțiune, cu insignă numerotată */
.continut-produs .sectiune-titlu {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink);
    margin: 2.6rem 0 1.1rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: 1.3;
}
.continut-produs > .sectiune-titlu:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.continut-produs .sectiune-nr {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--grad-teal);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 6px 14px rgba(14, 143, 133, 0.28);
}
.continut-produs .sectiune-sub {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.13rem;
    color: var(--text);
    margin: 1.7rem 0 .8rem;
}

/* Liste */
.continut-produs .lista-produs {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.3rem;
}
.continut-produs .lista-produs li {
    position: relative;
    padding-left: 30px;
    margin-bottom: .6rem;
}
.continut-produs .lista-produs li::before {
    content: '\F26E';                 /* bifă Bootstrap Icons */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0; top: 1px;
    color: var(--teal);
    font-size: 1rem;
}
.continut-produs .lista-produs.numerotata { counter-reset: li-nr; }
.continut-produs .lista-produs.numerotata li::before {
    counter-increment: li-nr;
    content: counter(li-nr);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .8rem;
    width: 21px; height: 21px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(14, 143, 133, 0.12);
    color: var(--teal);
    top: 3px;
}

/* Casetă evidențiată */
.continut-produs .caseta-produs {
    display: flex;
    gap: 14px;
    background: rgba(242, 101, 34, 0.06);
    border-left: 4px solid var(--orange);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 1.4rem 0;
    color: var(--text);
}
.continut-produs .caseta-produs i { color: var(--orange); font-size: 1.2rem; flex: none; margin-top: 2px; }

/* Tabel */
.continut-produs .tabel-produs-wrap { overflow-x: auto; margin: 1.4rem 0; }
.continut-produs .tabel-produs {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    font-size: .95rem;
}
.continut-produs .tabel-produs th {
    background: var(--ink);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    white-space: nowrap;
}
.continut-produs .tabel-produs td {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    color: var(--text);
}
.continut-produs .tabel-produs tbody tr:nth-child(even) { background: rgba(14, 143, 133, 0.035); }

@media (max-width: 575.98px) {
    .continut-produs .sectiune-titlu { font-size: 1.28rem; gap: 10px; }
    .continut-produs .sectiune-nr { width: 32px; height: 32px; font-size: .95rem; }
}

/* ===== Magazin online ===== */
.cos-link { color: rgba(255,255,255,0.72) !important; }
.cos-link:hover { color: #fff !important; }
.cos-badge {
    position: absolute; top: 0; right: -2px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--orange); color: #fff;
    font-size: 0.7rem; font-weight: 700;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.shop-cover {
    display: block; position: relative;
    aspect-ratio: 1 / 1;
    background: #eef2f2;
    overflow: hidden;
}
.shop-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gs-card.lift:hover .shop-cover img { transform: scale(1.06); }
.shop-cover-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: #fff;
    background: var(--grad-teal);
}
.shop-cat-badge {
    position: absolute; top: 12px; left: 12px;
    background: rgba(11,27,34,0.7); color: #fff;
    font-size: 0.72rem; font-weight: 600;
    padding: 4px 12px; border-radius: 999px;
    backdrop-filter: blur(4px);
}
.shop-detail-img { overflow: hidden; padding: 0; }
.shop-detail-img img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.cos-thumb {
    width: 68px; height: 68px; border-radius: 12px; overflow: hidden;
    display: block; background: #eef2f2;
}
.cos-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cos-thumb .shop-cover-fallback { font-size: 1.4rem; }
.cos-thumb-mini {
    width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #eef2f2; color: var(--teal); font-size: 1.1rem;
}
.cos-thumb-mini img { width: 100%; height: 100%; object-fit: cover; }
.cos-rand + .cos-rand { border-top: 1px solid var(--line); }
.flex-none { flex: none; }

/* ===== Carduri aplicații (listare produse) — cu iconițe ===== */
.app-card-link { display: block; height: 100%; text-decoration: none; color: inherit; }
.app-card-link:hover { color: inherit; }
.app-card-link:hover .icon-chip { transform: rotate(-6deg) scale(1.08); }
.app-card-cta {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--teal);
    white-space: nowrap;
    transition: gap .2s ease;
}
.app-card-link:hover .app-card-cta { color: var(--orange); }
.app-card-link:hover .app-card-cta i { margin-left: 8px !important; }

.cta-band {
    background: var(--grad-teal);
    border-radius: 26px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 102, 107, 0.35);
}
.cta-band::after {
    content: '\F5B2';
    font-family: 'bootstrap-icons';
    position: absolute; right: -4%; bottom: -30%;
    font-size: 20rem; opacity: 0.08;
    transform: rotate(-12deg);
    pointer-events: none;
}

.sidebar-info .list-group-item {
    border: none; padding: 12px 18px; margin-bottom: 4px; border-radius: 12px;
    color: var(--text); font-weight: 600; transition: all .25s ease;
    background: transparent;
}
.sidebar-info .list-group-item:hover { background: rgba(14,143,133,0.07); color: var(--teal); transform: translateX(4px); }
.sidebar-info .list-group-item.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.content-info h3 { color: var(--teal-deep); font-weight: 700; margin-top: 28px; margin-bottom: 14px; }
.content-info h5 { font-weight: 700; margin-top: 20px; }
.content-info p, .content-info li { color: var(--muted); line-height: 1.75; }

.accordion-item { border-radius: 14px !important; overflow: hidden; border: 1px solid var(--line) !important; }
.accordion-button { font-weight: 700; }
.accordion-button:not(.collapsed) { background: rgba(14,143,133,0.07); color: var(--teal-deep); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(14,143,133,0.15); }

/* Spinner rotativ pt iconițe */
.spin { display: inline-block; animation: gs-spin 1.4s linear infinite; }
@keyframes gs-spin { to { transform: rotate(360deg); } }

/* Respectăm preferința pentru mișcare redusă */
@media (prefers-reduced-motion: reduce) {
    .marquee-track, .orb, .progress-print span { animation: none !important; }
    html { scroll-behavior: auto; }
}

@media (max-width: 991.98px) {
    .hero-main { padding: 130px 0 80px; }
    .page-header { padding: 120px 0 55px; }
    .navbar-gs .navbar-collapse {
        background: var(--ink-2);
        border-radius: 16px;
        padding: 14px;
        margin-top: 12px;
        border: 1px solid rgba(255,255,255,0.08);
    }
}

/* ===========================================================================
   Cardul laboratorului 3D, sub diagrama din erou
   ---------------------------------------------------------------------------
   Turcoaz, nu portocaliu: portocaliul e al cotației, care cere un preț.
   Ăsta invită la construit, e alt fel de faptă.
   =========================================================================== */
.lab-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 14px; text-decoration: none;
    background: linear-gradient(135deg, rgba(47,212,197,.10), rgba(47,212,197,.04));
    border: 1px solid rgba(47,212,197,.28);
    transition: border-color .18s, transform .18s, background .18s;
}
.lab-card:hover {
    border-color: rgba(47,212,197,.6); transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(47,212,197,.16), rgba(47,212,197,.06));
}
.lab-card-ico {
    flex: none; width: 42px; height: 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(47,212,197,.16); color: #2FD4C5; font-size: 1.25rem;
}
.lab-card-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lab-card-txt b { color: #EEF4F4; font-size: .98rem; font-weight: 600; }
.lab-card-txt span { color: rgba(238,244,244,.62); font-size: .84rem; line-height: 1.45; }
.lab-badge {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #04181A; background: #2FD4C5; vertical-align: middle;
}
.lab-card-sageata { margin-left: auto; color: #2FD4C5; font-size: 1.1rem; flex: none; }


/* --- meniul incape pe un singur rand -------------------------------------- */
/* Elementele de meniu nu se rup niciodata in doua randuri. */
.navbar-gs .navbar-nav .nav-item,
.navbar-gs .navbar-nav .nav-link { white-space: nowrap; }

/* Pe ecrane mai inguste, unde bara e tot pe orizontala (992-1300 px), scadem
   spatiile inainte sa apara ruperea, nu dupa. */
@media (min-width: 992px) and (max-width: 1300px) {
    .navbar-gs .nav-link {
        font-size: 0.85rem;
        margin: 0 1px;
        padding: 7px 8px !important;
        letter-spacing: 0.01em;
    }
    .navbar-gs .navbar-brand img { max-height: 44px; }
}
@media (min-width: 992px) and (max-width: 1120px) {
    /* La limita, pictogramele spun destul si fara eticheta langa ele. */
    .navbar-gs .nav-link { font-size: 0.8rem; padding: 7px 6px !important; }
}