/* ═══════════════════════════════════════════════════════════════════
   MIT Solutions — Launch 48: a full digital portfolio, live in 48 hours
   Homepage band (index.html #launch48) and details page (launch48.html).
   The star is the 48-hour dial: drag the knob (or let it play) and the
   clock runs through two days and two nights while the deliverables tick
   off and a tiny website, its emails and its social pages come alive in
   the middle. Light in light mode, night in dark (glass) mode — all theme
   colour comes from the --l4-* tokens; the dial's sky has its own day/night.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --l4-ink: #1a0e2e;
    --l4-soft: rgba(26,14,46,0.74);
    --l4-mute: rgba(26,14,46,0.52);
    --l4-line: rgba(52,71,103,0.14);
    --l4-card: #ffffff;
    --l4-card-2: #f6f2fa;
    --l4-edge: 0 0 0 1px rgba(52,71,103,0.10), 0 26px 50px -30px rgba(26,14,46,0.42);
    --l4-accent: #8A328A;
    --l4-teal: #00838c;
    --l4-ok-bg: rgba(0,131,140,0.10);
    --l4-chip: rgba(255,255,255,0.86);
    --l4-title-grad: linear-gradient(110deg, #00a6ae 0%, #344767 40%, #8A328A 75%, #C77DBA 100%);
    --l4-icon-grad: linear-gradient(135deg, #00C2CB, #8A328A);
    --l4-track: rgba(52,71,103,0.12);
    --l4-night-arc: rgba(52,23,82,0.22);
    --l4-tick: rgba(26,14,46,0.20);
    --l4-tick-big: rgba(26,14,46,0.45);
    --l4-band:
        radial-gradient(820px 480px at 100% 0%, rgba(255,196,140,0.30), transparent 60%),
        radial-gradient(760px 460px at 0% 100%, rgba(0,194,203,0.16), transparent 60%),
        radial-gradient(600px 400px at 55% 40%, rgba(199,125,186,0.16), transparent 65%),
        linear-gradient(170deg, #fffaf5 0%, #f7f0fa 55%, #eef8f9 100%);
}
[data-theme="glass"] {
    --l4-ink: #f6f1fc;
    --l4-soft: rgba(246,241,252,0.80);
    --l4-mute: rgba(246,241,252,0.56);
    --l4-line: rgba(255,255,255,0.14);
    --l4-card: rgba(32,22,58,0.92);
    --l4-card-2: rgba(255,255,255,0.05);
    --l4-edge: 0 0 0 1px rgba(255,255,255,0.10), 0 26px 50px -26px rgba(0,0,0,0.7);
    --l4-accent: #FFB1FF;
    --l4-teal: #00C9C6;
    --l4-ok-bg: rgba(0,201,198,0.14);
    --l4-chip: rgba(255,255,255,0.07);
    --l4-title-grad: linear-gradient(110deg, #00C9C6 0%, #C77DBA 55%, #FFB1FF 100%);
    --l4-track: rgba(255,255,255,0.10);
    --l4-night-arc: rgba(255,177,255,0.22);
    --l4-tick: rgba(255,255,255,0.22);
    --l4-tick-big: rgba(255,255,255,0.55);
    --l4-band:
        radial-gradient(820px 480px at 100% 0%, rgba(138,50,138,0.36), transparent 60%),
        radial-gradient(760px 460px at 0% 100%, rgba(0,201,198,0.16), transparent 60%),
        linear-gradient(170deg, #0f0920 0%, #160d2c 55%, #0d1426 100%);
}

/* ── homepage band ─────────────────────────────────────────────────── */
.l4-band { position: relative; overflow: hidden; isolation: isolate; padding: 104px 0 96px; background: var(--l4-band); color: var(--l4-ink); }
.l4-band::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #ffb36b, #C77DBA, #8A328A, #00C9C6); }
.l4-band::after { content: '48'; position: absolute; z-index: -1; right: -2vw; bottom: -9vw; font: 900 clamp(14rem, 32vw, 30rem)/1 var(--font-heading); letter-spacing: -1.5rem; color: transparent; -webkit-text-stroke: 2px var(--l4-line); pointer-events: none; }
[dir="rtl"] .l4-band::after { right: auto; left: -2vw; }
.l4-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.l4-grid--page { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.l4-over { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 15px; border-radius: 999px; background: var(--l4-chip); border: 1px solid var(--l4-line); font: 800 .8rem/1.2 var(--font-heading); letter-spacing: 2.2px; color: var(--l4-accent); }
.l4-over .material-icons-round { font-size: 18px; color: #f5a623; }
.l4-title { margin: 0 0 18px; font: 900 clamp(2.7rem, 5.6vw, 4.8rem)/.98 var(--font-heading); letter-spacing: -2px; color: var(--l4-ink); }
.l4-title span { background: var(--l4-title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.l4-lead { margin: 0 0 24px; max-width: 560px; font-size: 1.1rem; line-height: 1.6; color: var(--l4-soft); }
.l4-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.l4-wa { display: inline-flex; align-items: center; gap: 8px; font: 800 1rem/1.2 var(--font-heading); color: var(--l4-teal); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.l4-wa .fa-brands { font-size: 1.2rem; }

/* ── deliverable checklist (drives / follows the dial) ─────────────── */
.l4-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.l4-grid--page .l4-steps { grid-template-columns: minmax(0, 1fr); gap: 9px; }
.l4-steps button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 15px; border: 1px solid var(--l4-line); background: var(--l4-chip); color: var(--l4-ink); text-align: start; cursor: pointer; transition: border-color .25s, background .25s, transform .2s; font: inherit; }
.l4-steps button:hover { transform: translateY(-1px); border-color: var(--l4-accent); }
.l4-step-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--l4-card-2); color: var(--l4-mute); font-size: 19px; transition: background .3s, color .3s; }
.l4-step-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.l4-step-t b { font: 800 .9rem/1.2 var(--font-heading); }
.l4-step-t small { font-size: .74rem; line-height: 1.3; color: var(--l4-mute); }
.l4-steps em { flex: none; min-width: 34px; padding: 4px 7px; border-radius: 999px; background: var(--l4-card-2); font: 800 .72rem/1 var(--font-heading); font-style: normal; text-align: center; color: var(--l4-mute); font-variant-numeric: tabular-nums; }
.l4-steps li.is-done .l4-step-ic { background: var(--l4-icon-grad); color: #fff; }
.l4-steps li.is-done em { background: var(--l4-ok-bg); color: var(--l4-teal); }
.l4-steps li.is-now button { border-color: var(--l4-accent); background: color-mix(in srgb, var(--l4-accent) 8%, var(--l4-chip)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--l4-accent) 14%, transparent); }
.l4-steps li.is-now .l4-step-ic { color: var(--l4-accent); animation: l4Pulse 1.4s ease-in-out infinite; }
.l4-grid--page .l4-steps button { padding: 11px 13px; }
.l4-grid--page .l4-step-t b { font-size: .98rem; }
.l4-grid--page .l4-step-t small { font-size: .8rem; }
@keyframes l4Pulse { 50% { transform: scale(1.12); } }

/* ── the 48-hour dial ──────────────────────────────────────────────── */
.l4-clock { display: grid; justify-items: center; gap: 16px; }
.l4-dial { --l4-n: 0; position: relative; width: min(100%, 500px); aspect-ratio: 1; container-type: inline-size; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; }
.l4-dial:active { cursor: grabbing; }
.l4-sky { position: absolute; inset: 9.5%; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px var(--l4-line), 0 40px 70px -40px rgba(26,14,46,0.55);
    background: linear-gradient(180deg, #bfeaf5 0%, #e7f5fb 45%, #fdeef5 100%); }
.l4-sky::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0822 0%, #1c1142 55%, #3a1d5c 100%); opacity: var(--l4-n); transition: opacity .2s linear; }
.l4-stars { position: absolute; inset: 0; opacity: var(--l4-n); background-image:
    radial-gradient(1.4px 1.4px at 22% 18%, #fff, transparent), radial-gradient(1px 1px at 70% 12%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 84% 32%, #fff, transparent), radial-gradient(1px 1px at 12% 44%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 30% 80%, #fff, transparent), radial-gradient(1px 1px at 78% 76%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 52% 8%, #fff, transparent), radial-gradient(1px 1px at 90% 58%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 8% 66%, #fff, transparent), radial-gradient(1px 1px at 62% 90%, #fff, transparent); }
.l4-orb { position: absolute; left: 50%; top: 7%; width: 9%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
    background: radial-gradient(circle at 35% 35%, #fff6c9, #ffc94a 60%, #ff9d2e); box-shadow: 0 0 30px 8px rgba(255,190,60,0.55); transition: background .4s, box-shadow .4s; }
.l4-dial.is-night .l4-orb, .is-night .l4-orb { background: radial-gradient(circle at 60% 40%, #ffffff, #dfe3f5 60%, #b9bfe0); box-shadow: 0 0 26px 6px rgba(220,225,255,0.45), inset -6px -2px 0 rgba(26,14,46,0.18); }

.l4-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.l4-ring circle { fill: none; stroke-width: 11; transform: rotate(-90deg); transform-origin: 200px 200px; }
.l4-track { stroke: var(--l4-track); }
.l4-nightarc { stroke: var(--l4-night-arc); }
.l4-prog { stroke: #00b8c4; stroke-linecap: round; stroke-dasharray: 0 48; filter: drop-shadow(0 0 6px rgba(0,194,203,0.55)); }
.l4-ticks line { stroke: var(--l4-tick); stroke-width: 1.5; }
.l4-ticks line.big { stroke: var(--l4-tick-big); stroke-width: 2.5; }

.l4-nodes { position: absolute; inset: 0; pointer-events: none; }
.l4-node { position: absolute; display: grid; place-items: center; width: 8.4%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--l4-card); color: var(--l4-mute); box-shadow: 0 0 0 2px var(--l4-line), 0 8px 18px -10px rgba(26,14,46,0.5); transition: background .3s, color .3s, transform .3s; }
.l4-node .material-icons-round { font-size: 4.2cqw; }
.l4-node.is-done { background: var(--l4-icon-grad); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.7), 0 10px 22px -10px rgba(138,50,138,0.7); }
.l4-node.is-now { color: var(--l4-accent); transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 2px var(--l4-accent), 0 0 0 7px color-mix(in srgb, var(--l4-accent) 18%, transparent); }

.l4-knob { position: absolute; left: 50%; top: 7%; z-index: 3; display: grid; place-items: center; width: 11%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #344767, #8A328A); color: #fff; cursor: grab; touch-action: none; outline: none;
    box-shadow: 0 0 0 4px #fff, 0 12px 26px -8px rgba(26,14,46,0.65); transition: box-shadow .2s; }
[data-theme="glass"] .l4-knob { box-shadow: 0 0 0 4px #FFB1FF, 0 12px 26px -8px rgba(0,0,0,0.8); }
.l4-knob .material-icons-round { font-size: 5.4cqw; }
.l4-knob:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 0 8px #00C2CB; }
.l4-dial:not(.is-touched) .l4-knob::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(0,194,203,0.7); animation: l4Ring 1.6s ease-out infinite; }
@keyframes l4Ring { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* the business growing in the middle */
.l4-core { direction: ltr; position: absolute; left: 50%; top: 52%; width: 50%; transform: translate(-50%, -50%); display: grid; gap: 2.4cqw; z-index: 2; pointer-events: none; }
.l4-win { position: relative; border-radius: 3cqw; overflow: hidden; background: #fff; box-shadow: 0 2cqw 5cqw -2cqw rgba(26,14,46,0.45), 0 0 0 1px rgba(26,14,46,0.08); transition: box-shadow .5s; }
.l4-bar { display: flex; align-items: center; gap: .8cqw; padding: 1.4cqw 1.8cqw; background: #f1edf6; }
.l4-bar > i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #d9d2e3; }
.l4-url { flex: 1; display: flex; align-items: center; gap: .6cqw; margin-inline-start: 1cqw; padding: .6cqw 1.4cqw; border-radius: 99px; background: #fff; font: 700 2.2cqw/1 var(--font-body); color: #1a0e2e; overflow: hidden; white-space: nowrap; direction: ltr; }
.l4-url .material-icons-round { font-size: 2.4cqw; color: #b9b2c4; transition: color .3s; }
.l4-url-t { clip-path: inset(0 100% 0 0); transition: clip-path .7s steps(14); }
.l4-page { display: grid; gap: 1.6cqw; padding: 2cqw; }
.l4-top { display: flex; align-items: center; gap: 1.2cqw; }
.l4-logo { width: 4cqw; height: 4cqw; border-radius: 50%; background: #e6e1ec; transition: background .5s, transform .5s; }
.l4-name { flex: 1; font: 900 2.4cqw/1 var(--font-heading); color: #cfc8d8; transition: color .5s; white-space: nowrap; }
.l4-mail { display: inline-flex; align-items: center; gap: .4cqw; padding: .5cqw 1.1cqw; border-radius: 99px; background: rgba(0,131,140,0.12); color: #00838c; font: 900 2cqw/1 var(--font-heading); opacity: 0; transform: scale(.6); transition: opacity .35s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.l4-mail .material-icons-round { font-size: 2.3cqw; }
.l4-hero { display: grid; gap: .9cqw; padding: 2cqw; border-radius: 2cqw; border: 1.5px dashed #ddd6e6; opacity: .35; transition: background .6s, border-color .6s, opacity .5s; }
.l4-hero i { height: 1.5cqw; border-radius: 99px; background: #e6e1ec; transition: background .6s; }
.l4-hero i:nth-child(2) { width: 65%; }
.l4-hero b { width: 34%; height: 2.6cqw; border-radius: 99px; background: #e6e1ec; transition: background .6s; }
.l4-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; opacity: .35; transition: opacity .5s; }
.l4-tiles i { height: 5.5cqw; border-radius: 1.4cqw; border: 1.5px dashed #ddd6e6; transition: background .6s, border-color .6s; }
.l4-live { position: absolute; top: 1.1cqw; inset-inline-end: 1.4cqw; display: inline-flex; align-items: center; gap: .6cqw; padding: .5cqw 1.2cqw; border-radius: 99px; background: #e8203e; color: #fff; font: 900 1.7cqw/1 var(--font-heading); letter-spacing: .2cqw; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.l4-live i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #fff; animation: l4Blink 1s steps(2) infinite; }
@keyframes l4Blink { 50% { opacity: .2; } }
.l4-soc { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; padding: 1.3cqw 2cqw; border-radius: 99px; background: #fff; box-shadow: 0 1.5cqw 4cqw -2cqw rgba(26,14,46,0.45); color: #1a0e2e; opacity: 0; transform: translateY(2cqw); transition: opacity .4s, transform .4s; }
.l4-soc .fa-brands { display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 50%; color: #fff; font-size: 2.2cqw; }
.l4-soc .fa-facebook-f { background: #1877f2; }
.l4-soc .fa-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.l4-soc .l4-meta { background: #0866ff; width: 0; opacity: 0; transition: width .4s, opacity .4s; }
.l4-soc b { font: 900 2.8cqw/1 var(--font-heading); font-variant-numeric: tabular-nums; margin-inline-start: .6cqw; }
.l4-soc small { font: 700 1.8cqw/1 var(--font-body); color: #6b6478; }

/* progress states (set on the [data-l4] root as the clock passes each hour) */
[data-l4].k-domain .l4-url-t { clip-path: inset(0 0 0 0); }
[data-l4].k-domain .l4-url .material-icons-round { color: #00a37a; }
[data-l4].k-email .l4-mail { opacity: 1; transform: none; }
[data-l4].k-brand .l4-logo { background: conic-gradient(from 200deg, #00C2CB, #8A328A, #C77DBA, #00C2CB); transform: rotate(180deg); }
[data-l4].k-brand .l4-name { color: #8A328A; }
[data-l4].k-design .l4-hero, [data-l4].k-design .l4-tiles { opacity: 1; }
[data-l4].k-design .l4-hero { border-color: #cfc5dd; }
[data-l4].k-dev .l4-hero { border-color: transparent; background: linear-gradient(120deg, #344767, #8A328A); }
[data-l4].k-dev .l4-hero i { background: rgba(255,255,255,0.55); }
[data-l4].k-dev .l4-hero b { background: #00C2CB; }
[data-l4].k-dev .l4-tiles i { border-color: transparent; background: linear-gradient(135deg, #f3e6f3, #e2f6f7); }
[data-l4].k-dev .l4-tiles i:nth-child(2) { background: linear-gradient(135deg, #fde9d6, #f6dcef); }
[data-l4].k-publish .l4-live { opacity: 1; transform: none; }
[data-l4].k-publish .l4-win { box-shadow: 0 0 0 2px #00C2CB, 0 0 6cqw -1cqw rgba(0,194,203,0.7); }
[data-l4].k-meta .l4-soc, [data-l4].k-social .l4-soc { opacity: 1; transform: none; }
[data-l4].k-meta .l4-soc .l4-meta { width: 4cqw; opacity: 1; }
[data-l4]:not(.k-social) .l4-soc .fa-facebook-f, [data-l4]:not(.k-social) .l4-soc .fa-instagram { filter: grayscale(1); opacity: .35; }

/* launch burst at hour 48 */
.l4-burst { position: absolute; left: 50%; top: 50%; z-index: 1; pointer-events: none; }
.l4-burst i { position: absolute; width: 1.6cqw; height: 1.6cqw; border-radius: 30%; opacity: 0; background: #00C2CB; }
.l4-burst i:nth-child(3n) { background: #C77DBA; }
.l4-burst i:nth-child(3n+1) { background: #ffc94a; }
[data-l4].is-live .l4-burst i { animation: l4Burst 1.1s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes l4Burst {
    0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.6); }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(-34cqw) scale(1) rotate(200deg); }
}
.l4-burst i:nth-child(1) { --a: 0deg; } .l4-burst i:nth-child(2) { --a: 26deg; } .l4-burst i:nth-child(3) { --a: 51deg; }
.l4-burst i:nth-child(4) { --a: 77deg; } .l4-burst i:nth-child(5) { --a: 103deg; } .l4-burst i:nth-child(6) { --a: 129deg; }
.l4-burst i:nth-child(7) { --a: 154deg; } .l4-burst i:nth-child(8) { --a: 180deg; } .l4-burst i:nth-child(9) { --a: 206deg; }
.l4-burst i:nth-child(10) { --a: 231deg; } .l4-burst i:nth-child(11) { --a: 257deg; } .l4-burst i:nth-child(12) { --a: 283deg; }
.l4-burst i:nth-child(13) { --a: 309deg; } .l4-burst i:nth-child(14) { --a: 334deg; }

/* readout under the dial */
.l4-readout { display: flex; align-items: center; gap: 12px; width: min(100%, 500px); padding: 10px 10px 10px 14px; border-radius: 18px; background: var(--l4-card); box-shadow: var(--l4-edge); color: var(--l4-ink); }
[dir="rtl"] .l4-readout { padding: 10px 14px 10px 10px; }
.l4-ro-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff3d6; color: #f39c12; font-size: 22px; transition: background .3s, color .3s; flex: none; }
.is-night .l4-ro-ic { background: #241848; color: #dfe3f5; }
.l4-ro-t { display: grid; gap: 2px; flex: none; }
.l4-ro-t b { font: 900 1rem/1.1 var(--font-heading); font-variant-numeric: tabular-nums; }
.l4-ro-t small { font: 700 .78rem/1.1 var(--font-body); color: var(--l4-mute); font-variant-numeric: tabular-nums; }
.l4-ro-now { flex: 1; min-width: 0; padding-inline-start: 12px; border-inline-start: 1px solid var(--l4-line); font: 800 .9rem/1.3 var(--font-heading); color: var(--l4-accent); }
.is-live .l4-ro-now { color: var(--l4-teal); }
.l4-replay { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--l4-line); background: var(--l4-card-2); color: var(--l4-ink); cursor: pointer; transition: transform .3s, border-color .2s; }
.l4-replay:hover { transform: rotate(-120deg); border-color: var(--l4-accent); }

/* ── details page ──────────────────────────────────────────────────── */
.l4-page .bxp-title { max-width: 900px; margin-inline: auto; }
.l4-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.l4-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 24px; background: var(--l4-card); box-shadow: var(--l4-edge); color: var(--l4-ink); transition: transform .25s; }
.l4-card:hover { transform: translateY(-4px); }
.l4-card-top { display: flex; align-items: center; justify-content: space-between; }
.l4-card-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--l4-icon-grad); color: #fff; font-size: 22px; }
.l4-card-h { padding: 5px 11px; border-radius: 999px; background: var(--l4-ok-bg); color: var(--l4-teal); font: 800 .74rem/1.2 var(--font-heading); letter-spacing: .6px; }
.l4-card h3 { margin: 4px 0 0; font: 900 1.25rem/1.2 var(--font-heading); }
.l4-card p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--l4-soft); }
.l4-card--followers { background: linear-gradient(140deg, #344767, #8A328A); color: #fff; }
.l4-card--followers p { color: rgba(255,255,255,0.84); }
.l4-card--followers .l4-card-ic { background: rgba(255,255,255,0.18); }
.l4-card--followers .l4-card-h { background: rgba(255,255,255,0.16); color: #fff; }

/* mini visuals inside the cards */
.l4v { position: relative; display: grid; place-items: center; height: 120px; border-radius: 16px; background: var(--l4-card-2); overflow: hidden; direction: ltr; }
.l4v-domain { display: flex; justify-content: center; align-items: center; gap: 6px; font: 700 1.05rem/1 var(--font-body); color: var(--l4-ink); }
.l4v-domain::before { content: ''; position: absolute; inset: 38px 18px; border-radius: 999px; background: var(--l4-card); box-shadow: var(--l4-edge); z-index: 0; }
.l4v-domain > * { position: relative; z-index: 1; }
.l4v-domain .material-icons-round { font-size: 18px; color: #00a37a; }
.l4v-domain b { font-weight: 900; }
.l4v-ok { color: #00a37a; }
.l4v-mail { display: grid; align-content: center; gap: 3px; padding: 8px 18px; place-items: stretch; }
.l4v-mail span { display: flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 7px; background: var(--l4-card); font: 800 .72rem/1.35 var(--font-body); color: var(--l4-ink); animation: l4MailIn .5s both; }
.l4v-mail span em { font-style: normal; font-weight: 600; color: var(--l4-mute); }
.l4v-mail i { font-size: 14px; color: var(--l4-teal); }
.l4v-mail span:nth-child(2) { animation-delay: .08s; } .l4v-mail span:nth-child(3) { animation-delay: .16s; }
.l4v-mail span:nth-child(4) { animation-delay: .24s; } .l4v-mail span:nth-child(5) { animation-delay: .32s; }
@keyframes l4MailIn { from { opacity: 0; transform: translateX(-10px); } }
.l4v-brand { display: flex; justify-content: center; align-items: center; gap: 18px; }
.l4v-mark { width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(from 200deg, #00C2CB, #8A328A, #C77DBA, #00C2CB); box-shadow: inset 0 0 0 12px var(--l4-card-2); animation: l4Spin 8s linear infinite; }
@keyframes l4Spin { to { transform: rotate(360deg); } }
.l4v-sw { display: grid; grid-template-columns: repeat(2, 20px); gap: 5px; }
.l4v-sw i { width: 20px; height: 20px; border-radius: 6px; background: #344767; }
.l4v-sw i:nth-child(2) { background: #8A328A; } .l4v-sw i:nth-child(3) { background: #00C2CB; } .l4v-sw i:nth-child(4) { background: #f5d76e; }
.l4v-brand b { font: 900 2.4rem/1 var(--font-heading); color: var(--l4-ink); }
.l4v-wire { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 14px 34px 26px; gap: 6px; padding: 14px 18px; place-items: stretch; }
.l4v-wire i { border-radius: 6px; border: 1.5px dashed color-mix(in srgb, var(--l4-accent) 45%, transparent); }
.l4v-wire i:nth-child(1) { grid-column: 1 / -1; }
.l4v-wire i:nth-child(2) { grid-column: 1 / -1; background: color-mix(in srgb, var(--l4-accent) 8%, transparent); }
.l4v-code { align-content: center; gap: 7px; padding: 14px 18px; place-items: start; }
.l4v-code i { height: 8px; border-radius: 99px; background: #8A328A; width: 48%; animation: l4Type 2.6s ease-in-out infinite; transform-origin: left; }
.l4v-code i:nth-child(2) { width: 62%; margin-left: 16px; background: #00C2CB; animation-delay: .2s; }
.l4v-code i:nth-child(3) { width: 40%; margin-left: 32px; background: #C77DBA; animation-delay: .4s; }
.l4v-code i:nth-child(4) { width: 54%; margin-left: 32px; background: #344767; animation-delay: .6s; }
.l4v-code i:nth-child(5) { width: 30%; margin-left: 16px; background: #00C2CB; animation-delay: .8s; }
.l4v-code i:nth-child(6) { width: 22%; background: #8A328A; animation-delay: 1s; }
@keyframes l4Type { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
.l4v-live { align-content: center; gap: 4px; }
.l4v-live b { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 99px; background: #e8203e; color: #fff; font: 900 1.1rem/1 var(--font-heading); letter-spacing: 2px; }
.l4v-live small { font: 700 .8rem/1 var(--font-body); color: var(--l4-mute); }
.l4v-ping { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -52px 0 0 -40px; border-radius: 50%; border: 2px solid rgba(232,32,62,0.5); animation: l4Ring 1.8s ease-out infinite; }
.l4v-meta { display: flex; justify-content: center; align-items: center; gap: 10px; font: 900 1.05rem/1 var(--font-heading); color: var(--l4-ink); }
.l4v-meta .fa-meta { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #0866ff; color: #fff; font-size: 24px; }
.l4v-social { align-content: center; gap: 8px; padding: 0 20px; place-items: stretch; }
.l4v-social span { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--l4-card); font: 800 .9rem/1 var(--font-heading); color: var(--l4-ink); }
.l4v-social i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 15px; }
.l4v-social .fa-facebook-f { background: #1877f2; }
.l4v-social .fa-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.l4v-fol { background: rgba(255,255,255,0.1); align-content: center; gap: 2px; color: #fff; }
.l4v-av { display: flex; margin-bottom: 4px; }
.l4v-av i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #5b2f7a; margin-inline-start: -8px; background: linear-gradient(135deg, #ffd3b0, #f5a3c7); }
.l4v-av i:nth-child(2) { background: linear-gradient(135deg, #b0f0f2, #6fc7d6); } .l4v-av i:nth-child(3) { background: linear-gradient(135deg, #f8e6a0, #f2b56b); }
.l4v-av i:nth-child(4) { background: linear-gradient(135deg, #d8c4f5, #a98ae0); }
.l4v-fol b { font: 900 2.4rem/1 var(--font-heading); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.l4v-fol small { font: 700 .8rem/1 var(--font-body); opacity: .8; }

.l4-final { position: relative; overflow: hidden; }
.l4-final-clock { margin: 0 0 6px; font: 900 clamp(3rem, 8vw, 5.5rem)/1 var(--font-heading); letter-spacing: -2px; font-variant-numeric: tabular-nums; direction: ltr; }
.l4-final-clock b { background: var(--l4-title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.l4-final-clock span { opacity: .35; }
.l4-final .btn .fa-brands { margin-inline-end: 8px; }
.l4-page .pt-hero-ctas .fa-brands { margin-inline-end: 8px; font-size: 1.2rem; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .l4-grid, .l4-grid--page { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .l4-copy { max-width: 720px; }
    .l4-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .l4-band { padding: 76px 0 70px; }
    .l4-steps { grid-template-columns: minmax(0, 1fr); }
    .l4-cards { grid-template-columns: minmax(0, 1fr); }
    .l4-readout { flex-wrap: wrap; }
    .l4-ro-now { flex-basis: 100%; order: 3; padding: 8px 0 0; border-inline-start: 0; border-top: 1px solid var(--l4-line); }
    .l4-title { letter-spacing: -1px; }
}
@media (prefers-reduced-motion: reduce) {
    .l4-steps li.is-now .l4-step-ic, .l4-knob::after, .l4-live i, .l4-burst i, .l4v-mark, .l4v-code i, .l4v-ping, .l4v-mail span { animation: none !important; }
    .l4-url-t, .l4-sky::before, .l4-stars { transition: none; }
}