/*
 * Blocurile cu mesaje de pe prima pagina (home-blocks/).
 * Culori: doar albastrul Synaptic #0068a5 si nuantele lui spre deschis.
 * Toate clasele au prefixul hb- (nu se amesteca cu restul site-ului).
 */
.hb {
    --hb-s1: #0068a5;
    --hb-s2: #1f86c4;
    --hb-s3: #4ba3d9;
    --hb-s4: #86c2e8;
    --hb-s5: #b9dbf1;
    --hb-s6: #dcedf8;
    --hb-s7: #f0f7fc;
    --hb-text: #3d4656;
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
}
.hb *, .hb *::before, .hb *::after { box-sizing: border-box; }
.hb p, .hb h2, .hb h3 { margin: 0; }
.hb strong { font-weight: 700; }

.hb-sec { padding: clamp(56px, 8vw, 84px) 20px; background: #fff; }
.hb-in { max-width: 980px; margin: 0 auto; }

.hb-grad,
.hb-grad2 {
    background: linear-gradient(95deg, var(--hb-s1) 0%, var(--hb-s3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hb-grad2 { background-image: linear-gradient(95deg, var(--hb-s2) 0%, var(--hb-s4) 100%); }

/* ---------- 1. Manifest ---------- */
.hb-line {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 6px 24px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
}
.hb-big { min-width: 0; font-size: clamp(40px, 8vw, 92px); }
.hb-cap { flex: 0 0 auto; }
.hb-c1 { color: var(--hb-s1); }
.hb-l2 { justify-content: flex-end; text-align: right; }
.hb-l3 { justify-content: center; flex-wrap: wrap; gap: 0 clamp(12px, 2vw, 24px); }
.hb-outline { color: transparent; -webkit-text-stroke: 2.5px var(--hb-s2); }
.hb-cap {
    align-self: center;
    max-width: 230px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    color: var(--hb-text);
}
.hb-cap strong { color: var(--hb-s1); }
.hb-cap-r { text-align: right; }
.hb-note {
    margin-top: 34px !important;
    text-align: center;
    font-size: 19px;
    line-height: 1.5;
    color: var(--hb-text);
}
.hb-note strong { color: #14212f; background: linear-gradient(transparent 60%, var(--hb-s6) 60%); }

/* ---------- 2. Casete ---------- */
.hb-bento-sec { background: var(--hb-s7); }
.hb-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 118px;
    gap: 14px;
}
.hb-t { position: relative; overflow: hidden; border-radius: 22px; padding: 22px 24px; }
.hb-k { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.95; }
.hb-num, .hb-mid { font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; }
.hb-t p { font-size: 16px; line-height: 1.45; }

.hb-t1 { grid-column: span 3; grid-row: span 2; color: #fff;
    background: linear-gradient(135deg, var(--hb-s1) 0%, var(--hb-s2) 55%, var(--hb-s3) 100%); }
.hb-t1 .hb-num { margin-top: 12px; font-size: clamp(96px, 13vw, 156px); }
.hb-t1 .hb-num span { margin-left: 10px; font-size: 0.36em; letter-spacing: -0.02em; color: var(--hb-s6); }
.hb-t1 p { position: absolute; left: 24px; right: 24px; bottom: 22px; font-size: 17px; color: rgba(255,255,255,.92); }

.hb-t2 { grid-column: span 3; display: flex; align-items: center; gap: 22px; color: #fff;
    background: linear-gradient(120deg, var(--hb-s2), var(--hb-s3)); }
.hb-t2 .hb-mid { font-size: 46px; }
.hb-t2 p { color: rgba(255,255,255,.95); }

.hb-t3 { grid-column: span 2; color: var(--hb-s1); border: 1px solid var(--hb-s5);
    background: linear-gradient(140deg, #fff, var(--hb-s6)); }
.hb-t3 .hb-mid { margin-top: 6px; font-size: 58px; }

.hb-t4 { grid-column: span 1; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
    background: linear-gradient(160deg, var(--hb-s3), var(--hb-s4)); }

.hb-t5 { grid-column: span 3; display: flex; align-items: center; background: #fff; border: 1px solid var(--hb-s5); }
.hb-t5 .hb-mid { font-size: 32px; letter-spacing: -0.035em; line-height: 1.1; color: var(--hb-s1); }
.hb-t5 em { font-style: normal; color: var(--hb-s3); }

.hb-t6 { grid-column: span 3; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    color: var(--hb-s1); background: linear-gradient(110deg, var(--hb-s5), var(--hb-s6)); }
.hb-t6 .hb-mid { font-size: 32px; letter-spacing: -0.035em; white-space: nowrap; }
.hb-t6 p { max-width: 230px; text-align: right; color: #14212f; }

/* ---------- 3. Cere fisiere ---------- */
.hb-req-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.hb-req-head h2 { font-size: clamp(34px, 4.6vw, 44px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--hb-s1); }
.hb-req-head p { max-width: 360px; font-size: 18px; line-height: 1.5; color: var(--hb-text); }
.hb-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 24px;
    font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.hb-cloud span:nth-child(8n+1) { font-size: clamp(44px, 6.5vw, 78px); color: var(--hb-s1); }
.hb-cloud span:nth-child(8n+2) { font-size: clamp(28px, 3.7vw, 44px); color: var(--hb-s2); }
.hb-cloud span:nth-child(8n+3) { font-size: clamp(36px, 5.2vw, 62px); color: var(--hb-s2); }
.hb-cloud span:nth-child(8n+4) { font-size: clamp(26px, 3vw, 36px); color: var(--hb-s3); }
.hb-cloud span:nth-child(8n+5) { font-size: clamp(40px, 5.8vw, 70px);
    background: linear-gradient(95deg, var(--hb-s2), var(--hb-s4)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hb-cloud span:nth-child(8n+6) { font-size: clamp(26px, 3.3vw, 40px); color: var(--hb-s1); }
.hb-cloud span:nth-child(8n+7) { font-size: clamp(32px, 4.5vw, 54px); color: var(--hb-s3); }
.hb-cloud span:nth-child(8n)   { font-size: clamp(26px, 3.3vw, 40px); color: var(--hb-s1); }

/* ---------- 4. Benzi ---------- */
.hb-strips { padding-left: 0; padding-right: 0; }
.hb-strip { width: 130%; margin-left: -15%; padding: 16px 0; overflow: hidden; white-space: nowrap; font-weight: 800; }
.hb-track { display: inline-block; animation: hb-scroll 60s linear infinite; }
.hb-track span { margin: 0 26px; }
.hb-s1 { transform: rotate(-2.5deg); color: #fff; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.02em;
    background: linear-gradient(90deg, var(--hb-s1), var(--hb-s2), var(--hb-s3)); }
.hb-s1 .hb-soft { color: var(--hb-s6); }
.hb-s2 { transform: rotate(1.8deg); margin-top: 6px; color: var(--hb-s1); font-size: clamp(16px, 1.9vw, 22px);
    letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(90deg, var(--hb-s6), var(--hb-s5)); }
.hb-s2 i { font-style: normal; color: var(--hb-s3); }
.hb-s2 .hb-track { animation-direction: reverse; animation-duration: 70s; }
@keyframes hb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hb-track { animation: none; } }

/* ---------- 5. Pasi + garantie ---------- */
.hb-steps-sec { background: linear-gradient(180deg, #fff 0%, var(--hb-s7) 100%); }
.hb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.hb-stepnum { font-size: 120px; font-weight: 800; letter-spacing: -0.06em; line-height: 0.8; color: transparent;
    -webkit-text-stroke: 2px var(--hb-s1); }
.hb-step h3 { margin-top: 14px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--hb-s1); }
.hb-step p { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--hb-text); }
.hb-step2 .hb-stepnum { -webkit-text-stroke-color: var(--hb-s2); }
.hb-step2 h3 { color: var(--hb-s2); }
.hb-step3 .hb-stepnum { -webkit-text-stroke-color: var(--hb-s3); }
.hb-step3 h3 { color: var(--hb-s3); }

.hb-guar { display: flex; align-items: center; gap: 34px; margin-top: 56px; padding: 30px 40px; border-radius: 24px; color: #fff;
    background: linear-gradient(110deg, var(--hb-s1) 0%, var(--hb-s2) 45%, var(--hb-s4) 100%); }
.hb-guar-num { font-size: 96px; font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; white-space: nowrap; }
.hb-guar-num small { margin-left: 6px; font-size: 34px; letter-spacing: -0.02em; }
.hb-guar-tx { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.hb-guar-tx span { display: block; margin-top: 6px; font-size: 17px; font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,.95); }
.hb-guar-btn { margin-left: auto; padding: 13px 22px; border-radius: 10px; background: #fff; color: var(--hb-s1);
    font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hb-guar-btn:hover { background: var(--hb-s7); }

/* ---------- Ecrane mici ---------- */
@media (max-width: 860px) {
    .hb-line { flex-wrap: wrap; }
    .hb-l2 { justify-content: flex-start; text-align: left; }
    .hb-l3 { justify-content: flex-start; }
    .hb-cap, .hb-cap-r { max-width: none; text-align: left; font-size: 16px; }
    .hb-l2 .hb-cap { order: 2; }
    .hb-note { text-align: left; font-size: 17px; }

    .hb-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .hb-t { min-height: 112px; }
    .hb-t1, .hb-t2, .hb-t5, .hb-t6 { grid-column: span 2; }
    .hb-t3, .hb-t4 { grid-column: span 1; }
    .hb-t1 { grid-row: auto; }
    .hb-t1 p { position: static; margin-top: 14px; }
    .hb-t2, .hb-t6 { flex-direction: column; align-items: flex-start; gap: 8px; }
    .hb-t6 p { text-align: left; max-width: none; }
    .hb-t6 .hb-mid { white-space: normal; }

    .hb-req-head { flex-direction: column; align-items: flex-start; }
    .hb-cloud { justify-content: flex-start; }

    .hb-steps { grid-template-columns: 1fr; gap: 26px; }
    .hb-stepnum { font-size: 84px; }
    .hb-guar { flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px; }
    .hb-guar-num { font-size: 72px; }
    .hb-guar-btn { margin-left: 0; }
}