/* Digital Branding hero - sliding row of phone screens (dbs-phones.js), like the naksysglobal.com hero.
   Five phones sit in slots 0-4; every step each moves one slot left (sizes / timing measured from the reference):
     0 = shrunk to nothing, left   1 = small, left (x0.657)   2 = big, middle   3 = small, right (x0.657)   4 = grows in from nothing, right
   Everything inside a phone is sized in em (1em = 1/16 of the middle phone's width) so it scales with it. */

/* hero: text on the left, phones on the right (the forced line break in the lead is for the old full-width layout) */
.dbs-banner .dbs-br { display: none; }
.dbs-banner .dbs-container { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); }
.dbs-banner .dbs-banner-col { flex: 1 1 auto; min-width: 0; max-width: none !important; }

.dbs-phones {
    --pw: clamp(120px, 9.3vw, 170px);         /* width of the middle phone (reference: 134px at a 1440px screen) */
    position: relative;
    flex: 0 0 calc(var(--pw) * 3);
    height: calc(var(--pw) * 2.4);
    pointer-events: none;
    user-select: none;
}

.dbs-phone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--pw);
    height: calc(var(--pw) * 2.164);          /* reference phone: 134 x 290 */
    margin: calc(var(--pw) * -1.082) 0 0 calc(var(--pw) * -.5);
    overflow: hidden;
    box-sizing: border-box;
    border-radius: calc(var(--pw) * .11);   /* plain rounded screens, no device frame (as the reference) */
    background: #eef1ff;
    box-shadow: 0 14px 34px rgba(20, 22, 60, .16), 0 2px 6px rgba(20, 22, 60, .08);
    font: 400 calc(var(--pw) / 16)/1.25 Geist, Montserrat, "Segoe UI", Arial, sans-serif;
    transition: transform .43s cubic-bezier(.37, 0, .63, 1);   /* reference: 0.43s, sine ease-in-out */
    will-change: transform;
}
.dbs-phone.no-anim { transition: none; }
.dbs-phone[data-slot="0"] { transform: translateX(calc(var(--pw) * -1.37)) scale(0); z-index: 1; }   /* shrinks away to nothing */
.dbs-phone[data-slot="1"] { transform: translateX(calc(var(--pw) * -.963)) scale(.657); z-index: 2; }  /* reference: 88 x 191, 129px left */
.dbs-phone[data-slot="2"] { transform: none; z-index: 3; }
.dbs-phone[data-slot="3"] { transform: translateX(calc(var(--pw) * .963)) scale(.657); z-index: 2; }
.dbs-phone[data-slot="4"] { transform: translateX(calc(var(--pw) * 1.37)) scale(0); z-index: 1; }    /* grows in from nothing */


/* ---------- screens ---------- */
.ph-scr {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: .75em;
    padding: 1.2em 1em 1em;
    border-radius: calc(var(--pw) * .11);
    color: #1e1b4b;
    background: #eef1ff;
}
.ph-scr b { font-weight: 700; }
.ph-scr small { display: block; font-size: .62em; opacity: .7; }
.ph-light { background: #eef1ff; }
.ph-white { background: #fff; }
.ph-sky { background: #cdeef8; color: #0e3a52; }
.ph-dark { background: #1f2442; color: #fff; }
.ph-navy { background: #11163a; color: #fff; }
.ph-dark2 { background: #22232f; color: #fff; }
.ph-violet { background: #5b4fe0; color: #fff; }

.ph-top { display: flex; align-items: center; justify-content: space-between; font-size: .95em; }
.ph-top.light { color: #fff; }
.ph-dot { width: .7em; height: .7em; border-radius: 50%; background: #ff4cbf; }
.ph-cart { min-width: 1.4em; height: 1.4em; border-radius: 1em; background: #5b36f5; color: #fff; font-size: .7em; line-height: 1.4em; text-align: center; }
.ph-btn { margin-top: auto; padding: .6em; border-radius: .6em; background: #5b36f5; color: #fff; font-size: .78em; font-weight: 600; text-align: center; }
.ph-btn.blue { background: #1a9be0; }

/* bottom tab bar (every screen) */
.ph-nav { display: flex; justify-content: space-around; align-items: center; margin-top: auto; padding: .55em .4em; border-radius: .8em; background: #fff; box-shadow: 0 .2em .8em rgba(30, 27, 75, .08); }
.ph-nav.dark { background: rgba(255, 255, 255, .07); box-shadow: none; }
.ph-ic { width: 1em; height: 1em; border-radius: .25em; background: #c3c6d8; }
.ph-nav.dark .ph-ic { background: rgba(255, 255, 255, .28); }
.ph-ic-home { clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); border-radius: 0; }
.ph-ic-grid { background: radial-gradient(circle, currentColor 0 0) !important; box-shadow: none; outline: .18em solid #c3c6d8; outline-offset: -.18em; border-radius: .15em; color: transparent; }
.ph-ic-chart { border-radius: .1em; clip-path: polygon(0 100%, 0 55%, 30% 55%, 30% 25%, 65% 25%, 65% 0, 100% 0, 100% 100%); }
.ph-ic-user { border-radius: 50% 50% .3em .3em; }
.ph-ic.on { background: #ff4c7a !important; outline-color: #ff4c7a; }
.ph-dot.w { background: #fff; }

/* logo studio: labels on the tiles */
.ph-tiles i { display: flex; align-items: flex-end; padding: .4em; box-sizing: border-box; }
.ph-tiles em { font-style: normal; font-size: .62em; font-weight: 700; color: #1e1b4b; opacity: .75; }

/* campaign: idea of the day */
.ph-idea { display: flex; align-items: center; gap: .6em; padding: .55em; border-radius: .7em; background: #f3f0ff; }
.ph-idea b { display: block; font-size: .8em; }
.ph-bulb { width: 1.6em; height: 1.6em; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6b0, #ffcf33 60%, #f5a300); }

/* brand kit */
.ph-logo { display: grid; place-items: center; width: 4.6em; height: 4.6em; margin: .4em auto; border-radius: 1.3em; background: linear-gradient(135deg, #5b36f5, #ff4cbf); color: #fff; font-size: 1.15em; font-weight: 800; letter-spacing: .02em; box-shadow: 0 .5em 1em rgba(91, 54, 245, .35); }
.ph-cap { font-size: .7em; font-weight: 600; opacity: .75; }
.ph-swatches { display: flex; gap: .45em; }
.ph-swatches i { flex: 1; height: 2.2em; border-radius: .5em; }
.ph-type { display: flex; align-items: center; gap: .6em; padding: .6em; border-radius: .7em; background: #fff; }
.ph-type span { font-size: 1.6em; font-weight: 700; color: #5b36f5; }
.ph-type b { display: block; font-size: .85em; }

/* social growth */
.ph-ring { position: relative; width: 5em; height: 5em; margin: .2em auto 0; }
.ph-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 3; }
.ph-ring .ph-ring-val { stroke: #ff7ab8; stroke-linecap: round; }
.ph-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .95em; }
.ph-stats { display: flex; justify-content: space-between; text-align: center; }
.ph-stats b { display: block; font-size: .85em; }
.ph-line { width: 100%; height: 2.6em; fill: none; stroke: #ff7ab8; stroke-width: 1.4; }
.ph-bars { display: flex; align-items: flex-end; gap: .35em; height: 3.6em; }
.ph-bars i { flex: 1; border-radius: .25em .25em 0 0; background: rgba(255, 255, 255, .78); }
.ph-bars.tall { height: 5em; }
.ph-bars.tall i { background: linear-gradient(#0bcefc, #5b36f5); }

/* website builder */
.ph-hero-block { position: relative; padding: 1em .8em; border-radius: .8em; background: linear-gradient(135deg, #1aa3c9, #5b8cff); color: #fff; }
.ph-hero-block b { display: block; font-size: .95em; }
.ph-chip { position: absolute; right: .6em; bottom: .6em; padding: .25em .6em; border-radius: 1em; background: #fff; color: #1a6fd1; font-size: .6em; font-weight: 700; }
.ph-row3 { display: flex; gap: .45em; }
.ph-row3 i { flex: 1; height: 2.4em; border-radius: .5em; background: rgba(255, 255, 255, .85); }
.ph-card { display: flex; gap: .55em; align-items: center; padding: .5em; border-radius: .7em; background: #fff; }
.ph-card-img { width: 2.8em; height: 2.2em; flex: 0 0 auto; border-radius: .45em; background: linear-gradient(135deg, #8ee9ff, #1aa3c9); }
.ph-card-img.alt { background: linear-gradient(135deg, #c4b5fd, #5b36f5); }
.ph-lines { flex: 1; display: grid; gap: .35em; }
.ph-lines i { height: .45em; border-radius: 1em; background: #d5dff0; }
.ph-lines i.s { width: 60%; }

/* online store */
.ph-search { height: 1.8em; border-radius: .6em; background: #fff; box-shadow: inset 0 0 0 1px #dfe3f5; }
.ph-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.ph-grid2 > div { padding: .4em; border-radius: .7em; background: #fff; }
.ph-grid2 i { display: block; height: 3em; border-radius: .5em; }
.ph-grid2 small { margin-top: .3em; }
.ph-grid2 b { font-size: .75em; }

/* campaign calendar */
.ph-hello b { display: block; font-size: 1em; color: #5b36f5; }
.ph-days { display: flex; justify-content: space-between; font-size: .7em; font-weight: 700; }
.ph-days span { display: grid; place-items: center; width: 1.9em; height: 2.6em; border-radius: .6em; }
.ph-days span.on { background: #5b36f5; color: #fff; }
.ph-reach { text-align: center; }
.ph-reach b { display: block; font-size: 1.5em; color: #5b36f5; }
.ph-pill { display: inline-block; margin-top: .3em; padding: .3em 1em; border-radius: 1em; background: #ff4c7a; color: #fff; font-size: .62em; font-weight: 700; }
.ph-violet-card { position: relative; display: grid; gap: .3em; padding: .7em; border-radius: .9em; background: #6d63f0; color: #fff; }
.ph-violet-card b { font-size: .85em; }
.ph-violet-card small { display: inline; margin-left: .3em; }
.ph-violet-card svg { position: absolute; right: .5em; bottom: .5em; width: 45%; fill: none; stroke: #fff; stroke-width: 1.6; }
.ph-violet-card svg circle { fill: #ff7a59; stroke: #fff; }

/* analytics */
.ph-kpi { display: flex; align-items: center; justify-content: space-between; padding: .7em; border-radius: .8em; background: rgba(255, 255, 255, .06); }
.ph-kpi b { display: block; font-size: 1.05em; }
.ph-kpi .up { padding: .2em .5em; border-radius: 1em; background: rgba(52, 211, 153, .18); color: #6ee7b7; font-size: .65em; font-weight: 700; }
.ph-list { display: grid; gap: .5em; font-size: .72em; }
.ph-list div { display: flex; align-items: center; gap: .6em; }
.ph-list i { width: .9em; height: .9em; border-radius: .25em; background: #ff4cbf; }
.ph-list i.b { background: #0bcefc; }
.ph-list i.c { background: #a78bfa; }
.ph-list span { flex: 1; opacity: .8; }

/* content planner */
.ph-head-card { padding: .8em; border-radius: .8em; background: linear-gradient(135deg, #5b36f5, #8b5cf6); }
.ph-head-card b { display: block; }
.ph-tasks { display: grid; gap: .55em; }
.ph-tasks div { display: flex; align-items: center; gap: .55em; font-size: .7em; }
.ph-tasks .av { width: 1.7em; height: 1.7em; border-radius: 50%; background: #ff7a59; }
.ph-tasks .av.b { background: #0bcefc; }
.ph-tasks .av.c { background: #a78bfa; }
.ph-tasks span { flex: 1; opacity: .85; }
.ph-tasks em { width: .9em; height: .9em; border-radius: 50%; border: .15em solid #4b4d63; }
.ph-tasks em.ok { border-color: #1a9be0; background: #1a9be0; }

/* logo studio */
.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; }
.ph-tiles i { height: 3.3em; border-radius: .7em; }

@media (max-width: 900px) {
    .dbs-banner .dbs-container { flex-direction: column; align-items: stretch; }
    .dbs-phones { --pw: clamp(100px, 28vw, 150px); flex: 0 0 auto; width: 100%; height: calc(var(--pw) * 2.4); }
}
@media (prefers-reduced-motion: reduce) {
    .dbs-phone { transition: none; }
}

/* blog editor */
.ph-chip2 { padding: .2em .6em; border-radius: 1em; background: #fff1c2; color: #8a6300; font-size: .6em; font-weight: 700; }
.ph-toolbar { display: flex; gap: .35em; }
.ph-toolbar i { flex: 1; padding: .3em 0; border-radius: .4em; background: #f1f2f8; font-size: .62em; font-style: normal; font-weight: 700; text-align: center; color: #4b4f6b; }
.ph-post-title { font-size: .9em; font-weight: 700; line-height: 1.2; }
.ph-post-img { height: 3.6em; border-radius: .7em; background: linear-gradient(135deg, #c4b5fd, #8ee9ff); }