/*
 * Landing page /credite-online - DOAR regulile specifice paginii.
 * Partea comuna (tokens, nav, hero, rame, carduri, FAQ, formular, footer...) e in
 * landing.css, incarcat inaintea acestui fisier.
 */
/* ---------- brand: bara de adresa care tasteaza ---------- */
.co-browser-demo { position: relative; padding-bottom: 20px; }
.co-type { color: var(--text); }
.co-caret { display: inline-block; width: 2px; height: 14px; background: var(--blue); margin-left: 2px; vertical-align: -2px; animation: co-blink 1s steps(1) infinite; }
@keyframes co-blink { 50% { opacity: 0; } }
.co-badge-chip--brand { right: 12px; bottom: 0; }
/* ---------- flux ---------- */
.co-flow { background: #fff; }
.co-step { display: grid; gap: 28px; align-items: center; padding: 40px 0; border-top: 1px solid var(--line); }
.co-step__media { display: flex; justify-content: center; position: relative; padding: 24px 0; }
.co-step__media::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .14), transparent 65%); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.co-step__media .device--phone { width: 230px; }
.co-step__media--duo { min-height: 470px; }
.co-step__media--duo .device--back { position: absolute; width: 180px; left: calc(50% - 150px); top: 28px; transform: rotate(-6deg); opacity: .96; }
.co-step__media--duo .device--front { position: relative; left: 50px; top: 24px; z-index: 2; width: 200px; }
.co-step__media--duo .device--back.device--empty::before { display: none; }
.co-step__copy { position: relative; }
.co-step__num { display: block; font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(180deg, var(--blue), rgba(37, 99, 235, .15)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
.co-desktop { display: grid; gap: 28px; align-items: center; margin-top: 24px; padding: 28px 16px; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--bg), #EAF1FF); }
.co-desktop__copy p { color: var(--muted); margin-top: 10px; }
.co-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding: 5px; background: #fff; border-radius: 999px; box-shadow: var(--shadow-sm); }
.co-tabs button { font: 700 14px var(--font); border: 0; background: transparent; color: var(--muted); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.co-tabs button.is-active { background: var(--navy); color: #fff; }
.co-desktop__media { display: grid; }
.co-desktop__media .device { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.co-desktop__media .device.is-active { opacity: 1; visibility: visible; }
/* ---------- aplicatia CAR ---------- */
.co-app__layout { display: grid; gap: 32px; align-items: start; }
.co-dossier { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), var(--shadow-lg); font-size: 14px; }
.co-dossier__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: var(--navy); color: #CBD5E1; font-size: 13px; font-weight: 600; }
.co-dossier__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.co-dossier__head small { display: block; color: var(--muted); font-size: 12px; }
.co-dossier__head b { display: block; font-size: 15px; }
.co-status { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #1D4ED8; background: #DBEAFE; padding: 4px 10px; border-radius: 999px; }
.co-dossier__score { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--bg); }
.co-dossier__score small { display: block; color: var(--muted); font-size: 12px; }
.co-ring { --p: 80; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 58px; background: conic-gradient(var(--mint) calc(var(--p) * 1%), #E2E8F0 0); }
.co-ring span { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; font-weight: 800; font-size: 18px; }
.co-ring small { font-size: 10px; color: var(--muted); display: inline; }
.co-dossier__rows { list-style: none; margin: 0; padding: 8px 18px; }
.co-dossier__rows li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.co-dossier__rows li:last-child { border-bottom: 0; }
.co-dossier__rows em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; text-align: right; }
.co-dossier__hash { margin: 0 18px; padding: 8px 12px; border-radius: 10px; background: #F1F5F9; font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #475569; }
.co-dossier__actions { display: flex; gap: 10px; padding: 16px 18px 18px; flex-wrap: wrap; }
.co-fake-btn { display: inline-flex; padding: 9px 14px; border-radius: 10px; background: var(--mint); color: #fff; font-weight: 700; font-size: 13px; }
.co-fake-btn--ghost { background: #fff; color: var(--text); border: 1px solid var(--line); }
.co-extras { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.co-extras span { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: #334155; }
.co-extras svg { width: 18px; height: 18px; fill: var(--blue); flex: 0 0 18px; }
/* ---------- pret ---------- */
.co-price__inner { display: grid; gap: 36px; align-items: center; }
.co-price__card { position: relative; background: #fff; border-radius: var(--r-lg); padding: 30px 24px; box-shadow: 0 0 0 1px rgba(37, 99, 235, .12), var(--shadow-lg); overflow: hidden; }
.co-price__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--blue), var(--blue-light), var(--amber)); }
.co-price__tag { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.co-price__amount { display: flex; align-items: flex-end; gap: 12px; margin: 10px 0 8px; }
.co-price__amount b { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--navy); }
.co-price__amount span { font-size: 15px; color: var(--muted); font-weight: 600; line-height: 1.3; padding-bottom: 8px; }
.co-price__amount--quote b { font-size: 44px; }
.co-price__note { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.co-price__link { display: block; text-align: center; margin-top: 14px; font-weight: 700; font-size: 15px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
    .co-caret { animation: none; }
}
@media (min-width: 768px) {
    .co-step__media .device--phone { width: 260px; }
    .co-step__media--duo { min-height: 600px; }
    .co-step__media--duo .device--back { width: 230px; left: calc(50% - 200px); }
    .co-step__media--duo .device--front { width: 250px; left: 70px; }
    .co-desktop { padding: 40px; }
}
@media (min-width: 1024px) {
    .co-step { grid-template-columns: 1fr 1fr; gap: 64px; padding: 56px 0; }
    .co-step:nth-of-type(even) .co-step__media { order: 2; }
    .co-step__copy { max-width: 500px; }
    .co-step__num { font-size: 96px; }
    .co-desktop { grid-template-columns: .7fr 1.3fr; gap: 48px; padding: 48px; }
    .co-app__layout { grid-template-columns: 1.35fr 1fr; gap: 40px; }
    .co-dossier { position: sticky; top: 96px; }
    .co-price__inner { grid-template-columns: 1.1fr .9fr; gap: 64px; }
    .co-price__card { padding: 40px 36px; }
}