/* ---------- Цвета: меняются здесь ---------- */
.dcards{
    --dc-orange:#ff6a13; --dc-orange-2:#ff9a1f;
    --dc-violet:#6b3cff; --dc-violet-2:#a24bff;
    --dc-pink:#ff2e7e;   --dc-pink-2:#ff7a59;
    --dc-sun:#ffd93b;    --dc-ink:#1f1a17;
}

/* ---------- Каркас + защита от стилей темы (Bootstrap/OpenCart) ---------- */
.dcards{
    box-sizing:border-box; max-width:1240px; margin:24px auto; padding:0 20px;
    display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:auto auto; gap:16px;
    font-family:"Manrope",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    line-height:1.4; color:#fff; text-align:left;
}
.dcards *,.dcards *::before,.dcards *::after{box-sizing:border-box}
.dcards a.dcards-card,.dcards a.dcards-card:hover,.dcards a.dcards-card:focus,.dcards a.dcards-card:visited{
    color:#fff; text-decoration:none;
}
.dcards h2.dcards-title{margin:0 0 10px; padding:0; border:0; color:#fff; text-transform:none}
.dcards p.dcards-sub{margin:0 0 20px; padding:0}
.dcards img{max-width:100%; height:auto; border:0; display:block}

/* ---------- Карточки ---------- */
.dcards-card{
    position:relative; display:flex; gap:16px; border-radius:30px; overflow:hidden; isolation:isolate;
    min-width:0; transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.dcards-card::before{content:""; position:absolute; z-index:-1; border-radius:50%; opacity:.35; pointer-events:none}
.dcards-card:hover{transform:translateY(-5px)}
.dcards-card:focus-visible{outline:3px solid var(--dc-ink); outline-offset:3px}

.dcards-card--photo{
    grid-row:span 2; flex-direction:column; justify-content:space-between; padding:40px 40px 36px;
    background:linear-gradient(150deg,var(--dc-orange-2) 0%,var(--dc-orange) 55%,#ff4d1f 100%);
    box-shadow:0 26px 50px -26px rgba(255,90,20,.8);
}
.dcards-card--photo::before{width:420px; height:420px; right:-120px; bottom:-140px; background:var(--dc-sun)}

.dcards-card--name,.dcards-card--ready{flex-direction:column; align-items:stretch; justify-content:space-between; padding:26px 30px 30px; gap:18px}
.dcards .dcards-card--name h2.dcards-title,.dcards .dcards-card--ready h2.dcards-title{margin-bottom:0}
.dcards-card--name{
    background:linear-gradient(135deg,var(--dc-violet) 0%,var(--dc-violet-2) 100%);
    box-shadow:0 22px 40px -24px rgba(107,60,255,.8);
}
.dcards-card--name::before{width:260px; height:260px; right:-60px; top:-90px; background:#ff8bd8}
.dcards-card--ready{
    background:linear-gradient(135deg,var(--dc-pink) 0%,var(--dc-pink-2) 100%);
    box-shadow:0 22px 40px -24px rgba(255,46,126,.8);
}
.dcards-card--ready::before{width:240px; height:240px; right:-40px; bottom:-110px; background:var(--dc-sun)}
.dcards-card--name .dcards-text,.dcards-card--ready .dcards-text{display:flex; align-items:center; justify-content:space-between; gap:16px}
.dcards-card--ready .dcards-num{font-size:1.3em}

/* ---------- Текст ---------- */
.dcards-tag{
    display:inline-block; background:var(--dc-ink); color:var(--dc-sun); font-weight:800; font-size:13px;
    line-height:1; padding:9px 14px; border-radius:999px; margin-bottom:18px;
}
.dcards h2.dcards-title{
    font-family:"Unbounded","Manrope",-apple-system,"Segoe UI",Arial,sans-serif;
    font-weight:800; letter-spacing:-.015em; line-height:1.05; font-size:25px;
}
.dcards .dcards-card--photo h2.dcards-title{font-size:clamp(36px,4.3vw,56px); margin-bottom:16px}
.dcards-num{display:block; color:var(--dc-sun); font-size:1.5em; line-height:1}
.dcards p.dcards-sub{color:rgba(255,255,255,.92); font-size:15px; line-height:1.5; max-width:30em}
.dcards .dcards-card--photo p.dcards-sub{font-size:17px; max-width:25em; margin-bottom:26px}

/* ---------- Кнопки ---------- */
.dcards-btn{
    display:inline-block; white-space:nowrap; background:#fff; color:var(--dc-ink); font-weight:800;
    font-size:18px; line-height:1; padding:18px 34px; border-radius:999px;
    box-shadow:0 6px 0 -1px rgba(0,0,0,.18); transition:transform .15s,box-shadow .15s;
}
.dcards-btn--sm{font-size:14px; padding:12px 20px}
.dcards-card:hover .dcards-btn{transform:translateY(-2px); box-shadow:0 9px 0 -1px rgba(0,0,0,.18)}

/* ---------- Фото в рамках ---------- */
.dcards-frame{
    background:#fff; border-radius:20px; padding:10px; box-shadow:0 18px 34px -14px rgba(0,0,0,.4);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.dcards-frame img{width:100%; border-radius:12px}

.dcards-collage{position:relative; height:340px; margin-top:12px}
.dcards-frame--photos{position:absolute; left:0; top:24px; width:54%; transform:rotate(-5deg)}
.dcards-frame--case{position:absolute; right:7%; top:0; width:31%; padding:8px; transform:rotate(6deg)}
.dcards-card--photo:hover .dcards-frame--photos{transform:rotate(-8deg) translate(-6px,4px)}
.dcards-card--photo:hover .dcards-frame--case{transform:rotate(2deg) translateY(-10px) scale(1.04)}
.dcards-sticker{
    position:absolute; font-family:"Unbounded","Manrope",sans-serif; font-weight:700; line-height:1.1;
    box-shadow:0 10px 18px -8px rgba(0,0,0,.35);
}
.dcards-sticker--a{left:33%; bottom:4px; background:var(--dc-sun); color:var(--dc-ink); font-size:14px; padding:10px 16px; border-radius:14px; transform:rotate(-4deg); white-space:nowrap}
.dcards-sticker--b{right:1%; bottom:34px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--dc-orange); font-size:24px; border-radius:50%; transform:rotate(10deg)}

.dcards-frame--side{width:100%; padding:12px; transform:rotate(1.5deg)}
.dcards-frame--tilt{transform:rotate(-1.5deg)}
.dcards-card--name:hover .dcards-frame--side,.dcards-card--ready:hover .dcards-frame--tilt{transform:rotate(0) scale(1.03)}


/* ---------- Мобильные и планшеты < 900px ---------- */
@media (max-width:899px){
    .dcards{grid-template-columns:1fr; gap:12px; padding:0 12px; margin:16px auto}
    .dcards-card{border-radius:24px}
    .dcards-card--photo{grid-row:auto; padding:26px 22px 22px}
    .dcards .dcards-card--photo h2.dcards-title{font-size:33px}
    .dcards .dcards-card--photo p.dcards-sub{font-size:15px; margin-bottom:20px}
    .dcards-card--photo .dcards-btn{display:block; text-align:center; font-size:17px}
    .dcards-collage{height:auto; aspect-ratio:1.45/1; max-height:420px; margin-top:6px}
    .dcards-sticker--a{font-size:12px; padding:8px 12px; left:26%}
    .dcards-sticker--b{width:44px; height:44px; font-size:20px; bottom:22px}
    .dcards h2.dcards-title{font-size:20px}
    .dcards p.dcards-sub{font-size:13.5px; margin-bottom:14px}
    .dcards-btn--sm{font-size:13px; padding:11px 16px}
    .dcards-frame--side{padding:7px; border-radius:14px}
    .dcards-frame--side img{border-radius:9px}
}
/* ---------- Планшеты 600–899px ---------- */
@media (min-width:600px) and (max-width:899px){
    .dcards-card--photo{padding:34px 34px 28px}
    .dcards .dcards-card--photo h2.dcards-title{font-size:46px}
    .dcards-card--photo .dcards-btn{display:inline-block; align-self:flex-start; padding:17px 40px}
    .dcards-collage{max-height:340px; width:100%; max-width:560px; align-self:center}
    .dcards h2.dcards-title{font-size:24px}
    .dcards-card--name,.dcards-card--ready{flex-direction:row; align-items:center; padding:28px 24px 28px 30px}
    .dcards-card--name .dcards-text,.dcards-card--ready .dcards-text{flex:0 0 38%; flex-direction:column; align-items:flex-start}
    .dcards .dcards-card--name h2.dcards-title,.dcards .dcards-card--ready h2.dcards-title{margin-bottom:18px}
    .dcards-frame--side{flex:1 1 0; width:auto}
}
/* ---------- Телефоны < 600px ---------- */
@media (max-width:599px){
    .dcards-card--name,.dcards-card--ready{flex-direction:column; align-items:stretch; padding:22px 20px 24px}
    .dcards-card--name .dcards-text,.dcards-card--ready .dcards-text{gap:12px}
}
@media (max-width:374px){
    .dcards .dcards-card--photo h2.dcards-title{font-size:29px}
    .dcards-card--name .dcards-text,.dcards-card--ready .dcards-text{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.dcards *,.dcards-card{transition:none}}