/* ==========================================================================
   Brand Identity page (Service: Brand Identity)
   Own "creative studio" colours: coral #ff7a59, peach #ffb38a and lilac #b79cff with a
   mint #5eead4 accent on deep plum #140a1c. Accent words use the Instrument Serif italic.
   Sections live in pages/brand-identity/sections/.
   ========================================================================== */

body.page-template-service-brand-identity { --bi-bg: #140a1c; --bi-card: #1f1029; --bi-card2: #2a1438; --bi-gold: #ff7a59; --bi-gold2: #f0507a; --bi-ivory: #fff4ee; --bi-rose: #b79cff; --bi-sage: #5eead4; --bi-text: #fff4ee; --bi-muted: #bba9c9; --bi-line: rgba(255, 122, 89, .16); --bi-grad: linear-gradient(100deg, #ffb38a, #ff7a59 40%, #f0507a 65%, #b79cff); --bi-edge: linear-gradient(140deg, rgba(255, 122, 89, .55), rgba(255, 255, 255, .04) 45%, rgba(183, 156, 255, .4)); --bi-serif: "Instrument Serif", Georgia, "Times New Roman", serif; background: var(--bi-bg); background-image: radial-gradient(900px 600px at 100% 6%, rgba(255, 122, 89, .1), transparent 60%), radial-gradient(800px 600px at 0% 55%, rgba(183, 156, 255, .07), transparent 60%); }

/* Shared ------------------------------------------------------------------------------------ */
.bisec { position: relative; padding-block: clamp(40px, 5vw, 76px); }
.bisec + .bisec::before { content: ""; position: absolute; top: 0; left: 50%; width: min(760px, 80%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255, 122, 89, .35), transparent); }
.bisec + .bisec::after { content: "◆"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); color: var(--bi-gold); font-size: 11px; line-height: 16px; padding: 0 10px; background: var(--bi-bg); }
.bihead { max-width: 740px; margin: 0 auto clamp(26px, 3.4vw, 42px); text-align: center; }
.bihead--left { margin-inline: 0; text-align: left; }
.bipill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: rgba(255, 122, 89, .08); border: 1px solid rgba(255, 122, 89, .4); color: #ffd3bf; font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.bipill svg { color: var(--bi-gold); }
.bihead__title { margin: 12px 0 0; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; letter-spacing: -.03em; color: var(--bi-text); }
.bihead__title em, .bihero__title em, .bicta__band h2 em { font-family: var(--bi-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; padding-right: .06em; background: var(--bi-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bihead__text { margin: 10px 0 0; color: var(--bi-muted); font-size: 1.03rem; line-height: 1.7; }
.bibtn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border-radius: 999px; background: linear-gradient(110deg, #ffb38a, #ff7a59 50%, #f0507a); color: #2a0d14; font-weight: 800; text-decoration: none; box-shadow: 0 18px 36px -16px rgba(255, 122, 89, .8); transition: transform .3s, gap .3s, box-shadow .3s; }
.bibtn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); }
.bibtn:hover { color: #2a0d14; transform: translateY(-2px); gap: 14px; box-shadow: 0 22px 40px -14px rgba(255, 122, 89, .9); }
.bibtn:hover::after { left: 130%; }
.bibtn--ghost { background: rgba(246, 239, 226, .04); border: 1px solid rgba(246, 239, 226, .3); color: var(--bi-ivory); box-shadow: none; }
.bibtn--ghost:hover { background: var(--bi-ivory); color: #2a0d14; box-shadow: 0 18px 36px -16px rgba(246, 239, 226, .6); }
.bibtn--ghost svg { color: var(--bi-gold); }
.bibtn--ghost:hover svg { color: var(--bi-gold2); }
/* A soft card with a gold gradient edge, reused by most sections. */
.biinc__card, .bilogo__card, .biproc__step, .biapp__tile, .bisign__box, .bisign__side, .bitools__box, .biadd__card, .biwho__grid li, .birel__card, .bifaq__ask, .biq, .bipal__type, .biinc__benefits { border: 1px solid transparent; background: linear-gradient(var(--bi-card), var(--bi-card)) padding-box, var(--bi-edge) border-box; }
@keyframes bifloat { 50% { transform: translateY(-10px); } }
@keyframes bishine { to { background-position: 200% 0; } }

/* Hero (bibento grid) ----------------------------------------------------------------------------- */
.bihero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(16px, 2vw, 28px)) 0 clamp(36px, 4vw, 60px); }
.bihero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent, var(--bi-bg)); }
.bihero__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); }
.bihero__glow--1 { left: -6%; top: 10%; width: 620px; height: 480px; background: radial-gradient(circle, rgba(240, 80, 122, .32), rgba(255, 122, 89, .12) 55%, transparent 70%); animation: float-a 16s ease-in-out infinite; }
.bihero__glow--2 { right: -6%; top: 30%; width: 560px; height: 480px; background: radial-gradient(circle, rgba(183, 156, 255, .28), rgba(94, 234, 212, .1) 55%, transparent 70%); animation: float-b 18s ease-in-out infinite; }
.bihero__lines { position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.6px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 80%); }
.bihero .breadcrumbs { display: flex; }
.bihero .breadcrumbs ol { justify-content: flex-start; margin-bottom: 14px; background: rgba(255, 255, 255, .04); border-color: rgba(255, 122, 89, .25); }
.bihero__live { width: 8px; height: 8px; border-radius: 50%; background: var(--bi-sage); animation: pulse 2s infinite; }
.bibento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: minmax(260px, 1fr) minmax(150px, auto); grid-template-areas: "main logo logo" "main pal type"; gap: 14px; }
.bibento > * { min-width: 0; }
.bibento__tile { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid transparent; background: linear-gradient(var(--bi-card), var(--bi-card)) padding-box, linear-gradient(150deg, rgba(255, 179, 138, .6), rgba(255, 255, 255, .05) 45%, rgba(183, 156, 255, .5)) border-box; box-shadow: 0 40px 80px -50px #000; transition: transform .45s var(--ease), box-shadow .45s; }
.bibento__tile:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -40px rgba(240, 80, 122, .5); }
.bibento__main { grid-area: main; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(22px, 3vw, 40px); background: radial-gradient(90% 60% at 0% 0%, rgba(255, 122, 89, .2), transparent 60%), radial-gradient(80% 60% at 100% 100%, rgba(183, 156, 255, .16), transparent 60%), linear-gradient(var(--bi-card), var(--bi-card)) padding-box, linear-gradient(150deg, rgba(255, 179, 138, .7), rgba(255, 255, 255, .05) 45%, rgba(183, 156, 255, .5)) border-box; }
.bibento__main:hover { transform: none; }
.bihero__title { margin: 16px 0 12px; font-size: clamp(2.2rem, 4.2vw, 3.7rem); line-height: 1.03; letter-spacing: -.045em; color: var(--bi-text); }
.bihero__title em { font-size: 1.12em; }
.bihero__sub { max-width: 520px; margin: 0 0 22px; color: var(--bi-muted); font-size: clamp(.98rem, 1.3vw, 1.06rem); line-height: 1.7; }
.bihero__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.bibento__logo { grid-area: logo; }
.bibento__pal { grid-area: pal; }
.bibento__type { grid-area: type; }
.bibento__label { position: absolute; z-index: 3; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(20, 10, 28, .78); color: var(--bi-ivory); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bibento__label svg { color: var(--bi-gold); }
.bibento__pal .bibento__label { left: auto; right: 12px; }
.bibento__badge { position: absolute; z-index: 3; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #fff; color: #140a1c; font-size: .68rem; font-weight: 800; box-shadow: 0 10px 24px -10px #000; }
.bibento__badge svg { color: #16a34a; }
.bibento__ex { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; color: #8a7898; font-size: .74rem; letter-spacing: .06em; }
.bibento__ex svg { color: var(--bi-gold); }
/* Text tile polish: swash underline, link button, fact cards, spinning seal */
.bihero__hl { position: relative; display: inline-block; white-space: nowrap; }
.bihero__swash { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .28em; overflow: visible; fill: none; stroke: url(#bi-swash); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: biswash 1.4s var(--ease) .6s forwards; }
@keyframes biswash { to { stroke-dashoffset: 0; } }
.bihero__btns { align-items: center; gap: 14px; }
.bihero__btns .bibtn { padding: 14px 20px; }
.bihero__link { display: inline-flex; align-items: center; gap: 10px; color: var(--bi-ivory); font-weight: 800; text-decoration: none; transition: gap .3s, color .3s; }
.bihero__link > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid transparent; background: linear-gradient(var(--bi-card), var(--bi-card)) padding-box, linear-gradient(140deg, #ffb38a, #f0507a, #b79cff) border-box; color: var(--bi-gold); transition: background .3s, color .3s, transform .4s var(--ease); }
.bihero__link:hover { color: #fff; gap: 14px; }
.bihero__link:hover > span { background: linear-gradient(140deg, #ffb38a, #f0507a) padding-box, linear-gradient(140deg, #ffb38a, #f0507a) border-box; color: #2a0d14; transform: rotate(72deg); }
.bihero__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin: 26px 0 0; padding: 0; list-style: none; }
.bihero__facts li { position: relative; overflow: hidden; display: grid; justify-items: start; gap: 2px; padding: 12px 12px 12px; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(255, 255, 255, .02)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); transition: transform .35s var(--ease), border-color .3s; }
.bihero__facts li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 65%, transparent); }
.bihero__facts li > span { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 10px; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); }
.bihero__facts strong { color: var(--bi-text); font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.bihero__facts small { color: var(--bi-muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bibento { position: relative; }
.bihero__seal { position: absolute; z-index: 6; left: calc((100% - 28px) * 1.3 / 3.3 + 7px); top: calc(100% - 157px); display: grid; place-items: center; width: 96px; height: 96px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #2a1438 55%, #1f1029); box-shadow: 0 0 0 6px var(--bi-bg), 0 20px 40px -12px rgba(240, 80, 122, .6); color: var(--bi-ivory); text-decoration: none; transition: transform .4s var(--ease); }
.bihero__seal:hover { transform: scale(1.06); }
.bihero__seal > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.bihero__seal text { fill: currentColor; font-family: var(--font-display); font-size: 8.6px; font-weight: 800; }
.bihero__seal > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #ffb38a, #f0507a); color: #2a0d14; }
/* Cycling layers (four example brands, 3 s each) */
.bix__layer { position: absolute; inset: 0; opacity: 0; animation: bixcycle 12s var(--ease) infinite both; animation-delay: calc(var(--i) * 3s); }
@keyframes bixcycle { 0% { opacity: 0; transform: scale(.97); } 4%, 24% { opacity: 1; transform: none; } 29%, 100% { opacity: 0; transform: scale(1.02); } }
.bix__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-bottom: 34px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ac) 24%, transparent), transparent 60%), var(--bg); color: var(--fg); }
.bix__grid { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .8; opacity: .16; stroke-dasharray: 900; stroke-dashoffset: 900; animation: bixdraw 3s var(--ease) infinite; animation-delay: calc(var(--i) * 3s); }
@keyframes bixdraw { 0% { stroke-dashoffset: 900; } 60%, 100% { stroke-dashoffset: 0; } }
.bix__mark { position: relative; display: grid; place-items: center; width: clamp(60px, 7vw, 84px); aspect-ratio: 1; margin-bottom: 4px; }
.bix__mark i { position: absolute; }
.bix__mark--leaf i { width: 42%; height: 70%; border-radius: 100% 0; background: var(--fg); rotate: -22deg; translate: -16% 0; }
.bix__mark--leaf i + i { background: var(--ac); rotate: 22deg; translate: 16% 0; opacity: .92; }
.bix__mark--peak i { inset: 12% 0 10%; background: var(--fg); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bix__mark--peak i + i { inset: 12% 30% 58%; background: var(--ac); clip-path: polygon(50% 0, 100% 100%, 70% 80%, 50% 100%, 30% 80%, 0 100%); }
.bix__mark--plus i { inset: 0; border-radius: 30%; background: var(--fg); }
.bix__mark--plus i + i { inset: 22%; border-radius: 0; background: var(--bg); clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 38%, 38% 38%); }
.bix__mark--ring i { inset: 6%; border-radius: 50%; border: 3px solid var(--fg); }
.bix__mark--ring i + i { inset: 26%; border: 0; border-radius: 0; background: var(--ac); clip-path: polygon(0 0, 30% 0, 30% 40%, 70% 0, 100% 0, 52% 50%, 100% 100%, 70% 100%, 30% 60%, 30% 100%, 0 100%); }
.bix__name { position: relative; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1; }
.bix__tag { position: relative; color: var(--ac); font-size: .7rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; }
.bix__brand--serif .bix__name { font-family: var(--bi-serif); font-weight: 400; }
.bix__brand--bold .bix__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.bix__brand--clean .bix__name { font-family: var(--font-body); font-weight: 600; letter-spacing: -.02em; }
.bix__brand--italic .bix__name { font-family: var(--bi-serif); font-style: italic; font-weight: 400; letter-spacing: .04em; }
/* Designer cursor drifting over the logo */
.bibento__cursor { position: absolute; z-index: 4; left: 70%; top: 58%; display: flex; align-items: flex-start; pointer-events: none; animation: bicursor 9s ease-in-out infinite; }
.bibento__cursor svg { fill: var(--bi-gold); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.bibento__cursor em { margin: 16px 0 0 -4px; padding: 4px 9px; border-radius: 4px 999px 999px 999px; background: var(--bi-gold); color: #2a0d14; font-style: normal; font-size: .66rem; font-weight: 800; white-space: nowrap; }
@keyframes bicursor { 0%, 100% { translate: 0 0; } 25% { translate: -40px 36px; } 50% { translate: 40px 50px; } 75% { translate: 56px -16px; } }
/* Brand names, lit in step with the tiles */
.bix__names { position: absolute; z-index: 3; left: 50%; bottom: 12px; translate: -50% 0; display: flex; gap: 6px; margin: 0; padding: 5px; list-style: none; border-radius: 999px; background: rgba(20, 10, 28, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bix__names li { padding: 4px 11px; border-radius: 999px; color: rgba(255, 255, 255, .6); font-size: .72rem; font-weight: 700; white-space: nowrap; animation: bixname 12s linear infinite; animation-delay: calc(var(--i) * 3s - 12s); }
@keyframes bixname { 0%, 25% { color: #fff; background: var(--ac); } 26%, 100% { color: rgba(255, 255, 255, .6); background: transparent; } }
/* Palette tile */
.bibento__pal .bix__layer { display: grid; grid-template-columns: 2fr 1.2fr 1fr .7fr; }
.bix__sw { position: relative; background: var(--s); }
.bix__sw em { position: absolute; left: 10px; bottom: 10px; color: #fff; font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); writing-mode: vertical-rl; rotate: 180deg; }
/* Type tile */
.bix__type { display: flex; align-items: flex-end; gap: 12px; padding: 16px; background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--ac) 32%, transparent), transparent 60%), #fff7f2; color: #140a1c; }
.bix__type b { color: var(--ac); font-size: clamp(3rem, 5vw, 4.2rem); line-height: .85; font-weight: 700; }
.bix__type.bix__brand--serif b { font-family: var(--bi-serif); font-weight: 400; }
.bix__type.bix__brand--bold b { font-family: var(--font-display); font-weight: 800; }
.bix__type.bix__brand--clean b { font-family: var(--font-body); font-weight: 600; }
.bix__type.bix__brand--italic b { font-family: var(--bi-serif); font-style: italic; font-weight: 400; }
.bix__type > span { display: grid; gap: 2px; min-width: 0; padding-bottom: 4px; }
.bix__type strong { font-family: var(--font-display); font-size: .9rem; line-height: 1.2; }
.bix__type small { color: #6b5a78; font-size: .62rem; letter-spacing: .06em; }
/* Round logo mark, reused by the before & after slider. */
.biboard__mark { position: relative; display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #c9a227; }
.biboard__mark i { position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(201, 162, 39, .6); animation: spin 30s linear infinite; }
.biboard__mark b { color: #c9a227; font-family: var(--bi-serif); font-size: 2rem; font-weight: 400; font-style: italic; }
@keyframes spin { to { rotate: 360deg; } }

/* Iceberg ----------------------------------------------------------------------------------- */
.biice__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.biice__grid > * { min-width: 0; }
.biice__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.biice__list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .025); border-left: 3px solid var(--c); transition: background .3s, transform .3s var(--ease); }
.biice__list li:hover { background: rgba(255, 255, 255, .05); transform: translateX(6px); }
.biice__list em { flex: none; color: var(--c); font-family: var(--bi-serif); font-size: 1.5rem; line-height: 1; }
.biice__list span { display: grid; gap: 2px; }
.biice__list strong { color: var(--bi-text); font-family: var(--font-display); }
.biice__list small { color: var(--bi-muted); font-size: .9rem; line-height: 1.5; }
.biice__art { position: relative; overflow: hidden; display: grid; justify-items: center; align-content: start; min-height: 470px; padding: 34px 20px 24px; border-radius: 30px; background: linear-gradient(180deg, #1f1029 0 30%, #10283a 30%, #08141f); border: 1px solid var(--bi-line); }
.biice__sea { position: absolute; left: 0; right: 0; top: 30%; height: 2px; background: linear-gradient(90deg, transparent, rgba(160, 220, 220, .7), transparent); }
.biice__sea::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(180deg, rgba(160, 220, 220, .14), transparent); }
.biice__tip { position: relative; display: grid; place-items: end center; width: 150px; height: 104px; padding-bottom: 14px; background: linear-gradient(160deg, #ffe0d1, #ff7a59); clip-path: polygon(50% 0, 100% 100%, 0 100%); color: #2a0d14; font-family: var(--font-display); font-weight: 800; font-size: .9rem; filter: drop-shadow(0 0 30px rgba(255, 122, 89, .5)); }
.biice__wave { position: absolute; right: 18px; top: calc(30% - 28px); color: var(--bi-gold); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.biice__under { display: grid; justify-items: center; gap: 8px; width: 100%; margin-top: 4px; }
.biice__under i { display: grid; place-items: center; height: 54px; border-radius: 10px 10px 40px 40px; background: color-mix(in srgb, var(--c) 32%, #0b1f1f); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: #fff; font-style: normal; font-size: .82rem; font-weight: 700; }
.biice__under i:nth-child(1) { width: 52%; }
.biice__under i:nth-child(2) { width: 66%; }
.biice__under i:nth-child(3) { width: 80%; }
.biice__under i:nth-child(4) { width: 94%; }
.biice__deep { margin-top: 14px; color: #8fd8e6; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Included (interactive brand kit) ------------------------------------------------------------ */
.bikit { display: grid; grid-template-columns: .82fr 1.18fr; gap: 16px; align-items: stretch; }
.bikit > * { min-width: 0; }
.bikit__tabs { display: flex; flex-direction: column; gap: 8px; }
.bikit__tab { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .025); border: 1px solid var(--bi-line); color: var(--bi-muted); cursor: pointer; transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease); }
.bikit__tab:hover { background: rgba(255, 122, 89, .06); color: var(--bi-text); transform: translateX(4px); }
.bikit__tab input { position: absolute; opacity: 0; pointer-events: none; }
.bikit__no { flex: none; width: 24px; color: rgba(255, 179, 138, .5); font-family: var(--bi-serif); font-size: 1.15rem; }
.bikit__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .05); color: var(--bi-gold); transition: background .3s, color .3s, rotate .4s var(--ease); }
.bikit__name { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.3; }
.bikit__go { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; opacity: 0; translate: -6px 0; transition: opacity .3s, translate .3s var(--ease); }
.bikit__tab:has(input:checked) { background: linear-gradient(100deg, rgba(255, 122, 89, .2), rgba(240, 80, 122, .12) 60%, rgba(183, 156, 255, .1)); border-color: rgba(255, 122, 89, .55); color: #fff; box-shadow: 0 20px 40px -26px rgba(240, 80, 122, .9); }
.bikit__tab:has(input:checked)::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #ffb38a, #f0507a); }
.bikit__tab:has(input:checked) .bikit__ico { background: linear-gradient(135deg, #ffb38a, #f0507a); color: #2a0d14; rotate: -8deg; }
.bikit__tab:has(input:checked) .bikit__no { color: var(--bi-gold); }
.bikit__tab:has(input:checked) .bikit__go { opacity: 1; translate: 0 0; background: rgba(255, 255, 255, .1); color: #fff; }
.bikit__tab:has(input:focus-visible) { outline: 2px solid var(--bi-sage); outline-offset: 2px; }
.bikit__help { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 16px; border-radius: 20px; background: linear-gradient(120deg, rgba(94, 234, 212, .12), rgba(183, 156, 255, .1)); border: 1px dashed rgba(94, 234, 212, .45); color: var(--bi-text); text-decoration: none; transition: border-style .3s, transform .3s var(--ease); }
.bikit__help:hover { border-style: solid; color: var(--bi-text); transform: translateY(-2px); }
.bikit__help > span:first-child { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(94, 234, 212, .18); color: var(--bi-sage); }
.bikit__help > span:last-of-type { flex: 1; display: grid; gap: 2px; }
.bikit__help strong { font-family: var(--font-display); font-size: .95rem; }
.bikit__help small { color: var(--bi-muted); font-size: .82rem; line-height: 1.4; }
.bikit__help > svg { flex: none; color: var(--bi-sage); }
/* Stage + panels (one shown at a time) */
.bikit__stage { position: relative; display: grid; border-radius: 30px; border: 1px solid transparent; background: linear-gradient(var(--bi-card), var(--bi-card)) padding-box, linear-gradient(150deg, rgba(255, 179, 138, .6), rgba(255, 255, 255, .05) 45%, rgba(183, 156, 255, .5)) border-box; box-shadow: 0 50px 100px -60px rgba(240, 80, 122, .8); overflow: hidden; }
.bikit__panel { display: none; grid-template-rows: auto 1fr; animation: rise .5s var(--ease) both; }
.bikit:has(input[value="0"]:checked) [data-kit="0"], .bikit:has(input[value="1"]:checked) [data-kit="1"], .bikit:has(input[value="2"]:checked) [data-kit="2"], .bikit:has(input[value="3"]:checked) [data-kit="3"], .bikit:has(input[value="4"]:checked) [data-kit="4"], .bikit:has(input[value="5"]:checked) [data-kit="5"] { display: grid; }
.bikit__view { position: relative; overflow: hidden; display: grid; place-items: center; height: 280px; margin: 10px 10px 0; border-radius: 22px; background: radial-gradient(circle at 50% 40%, rgba(255, 122, 89, .16), transparent 60%), radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 18px 18px, #170c20; }
.bikit__ex { position: absolute; right: 12px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .75); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bikit__info { padding: 20px 24px 24px; }
.bikit__step { color: var(--bi-gold); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.bikit__info h3 { margin: 6px 0 6px; color: var(--bi-text); font-size: 1.45rem; }
.bikit__info p { margin: 0 0 14px; color: var(--bi-muted); line-height: 1.65; }
.bikit__info ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bikit__info li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(94, 234, 212, .08); border: 1px solid rgba(94, 234, 212, .25); color: #d9fbf5; font-size: .84rem; font-weight: 600; }
.bikit__info li svg { color: var(--bi-sage); }
/* Preview: sticky notes */
.bikit__view--notes { grid-template-columns: repeat(2, 150px); gap: 16px; align-content: center; justify-content: center; }
.bikit__note { display: grid; place-items: center; height: 96px; padding: 12px; background: var(--c); color: #2a1a10; font-family: "Segoe Print", "Bradley Hand", var(--bi-serif); font-style: normal; font-size: .9rem; line-height: 1.25; text-align: center; rotate: var(--r); box-shadow: 0 14px 22px -12px rgba(0, 0, 0, .7); animation: rise .5s var(--ease) both; }
.bikit__note:nth-child(2) { animation-delay: .1s; } .bikit__note:nth-child(3) { animation-delay: .2s; } .bikit__note:nth-child(4) { animation-delay: .3s; }
/* Preview: logo variations */
.bikit__view--logos { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; padding: 16px; place-items: stretch; }
.bikit__lg { display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 16px; --bg: #1f3d2b; --fg: #f4ead5; --ac: #c9a227; background: var(--bg); color: var(--fg); }
.bikit__lg .bix__mark { width: 44px; margin: 0; }
.bikit__lg b { font-family: var(--bi-serif); font-weight: 400; font-size: 1.9rem; }
.bikit__lg--main { grid-row: span 2; flex-direction: column; }
.bikit__lg--main .bix__mark { width: 70px; }
.bikit__lg--main b { font-size: 2.6rem; }
.bikit__lg--stack { --bg: #f4ead5; --fg: #1f3d2b; }
.bikit__lg--stack b { font-size: 1.5rem; }
.bikit__lg--icon { display: none; }
.bikit__lg--mono { --bg: #111; --fg: #fff; --ac: #fff; }
.bikit__lg--mono b { font-size: 1.5rem; }
/* Preview: colours */
.bikit__view--colours { grid-auto-flow: column; grid-template-columns: repeat(4, 64px) 120px; gap: 10px; align-items: end; justify-content: center; place-items: end center; padding-bottom: 40px; }
.bikit__sw { position: relative; width: 64px; height: 180px; border-radius: 18px; background: var(--s); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 26px -14px #000; animation: bigrowup .6s var(--ease) both; transform-origin: bottom; }
.bikit__sw:nth-child(2) { height: 150px; animation-delay: .08s; } .bikit__sw:nth-child(3) { height: 125px; animation-delay: .16s; } .bikit__sw:nth-child(4) { height: 100px; animation-delay: .24s; }
@keyframes bigrowup { from { transform: scaleY(0); } }
.bikit__sw em { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; color: var(--t, #fff); font-style: normal; font-size: .52rem; font-weight: 800; letter-spacing: .04em; writing-mode: vertical-rl; rotate: 180deg; }
.bikit__aa { display: grid; place-items: center; width: 120px; height: 150px; border-radius: 18px; background: #fff7f2; color: #1f3d2b; }
.bikit__aa b { font-family: var(--bi-serif); font-size: 4rem; font-weight: 400; line-height: 1; }
.bikit__aa small { margin-top: -18px; color: #b5546a; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* Preview: voice */
.bikit__view--voice { align-content: center; gap: 18px; }
.bikit__bubble { position: relative; max-width: 360px; padding: 22px 26px; border-radius: 26px 26px 26px 6px; background: linear-gradient(135deg, #ffb38a, #f0507a); color: #2a0d14; font-family: var(--bi-serif); font-size: 1.9rem; line-height: 1.15; text-align: center; box-shadow: 0 24px 40px -18px rgba(240, 80, 122, .9); animation: rise .5s var(--ease) both; }
.bikit__tones { display: flex; gap: 8px; justify-content: center; }
.bikit__tones i { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(183, 156, 255, .5); background: rgba(183, 156, 255, .12); color: #e6dcff; font-style: normal; font-size: .82rem; font-weight: 700; }
/* Preview: stationery */
.bikit__letter { position: absolute; left: 14%; top: 22px; display: grid; align-content: start; gap: 8px; width: 170px; height: 230px; padding: 46px 18px 0; border-radius: 6px; background: #fbf8f2; rotate: -6deg; box-shadow: 0 20px 30px -14px #000; }
.bikit__letter::before { content: ""; position: absolute; left: 18px; top: 16px; width: 40px; height: 14px; border-radius: 4px; background: #1f3d2b; }
.bikit__letter i { height: 5px; border-radius: 3px; background: #e5ddcc; }
.bikit__letter i:nth-child(2) { width: 80%; } .bikit__letter i:nth-child(4) { width: 60%; }
.bikit__card { position: absolute; display: grid; width: 200px; aspect-ratio: 1.75; border-radius: 12px; box-shadow: 0 22px 34px -14px #000; }
.bikit__card--back { right: 16%; top: 40px; place-items: center; background: #1f3d2b; rotate: 8deg; --bg: #1f3d2b; --fg: #f4ead5; --ac: #c9a227; }
.bikit__card--back .bix__mark { width: 50px; margin: 0; }
.bikit__card--front { right: 22%; top: 128px; align-content: end; gap: 2px; padding: 14px; background: linear-gradient(140deg, #f4ead5, #e9dcc0); color: #1f3d2b; rotate: -4deg; }
.bikit__card--front b { font-size: 1rem; }
.bikit__card--front small { color: #6b7d6e; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.bikit__card--front i { height: 3px; width: 50%; margin-top: 6px; border-radius: 2px; background: #c9a227; }
.bikit__card--front i + i { width: 34%; margin-top: 3px; background: #b5546a; }
/* Preview: guidelines book */
.bikit__book { position: relative; z-index: 2; display: grid; justify-items: center; align-content: center; gap: 4px; width: 170px; height: 230px; border-radius: 6px 14px 14px 6px; background: linear-gradient(90deg, #142a1d 0 8%, #1f3d2b 8%); color: #f4ead5; box-shadow: 0 30px 40px -18px #000; rotate: -4deg; --bg: #1f3d2b; --fg: #f4ead5; --ac: #c9a227; }
.bikit__book .bix__mark { width: 54px; margin: 0 0 6px; }
.bikit__book b { font-family: var(--bi-serif); font-size: 1.8rem; font-weight: 400; line-height: 1; }
.bikit__book small { color: #c9a227; font-size: .58rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.bikit__pages { position: absolute; z-index: 1; display: block; width: 170px; height: 230px; translate: 26px 6px; rotate: 6deg; }
.bikit__pages i { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; background: #fbf6ec; box-shadow: 0 10px 20px -10px #000; }
.bikit__pages i:nth-child(2) { translate: 8px 4px; background: #f1e9d9; } .bikit__pages i:nth-child(3) { translate: 16px 8px; background: #e7dcc8; }
/* Benefits under the kit */
.biinc__benefits { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 0; padding: 6px; border-radius: 22px; list-style: none; }
.biinc__benefits li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 16px; }
.biinc__benefits li + li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--bi-line); }
.biinc__benefits li > span:first-child { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(94, 234, 212, .16); color: var(--bi-sage); }
.biinc__benefits li > span:last-child { display: grid; gap: 2px; }
.biinc__benefits strong { color: var(--bi-text); font-family: var(--font-display); font-size: .96rem; }
.biinc__benefits small { color: var(--bi-muted); font-size: .86rem; line-height: 1.5; }

/* Logos ------------------------------------------------------------------------------------- */
.bilogo__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bilogo__card { display: grid; justify-items: center; gap: 4px; padding: 14px 14px 18px; border-radius: 22px; text-align: center; transition: transform .4s var(--ease); }
.bilogo__card:hover { transform: translateY(-6px); }
.bilogo__card strong { margin-top: 8px; color: var(--bi-text); font-family: var(--font-display); }
.bilogo__card small { color: var(--bi-muted); font-size: .82rem; line-height: 1.4; }
.bilogo__ex { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 1.2; border-radius: 16px; background: var(--bi-ivory); color: #1f3d2b; transition: background .4s; }
.bilogo__card:hover .bilogo__ex { background: #fff9ec; }
.bilogo__ex--word b { font-family: var(--bi-serif); font-size: 1.9rem; font-weight: 400; font-style: italic; letter-spacing: .02em; }
.bilogo__ex--letter b { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: #1f3d2b; color: #e7c66b; font-family: var(--bi-serif); font-size: 1.9rem; font-weight: 400; letter-spacing: -.04em; }
.bilogo__ex--symbol i { width: 34px; height: 54px; border-radius: 100% 0; background: #1f3d2b; rotate: -20deg; }
.bilogo__ex--symbol i + i { margin-left: -26px; background: #c9a227; rotate: 20deg; opacity: .9; }
.bilogo__ex--emblem span { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; border: 2px solid #1f3d2b; box-shadow: inset 0 0 0 4px var(--bi-ivory), inset 0 0 0 5px #c9a227; line-height: 1.1; }
.bilogo__ex--emblem b { font-family: var(--font-display); font-size: .8rem; letter-spacing: .08em; }
.bilogo__ex--emblem small { color: #b5546a; font-size: .44rem; font-weight: 700; letter-spacing: .14em; }
.bilogo__ex--combo i { width: 26px; height: 40px; border-radius: 100% 0; background: linear-gradient(160deg, #c9a227, #1f3d2b); rotate: -20deg; }
.bilogo__ex--combo b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }

/* Palette ----------------------------------------------------------------------------------- */
.bipal__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.bipal__grid > * { min-width: 0; }
.bipal__bands { display: flex; min-height: 340px; overflow: hidden; border-radius: 26px; box-shadow: 0 40px 80px -40px #000, 0 0 0 1px var(--bi-line); }
.bipal__bands span { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; padding: 20px 16px; background: var(--s); color: var(--t); transition: flex .5s var(--ease); }
.bipal__bands span:hover { flex-grow: 80 !important; }
.bipal__bands strong { font-family: var(--bi-serif); font-size: 1.9rem; font-weight: 400; line-height: 1; white-space: nowrap; }
.bipal__bands small i { font-style: normal; }
.bipal__bands small { display: grid; font-size: .68rem; font-weight: 700; letter-spacing: .08em; opacity: .85; white-space: nowrap; }
.bipal__type { display: grid; align-content: start; gap: 12px; padding: 22px; border-radius: 26px; }
.bipal__spec { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--bi-line); }
.bipal__spec b { flex: none; width: 70px; color: var(--bi-gold); font-size: 3rem; line-height: 1; }
.bipal__spec--serif b { font-family: var(--bi-serif); font-weight: 400; }
.bipal__spec--sans b { font-family: var(--font-display); font-weight: 700; color: var(--bi-ivory); letter-spacing: -.04em; }
.bipal__spec span { display: grid; gap: 2px; }
.bipal__spec strong { color: var(--bi-text); font-family: var(--font-display); }
.bipal__spec small { color: var(--bi-muted); font-size: .86rem; }
.bipal__sample { margin: 4px 0 0; color: #e9def2; font-size: 1rem; line-height: 1.6; }
.bipal__sample em { font-family: var(--bi-serif); font-size: 1.45rem; color: var(--bi-gold); }
.bipal__rule { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(94, 234, 212, .12); color: #c9f5ec; font-size: .88rem; line-height: 1.5; }
.bipal__rule svg { flex: none; margin-top: 2px; color: var(--bi-sage); }

/* Process ----------------------------------------------------------------------------------- */
.biproc__list { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: bistep; }
.biproc__list::before { content: ""; position: absolute; z-index: 0; left: 8%; right: 8%; top: 46px; height: 2px; background: linear-gradient(90deg, transparent, var(--bi-gold) 10%, var(--bi-rose) 50%, var(--bi-sage) 90%, transparent); opacity: .6; }
.biproc__step { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; padding: 18px 14px 20px; border-radius: 22px; text-align: center; transition: transform .4s var(--ease); }
.biproc__step:hover { transform: translateY(-6px); }
.biproc__dot { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffe0d1, #ff7a59 58%, #c2364f); color: #2a0d14; box-shadow: 0 0 0 6px var(--bi-card), 0 0 0 7px rgba(255, 122, 89, .4), 0 14px 26px -12px var(--bi-gold); }
.biproc__week { margin-top: 14px; color: var(--bi-rose); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.biproc__step h3 { margin: 6px 0 4px; color: var(--bi-text); font-size: 1rem; }
.biproc__step p { margin: 0; color: var(--bi-muted); font-size: .86rem; line-height: 1.5; }

/* Guide ------------------------------------------------------------------------------------- */
.biguide__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.biguide__grid > * { min-width: 0; }
.biguide__book { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 12px; border-radius: 22px; background: linear-gradient(140deg, #3b1d4f, #1e0f2a); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px var(--bi-line); perspective: 1200px; }
.biguide__book::after { content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 30px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .28), transparent); pointer-events: none; }
.biguide__page { display: grid; align-content: start; gap: 10px; min-height: 330px; padding: 22px 20px; background: #f6efe2; color: #1f3d2b; }
.biguide__page--l { border-radius: 12px 4px 4px 12px; transform-origin: right; transform: rotateY(6deg); }
.biguide__page--r { border-radius: 4px 12px 12px 4px; transform-origin: left; transform: rotateY(-6deg); background: #fbf6ec; }
.biguide__page small { color: #b5546a; font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.biguide__page strong { font-family: var(--bi-serif); font-size: 2rem; font-weight: 400; line-height: 1; }
.biguide__page em { margin-top: auto; color: #6b5d4a; font-size: .72rem; line-height: 1.45; }
.biguide__logo { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 8px; border-radius: 10px; background: #1f3d2b; color: #f4ead5; }
.biguide__logo i { width: 18px; height: 28px; border-radius: 100% 0; background: #c9a227; rotate: -20deg; }
.biguide__logo b { font-family: var(--bi-serif); font-size: 1.4rem; font-weight: 400; }
.biguide__space { position: relative; height: 54px; border: 1px dashed #c9a227; border-radius: 8px; }
.biguide__space i { position: absolute; inset: 12px 24px; border-radius: 4px; background: #1f3d2b; }
.biguide__sw { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.biguide__sw i { height: 46px; border-radius: 8px; background: var(--s); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.biguide__dont { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.biguide__dont b { display: grid; place-items: center; height: 40px; border-radius: 8px; background: rgba(31, 61, 43, .12); color: #1f3d2b; }
.biguide__dont b + b { background: rgba(181, 84, 106, .14); color: #b5546a; }
.biguide__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.biguide__list li { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--bi-line); color: #e9def2; font-size: .94rem; }
.biguide__list em { flex: none; color: var(--bi-gold); font-family: var(--bi-serif); font-size: 1.15rem; }

/* Apply ------------------------------------------------------------------------------------- */
.biapp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.biapp__tile { display: grid; gap: 12px; padding: 12px 12px 16px; border-radius: 24px; transition: transform .4s var(--ease); }
.biapp__tile:hover { transform: translateY(-6px); }
.biapp__tile strong { padding-left: 6px; color: var(--bi-text); font-family: var(--font-display); }
.biapp__art { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 16px; background: radial-gradient(circle at 30% 20%, #3a5a45, #1f3d2b 70%); }
.biapp__art b { position: relative; z-index: 2; font-family: var(--bi-serif); font-weight: 400; font-style: italic; }
.biapp__art i { position: absolute; }
/* Card: two stacked cards */
.biapp__tile--card .biapp__art i { width: 46%; aspect-ratio: 1.75; border-radius: 8px; background: #f4ead5; box-shadow: 0 16px 26px -12px #000; rotate: -10deg; translate: -14% 6%; }
.biapp__tile--card .biapp__art i + i { background: #c9a227; rotate: 6deg; translate: 18% -8%; }
.biapp__tile--card .biapp__art b { translate: 18% -8%; rotate: 6deg; color: #1f3d2b; font-size: 2rem; }
/* Sign: hanging round sign */
.biapp__tile--sign .biapp__art { background: linear-gradient(180deg, #d9cbb0, #bfae8d); }
.biapp__tile--sign .biapp__art i { top: 0; width: 60%; height: 14%; border-bottom: 6px solid #2a2016; }
.biapp__tile--sign .biapp__art i + i { top: 14%; width: 2px; height: 14%; border: 0; background: #2a2016; box-shadow: 40px 0 #2a2016, -40px 0 #2a2016; }
.biapp__tile--sign .biapp__art b { display: grid; place-items: center; width: 34%; aspect-ratio: 1; margin-top: 14%; border-radius: 50%; background: #1f3d2b; border: 4px solid #c9a227; color: #c9a227; font-size: 2.4rem; box-shadow: 0 20px 30px -14px #000; }
/* Cup */
.biapp__tile--cup .biapp__art { background: linear-gradient(160deg, #e9b9c3, #b5546a); }
.biapp__tile--cup .biapp__art i { width: 26%; height: 62%; bottom: 12%; background: #f4ead5; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); box-shadow: 0 20px 30px -10px #000; }
.biapp__tile--cup .biapp__art i + i { width: 30%; height: 8%; bottom: 72%; border-radius: 6px; background: #1f3d2b; clip-path: none; }
.biapp__tile--cup .biapp__art b { display: grid; place-items: center; width: 13%; aspect-ratio: 1; margin-top: 6%; border-radius: 50%; background: #1f3d2b; color: #c9a227; font-size: 1.1rem; }
/* Post: phone with square post */
.biapp__tile--post .biapp__art { background: linear-gradient(160deg, #2a1838, #140a1c); }
.biapp__tile--post .biapp__art i { width: 34%; height: 120%; top: 10%; border-radius: 18px; background: #f6efe2; border: 4px solid #3a2b1b; }
.biapp__tile--post .biapp__art i + i { width: 27%; height: 44%; top: 26%; border-radius: 6px; border: 0; background: linear-gradient(160deg, #1f3d2b, #c9a227); }
.biapp__tile--post .biapp__art b { margin-top: -4%; color: #f4ead5; font-size: 2rem; }
/* Bag */
.biapp__tile--bag .biapp__art { background: linear-gradient(160deg, #a9bfab, #6f8c72); }
.biapp__tile--bag .biapp__art i { width: 34%; height: 58%; bottom: 8%; border-radius: 6px 6px 10px 10px; background: #f4ead5; box-shadow: 0 20px 30px -12px rgba(0, 0, 0, .6); }
.biapp__tile--bag .biapp__art i + i { width: 18%; height: 28%; bottom: 58%; border-radius: 50% 50% 0 0; background: none; border: 4px solid #f4ead5; border-bottom: 0; box-shadow: none; }
.biapp__tile--bag .biapp__art b { margin-top: 18%; color: #1f3d2b; font-size: 2.2rem; }
/* Web: browser window */
.biapp__tile--web .biapp__art { background: linear-gradient(160deg, #3b1d4f, #1f1029); }
.biapp__tile--web .biapp__art i { width: 78%; height: 74%; border-radius: 10px; background: #f6efe2 linear-gradient(#e7dcc8, #e7dcc8) top / 100% 14% no-repeat; box-shadow: 0 20px 30px -12px #000; }
.biapp__tile--web .biapp__art i + i { width: 66%; height: 36%; top: 34%; border-radius: 6px; background: #1f3d2b; box-shadow: none; }
.biapp__tile--web .biapp__art b { margin-top: 4%; color: #c9a227; font-size: 1.8rem; }
.biapp__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; color: var(--bi-muted); font-size: .86rem; text-align: center; }
.biapp__note svg { color: var(--bi-gold); }

/* Signs (rebrand check) --------------------------------------------------------------------- */
.bisign__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; align-items: stretch; }
.bisign__grid > * { min-width: 0; }
.bisign__box { padding: clamp(22px, 3vw, 34px); border-radius: 28px; }
.bisign__box .bihead { margin-bottom: 20px; }
.bisign__list { --n: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bisign__item { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--bi-line); color: #e9def2; font-size: .93rem; line-height: 1.45; cursor: pointer; transition: background .3s, border-color .3s; }
.bisign__item:hover { background: rgba(255, 122, 89, .06); }
.bisign__item input { position: absolute; opacity: 0; pointer-events: none; }
.bisign__tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid rgba(255, 122, 89, .55); color: transparent; transition: background .3s, color .3s, transform .3s var(--ease); }
.bisign__item:has(input:checked) { background: rgba(255, 122, 89, .1); border-color: rgba(255, 122, 89, .6); color: #fff; }
.bisign__item input:checked + .bisign__tick { background: var(--bi-gold); color: #2a0d14; transform: scale(1.1); }
.bisign__item input:focus-visible + .bisign__tick { outline: 2px solid var(--bi-gold); outline-offset: 2px; }
.bisign__meter { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 6px; }
.bisign__bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bisign__bar i { display: block; height: 100%; width: calc(var(--n) / 6 * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--bi-sage), var(--bi-gold), var(--bi-rose)); transition: width .5s var(--ease); }
.bisign__msg { display: none; color: var(--bi-gold); font-family: var(--bi-serif); font-size: 1.3rem; }
.bisign__list:not([data-level]) .bisign__msg--low, .bisign__list[data-level="low"] .bisign__msg--low, .bisign__list[data-level="mid"] .bisign__msg--mid, .bisign__list[data-level="high"] .bisign__msg--high { display: block; }
.bisign__list[data-level="high"] .bisign__msg { color: var(--bi-rose); }
.bisign__side { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 122, 89, .22), transparent 60%), linear-gradient(var(--bi-card2), var(--bi-card2)) padding-box, var(--bi-edge) border-box; }
.bisign__seal { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffe0d1, #ff7a59 58%, #c2364f); color: #2a0d14; box-shadow: 0 0 0 6px rgba(255, 122, 89, .14); }
.bisign__side h3 { margin: 6px 0 0; color: var(--bi-text); font-size: 1.35rem; }
.bisign__side p { margin: 0 0 8px; color: var(--bi-muted); line-height: 1.65; }

/* Tools ------------------------------------------------------------------------------------- */
.bitools__box { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(22px, 4vw, 50px); align-items: center; padding: clamp(22px, 3.4vw, 40px); border-radius: 30px; }
.bitools__box > * { min-width: 0; }
.bitools__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.bitools__grid li { display: grid; justify-items: start; gap: 4px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid var(--bi-line); transition: transform .3s var(--ease), border-color .3s; }
.bitools__grid li:hover { transform: translateY(-4px); border-color: rgba(255, 122, 89, .5); }
.bitools__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--bg); color: var(--fg); font-family: var(--font-display); font-size: .95rem; font-weight: 800; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 50%, transparent); }
.bitools__grid strong { color: var(--bi-text); font-size: .9rem; line-height: 1.25; }
.bitools__grid small { color: var(--bi-muted); font-size: .78rem; line-height: 1.35; }

/* Packages ---------------------------------------------------------------------------------- */
.bipack__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; max-width: 760px; margin: 28px auto 0; padding: 14px 18px; border-radius: 999px; background: rgba(255, 122, 89, .06); border: 1px dashed rgba(255, 122, 89, .5); color: #e9def2; text-align: center; }
.bipack__note > .std-icon, .bipack__note > svg { color: var(--bi-gold); }
.bipack__note a { display: inline-flex; align-items: center; gap: 6px; color: var(--bi-gold); font-weight: 800; text-decoration: none; }

/* Add-ons (product tiles) --------------------------------------------------------------------- */
.biext__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.biext__tile { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 28px; background: var(--bi-card); border: 1px solid color-mix(in srgb, var(--c1) 30%, transparent); transition: transform .45s var(--ease), box-shadow .45s, border-color .3s; }
.biext__tile:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--c1) 70%, transparent); box-shadow: 0 40px 70px -40px var(--c2); }
.biext__art { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 18px; height: 200px; padding-bottom: 26px; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 50%), linear-gradient(140deg, var(--c1), var(--c2)); }
.biext__art::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 20px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .25); filter: blur(6px); }
.biext__art > span:not(.biext__ico) { position: relative; transition: transform .5s var(--ease); }
.biext__tile:hover .biext__art > span:nth-child(1) { transform: translateY(-6px) rotate(-3deg); }
.biext__tile:hover .biext__art > span:nth-child(2) { transform: translateY(-10px) rotate(4deg); }
.biext__art b { font-family: var(--bi-serif); font-style: italic; font-weight: 400; }
.biext__ico { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .25); border: 1px solid rgba(255, 255, 255, .45); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Packaging: box + paper bag */
.biext__box { display: grid; place-items: center; width: 110px; height: 96px; background: #1f3d2b; border-radius: 4px; box-shadow: inset -24px 0 0 #18321f; }
.biext__box i:first-child { position: absolute; left: 0; right: 0; top: -22px; height: 22px; background: #2c5a3e; transform: skewX(-40deg); transform-origin: bottom; }
.biext__box i:nth-child(2) { position: absolute; left: 50%; top: -22px; bottom: 0; width: 14px; translate: -50% 0; background: rgba(201, 162, 39, .85); }
.biext__box b { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f4ead5; color: #1f3d2b; font-size: 1.4rem; }
.biext__bag { display: grid; place-items: center; width: 74px; height: 92px; border-radius: 4px 4px 8px 8px; background: #f4ead5; box-shadow: inset 0 10px 0 #e6d9bd; }
.biext__bag i { position: absolute; left: 50%; top: -20px; width: 34px; height: 26px; translate: -50% 0; border: 4px solid #2a1a10; border-bottom: 0; border-radius: 20px 20px 0 0; }
.biext__bag b { color: #1f3d2b; font-size: 2rem; }
/* Merchandise: T-shirt + mug */
.biext__tee { display: grid; place-items: center; width: 130px; height: 120px; background: #141414; clip-path: polygon(30% 0, 40% 6%, 60% 6%, 70% 0, 100% 16%, 90% 38%, 80% 34%, 80% 100%, 20% 100%, 20% 34%, 10% 38%, 0 16%); }
.biext__tee b { margin-top: 10px; color: #ec4899; font-size: 2.4rem; }
.biext__mug { display: grid; place-items: center; width: 62px; height: 72px; border-radius: 6px 6px 14px 14px; background: #fff; }
.biext__mug i { position: absolute; right: -18px; top: 16px; width: 20px; height: 32px; border: 5px solid #fff; border-left: 0; border-radius: 0 16px 16px 0; }
.biext__mug b { color: #7c5cff; font-size: 1.8rem; }
/* Website: browser window */
.biext__web { display: grid; grid-template-columns: repeat(3, 8px) 1fr; grid-template-rows: 22px 1fr; column-gap: 5px; align-items: center; width: 230px; height: 138px; padding: 0 10px 10px; border-radius: 12px; background: #fbf8f2; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .5); }
.biext__web i { width: 8px; height: 8px; border-radius: 50%; background: #f87171; }
.biext__web i:nth-child(2) { background: #fbbf24; } .biext__web i:nth-child(3) { background: #34d399; }
.biext__web b { justify-self: end; color: #1f3d2b; font-size: .9rem; }
.biext__web em { grid-column: 1 / -1; align-self: stretch; border-radius: 8px; background: radial-gradient(circle at 75% 40%, rgba(201, 162, 39, .55), transparent 40%), linear-gradient(120deg, #1f3d2b, #2f5a40); }
.biext__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 20px 22px 22px; }
.biext__body h3 { margin: 0 0 6px; color: var(--bi-text); font-size: 1.2rem; }
.biext__body p { margin: 0 0 16px; color: var(--bi-muted); font-size: .94rem; line-height: 1.6; }
.biext__add { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 8px 14px 8px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); color: var(--bi-text); font-size: .86rem; font-weight: 800; text-decoration: none; transition: background .3s, color .3s; }
.biext__add span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; font-size: 1rem; line-height: 1; transition: rotate .4s var(--ease); }
.biext__add:hover { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; }
.biext__add:hover span { rotate: 90deg; background: rgba(255, 255, 255, .25); }

/* Who (Is this you?) -------------------------------------------------------------------------- */
.bifit__wrap { position: relative; }
.bifit__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.bifit__card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 18px; padding: 26px; border-radius: 28px; background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--bi-card); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.bifit__card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 65%, transparent); box-shadow: 0 34px 60px -36px var(--c); }
.bifit__card:nth-child(odd) { padding-right: 104px; }
.bifit__card:nth-child(even) { padding-left: 104px; }
.bifit__blob { grid-row: 1 / span 3; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #140a1c)); color: #160b1f; box-shadow: 0 16px 30px -14px var(--c); animation: biblob 8s ease-in-out infinite; }
@keyframes biblob { 50% { border-radius: 58% 42% 45% 55% / 40% 60% 40% 60%; } }
.bifit__tag { justify-self: start; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bifit__card h3 { margin: 10px 0 8px; color: var(--bi-text); font-size: 1.18rem; line-height: 1.35; }
.bifit__card p { display: flex; gap: 8px; margin: 0; color: var(--bi-muted); font-size: .92rem; line-height: 1.55; }
.bifit__card p span { color: var(--c); font-weight: 800; }
.bifit__no { position: absolute; left: 18px; bottom: -12px; color: color-mix(in srgb, var(--c) 14%, transparent); font-family: var(--bi-serif); font-size: 5.5rem; line-height: 1; pointer-events: none; }
.bifit__card:nth-child(even) .bifit__no { left: auto; right: 18px; }
.bifit__core { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; width: 150px; height: 150px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffb38a, #f0507a 55%, #8b5cf6); color: #fff; text-align: center; text-decoration: none; line-height: 1.05; box-shadow: 0 0 0 10px var(--bi-bg), 0 30px 60px -20px rgba(240, 80, 122, .9); transition: transform .4s var(--ease); }
.bifit__core:hover { color: #fff; transform: scale(1.06); }
.bifit__core em { font-family: var(--bi-serif); font-size: 1.35rem; }
.bifit__core strong { font-family: var(--font-display); font-size: 1.15rem; }
.bifit__core small { margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .2); font-size: .7rem; font-weight: 800; }
.bifit__ring { position: absolute; inset: -18px; border-radius: 50%; border: 1px dashed rgba(255, 179, 138, .5); animation: spin 24s linear infinite; }

/* Related (brand-in-action bento) ------------------------------------------------------------- */
.bilive__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 268px; grid-template-areas: "web web smm seo" "web web smm graphic" "ads ads content content"; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bilive__tile { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; border-radius: 26px; background: radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), linear-gradient(165deg, color-mix(in srgb, var(--c) 22%, #1f1029) 0%, #1f1029 55%, color-mix(in srgb, var(--c) 9%, #140a1c) 100%); border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.bilive__tile:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 34px 64px -36px var(--c); }
.bilive__tile--web { grid-area: web; } .bilive__tile--smm { grid-area: smm; } .bilive__tile--seo { grid-area: seo; }
.bilive__tile--graphic { grid-area: graphic; } .bilive__tile--ads { grid-area: ads; } .bilive__tile--content { grid-area: content; }
.bilive__art { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px 16px 0; overflow: hidden; }
.bilive__art > div { transition: transform .5s var(--ease); }
.bilive__tile:hover .bilive__art > div { transform: translateY(-4px) scale(1.02); }
.bilive__art .bix__mark { --bg: #1f3d2b; --fg: #f4ead5; --ac: #c9a227; margin: 0; }
.bilive__foot { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 10px; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 14%, rgba(20, 10, 28, .86)), rgba(20, 10, 28, .86)); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bilive__ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); transition: background .3s, color .3s; }
.bilive__tile:hover .bilive__ico { background: var(--c); color: #160b1f; }
.bilive__txt { flex: 1; min-width: 0; }
.bilive__txt h3 { margin: 0; font-size: .98rem; line-height: 1.25; }
.bilive__txt h3 a { color: var(--bi-text); text-decoration: none; }
.bilive__txt p { margin: 2px 0 0; color: var(--bi-muted); font-size: .8rem; line-height: 1.4; }
.bilive__go { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); transition: transform .35s var(--ease); }
.bilive__tile:hover .bilive__go { transform: rotate(-45deg); }
.bilive__note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 0 0; color: #8a7898; font-size: .8rem; text-align: center; }
.bilive__note svg { color: var(--bi-gold); }
/* Chips, stats strip and launch plan */
.bilive__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.bilive__chips i { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); color: color-mix(in srgb, var(--c) 70%, #fff); font-style: normal; font-size: .66rem; font-weight: 700; }
.bilive__tile--smm .bilive__chips, .bilive__tile--seo .bilive__chips, .bilive__tile--graphic .bilive__chips { display: none; }
.bilive__stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: -6px 0 22px; padding: 0; list-style: none; }
.bilive__stats li:not(.bilive__arrow) { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.bilive__stats strong { color: var(--c); font-family: var(--bi-serif); font-size: 1.6rem; font-weight: 400; line-height: 1; }
.bilive__stats span { color: #e9def2; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bilive__arrow { color: #8a7898; font-size: 1.1rem; }
.bilive__plan { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; align-items: center; margin-top: 18px; padding: clamp(22px, 3vw, 34px); border-radius: 30px; background: radial-gradient(60% 120% at 0% 0%, rgba(255, 122, 89, .22), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(45, 212, 191, .16), transparent 60%), linear-gradient(140deg, #2a1438, #1a0d24); border: 1px solid rgba(255, 179, 138, .3); box-shadow: 0 40px 80px -50px rgba(240, 80, 122, .7); }
.bilive__planhead { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bilive__planhead h3 { margin: 0; color: var(--bi-text); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; }
.bilive__planhead h3 em { font-family: var(--bi-serif); font-style: italic; font-weight: 400; background: var(--bi-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bilive__steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.bilive__steps li { position: relative; display: grid; gap: 4px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); transition: transform .35s var(--ease), border-color .3s; }
.bilive__steps li:hover { transform: translateY(-4px); border-color: var(--c); }
.bilive__steps span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 50%, #140a1c)); color: #160b1f; font-family: var(--font-display); font-size: .8rem; font-weight: 800; box-shadow: 0 10px 20px -10px var(--c); }
.bilive__steps strong { color: var(--bi-text); font-family: var(--font-display); font-size: 1rem; }
.bilive__steps small { color: var(--bi-muted); font-size: .84rem; line-height: 1.5; }
/* Website preview */
.bilive__browser { display: grid; grid-template-rows: auto auto 1fr; width: min(100%, 540px); height: 100%; max-height: 390px; border-radius: 14px 14px 0 0; background: #fbf8f2; overflow: hidden; box-shadow: 0 20px 40px -20px #000; align-self: end; }
.bilive__bar { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #ece5d8; }
.bilive__bar i { width: 8px; height: 8px; border-radius: 50%; background: #f87171; } .bilive__bar i:nth-child(2) { background: #fbbf24; } .bilive__bar i:nth-child(3) { background: #34d399; }
.bilive__bar em { margin-left: 10px; padding: 2px 14px; border-radius: 999px; background: #fff; color: #7a6a55; font-style: normal; font-size: .62rem; }
.bilive__nav { display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: #1f3d2b; }
.bilive__nav .bix__mark { width: 22px; --fg: #1f3d2b; }
.bilive__nav b { margin-right: auto; font-family: var(--bi-serif); font-size: 1.15rem; font-weight: 400; }
.bilive__nav > i { width: 34px; height: 5px; border-radius: 3px; background: #d8ccb6; }
.bilive__hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 14px; margin: 0 12px; padding: 18px; border-radius: 12px 12px 0 0; background: radial-gradient(circle at 80% 40%, rgba(201, 162, 39, .45), transparent 45%), #1f3d2b; color: #f4ead5; }
.bilive__hero > span:first-child { display: grid; gap: 7px; justify-items: start; }
.bilive__hero b { font-family: var(--bi-serif); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.05; }
.bilive__hero i { width: 90%; height: 5px; border-radius: 3px; background: rgba(244, 234, 213, .35); } .bilive__hero i + i { width: 65%; }
.bilive__hero em { margin-top: 4px; padding: 6px 14px; border-radius: 999px; background: #c9a227; color: #1f3d2b; font-style: normal; font-size: .7rem; font-weight: 800; }
.bilive__cup { position: relative; justify-self: center; width: 70px; height: 76px; border-radius: 0 0 26px 26px; background: #f4ead5; box-shadow: 0 16px 24px -12px #000; }
.bilive__cup::after { content: ""; position: absolute; right: -18px; top: 14px; width: 18px; height: 28px; border: 5px solid #f4ead5; border-left: 0; border-radius: 0 14px 14px 0; }
/* Social profile preview */
.bilive__phone { width: 196px; padding: 14px 12px 14px; border-radius: 26px; background: #fff; border: 6px solid #2a1438; box-shadow: 0 20px 40px -20px #000; }
.bilive__prof { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: #111; }
.bilive__av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #1f3d2b; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f0507a; }
.bilive__av .bix__mark { width: 20px; }
.bilive__prof > span:last-child { display: grid; line-height: 1.2; }
.bilive__prof b { font-size: .78rem; }
.bilive__prof small { color: #777; font-size: .6rem; }
.bilive__feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.bilive__feed i { aspect-ratio: 1; background: #1f3d2b; }
.bilive__feed i:nth-child(3n+2) { background: #c9a227; } .bilive__feed i:nth-child(4n+3) { background: #f4ead5; } .bilive__feed i:nth-child(5n) { background: #b5546a; }
.bilive__feed i:nth-child(1) { background: radial-gradient(circle at 70% 30%, #c9a227 20%, #1f3d2b 22%); }
/* Search preview */
.bilive__search { display: grid; gap: 10px; width: 100%; }
.bilive__q { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #fff; color: #3c4043; font-size: .74rem; box-shadow: 0 8px 20px -10px #000; }
.bilive__q svg { color: #4285f4; }
.bilive__res { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px -10px #000; }
.bilive__res small { color: #188038; font-size: .6rem; }
.bilive__res b { color: #1a0dab; font-size: .9rem; font-weight: 600; }
.bilive__res i { height: 5px; border-radius: 3px; background: #dadce0; } .bilive__res i + i { width: 70%; }
/* Poster preview */
.bilive__poster { position: relative; overflow: hidden; display: grid; align-content: end; width: 118px; height: 100%; max-height: 146px; padding: 12px; border-radius: 6px; background: #1f3d2b; color: #f4ead5; rotate: -4deg; box-shadow: 0 16px 28px -12px #000; }
.bilive__sun { position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: #c9a227; }
.bilive__poster small { position: relative; color: #c9a227; font-size: .5rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bilive__poster b { position: relative; font-family: var(--bi-serif); font-size: 1.7rem; font-weight: 400; line-height: .95; }
.bilive__poster em { position: relative; margin-top: 6px; font-family: var(--bi-serif); font-size: .7rem; }
/* Ad preview */
.bilive__ad { display: grid; grid-template-columns: 1fr; width: min(100%, 360px); height: 100%; max-height: 180px; grid-template-rows: auto 1fr auto; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 18px 30px -16px #000; }
.bilive__adtop { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #111; }
.bilive__adtop .bilive__av { width: 26px; height: 26px; box-shadow: none; }
.bilive__adtop .bix__mark { width: 15px; }
.bilive__adtop > span:last-child { display: grid; line-height: 1.15; }
.bilive__adtop b { font-size: .72rem; }
.bilive__adtop small { color: #65676b; font-size: .58rem; }
.bilive__adimg { display: grid; place-items: center; background: radial-gradient(circle at 75% 35%, #c9a227 0 22%, transparent 23%), linear-gradient(120deg, #1f3d2b, #2f5a40); color: #f4ead5; }
.bilive__adimg b { font-family: var(--bi-serif); font-size: 1.3rem; font-weight: 400; }
.bilive__adcta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #f0f2f5; }
.bilive__adcta small { color: #333; font-size: .64rem; }
.bilive__adcta em { padding: 4px 10px; border-radius: 6px; background: #1f3d2b; color: #fff; font-style: normal; font-size: .62rem; font-weight: 800; }
/* Article preview */
.bilive__doc { display: grid; gap: 7px; align-content: start; width: min(100%, 380px); height: 100%; max-height: 170px; padding: 16px 18px; border-radius: 12px; background: #fbf8f2; color: #1f3d2b; box-shadow: 0 18px 30px -16px #000; }
.bilive__doc small { color: #b5546a; font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.bilive__doc b { font-family: var(--bi-serif); font-size: 1.3rem; font-weight: 400; line-height: 1.15; }
.bilive__doc i { height: 5px; border-radius: 3px; background: #e5ddcc; } .bilive__doc i:nth-of-type(2) { width: 85%; } .bilive__doc i:nth-of-type(3) { width: 60%; }

/* FAQ --------------------------------------------------------------------------------------- */
.bifaq__wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.bifaq__wrap > * { min-width: 0; }
.bifaq__side { position: sticky; top: calc(var(--header-h) + 20px); }
.bifaq__ask { display: grid; gap: 4px; margin-top: 22px; padding: 20px; border-radius: 22px; }
.bifaq__ask strong { color: var(--bi-text); font-family: var(--font-display); font-size: 1.1rem; }
.bifaq__ask small { color: var(--bi-muted); }
.bifaq__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bifaq__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--bi-line); color: var(--bi-ivory); font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .3s, color .3s; }
.bifaq__btn:hover { background: var(--bi-ivory); color: #2a0d14; }
.bifaq__btn--wa { background: #25d366; border-color: #25d366; color: #052e16; }
.bifaq__btn--wa:hover { background: #4ade80; color: #052e16; }
.bifaq__list { display: grid; gap: 10px; }
.biq { border-radius: 18px; transition: box-shadow .3s; }
.biq[open] { box-shadow: 0 24px 50px -30px rgba(255, 122, 89, .5); }
.biq summary { display: flex; align-items: center; gap: 14px; padding: 18px; list-style: none; cursor: pointer; }
.biq summary::-webkit-details-marker { display: none; }
.biq__no { flex: none; width: 30px; color: var(--bi-gold); font-family: var(--bi-serif); font-size: 1.35rem; }
.biq__q { flex: 1; color: var(--bi-text); font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.biq__plus { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 122, 89, .45); transition: background .3s, transform .4s var(--ease); }
.biq__plus::before, .biq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--bi-gold); transition: transform .3s, background .3s; }
.biq__plus::after { transform: rotate(90deg); }
.biq[open] .biq__plus { background: var(--bi-gold); transform: rotate(180deg); }
.biq[open] .biq__plus::before, .biq[open] .biq__plus::after { background: #2a0d14; }
.biq[open] .biq__plus::after { transform: rotate(0); }
.biq p { margin: 0; padding: 0 18px 18px 62px; color: #ddd0e8; line-height: 1.7; }

/* CTA --------------------------------------------------------------------------------------- */
.bicta__band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(36px, 5vw, 66px) clamp(20px, 4vw, 48px); border-radius: 34px; background: radial-gradient(60% 120% at 0% 0%, rgba(255, 122, 89, .3), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(183, 156, 255, .28), transparent 60%), linear-gradient(140deg, #2c1240, #140a1c); text-align: center; box-shadow: 0 50px 100px -50px rgba(255, 122, 89, .6), 0 0 0 1px rgba(255, 122, 89, .3); }
.bicta__band::after { content: ""; position: absolute; z-index: -1; inset: 12px; border-radius: 26px; border: 1px solid rgba(255, 122, 89, .3); }
.bicta__seal { display: inline-grid; place-items: center; width: 70px; height: 70px; margin-bottom: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffe0d1, #ff7a59 58%, #c2364f); color: #2a0d14; box-shadow: 0 0 0 8px rgba(255, 122, 89, .12), 0 20px 40px -16px var(--bi-gold); animation: bifloat 6s ease-in-out infinite; }
.bicta__band h2 { max-width: 760px; margin: 0 auto 12px; color: var(--bi-text); font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.03em; line-height: 1.1; }
.bicta__band p { max-width: 560px; margin: 0 auto 24px; color: var(--bi-muted); font-size: 1.05rem; }
.bicta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Contact section on this page ----------------------------------------------------------------- */
.bi-contact .contact-split { padding-top: clamp(20px, 3vw, 40px); }

/* Packages on this page: the shared price cards re-coloured in mint, coral and lilac on plum. */
.bipack .price-card { background: linear-gradient(180deg, #24122f, #160b1f); }
.bipack .price-card:nth-child(3n+1) { --kc: #5eead4 !important; --kc2: #0f6e66 !important; }
.bipack .price-card:nth-child(3n+2) { --kc: #ff8a6b !important; --kc2: #b8264c !important; }
.bipack .price-card:nth-child(3n) { --kc: #c4b0ff !important; --kc2: #5536b0 !important; }
.bipack .price-card__count span { background: #1f1029; }
.bipack .price-card__badge { background: linear-gradient(90deg, #ffb38a, #ff7a59); color: #2a0d14; }

/* Marquee ----------------------------------------------------------------------------------- */
.bimarq { overflow: hidden; padding: 22px 0; }
.bimarq__band { display: grid; gap: 10px; width: 104%; margin-left: -2%; padding: 18px 0; background: linear-gradient(90deg, rgba(255, 122, 89, .14), rgba(240, 80, 122, .12), rgba(183, 156, 255, .14)); border-block: 1px solid var(--bi-line); rotate: -1.2deg; }
.bimarq__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bimarq__track { display: flex; width: max-content; animation: bimarq 38s linear infinite; }
.bimarq__row--rev .bimarq__track { animation-direction: reverse; animation-duration: 44s; }
.bimarq__track span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; color: var(--bi-text); font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 700; white-space: nowrap; }
.bimarq__row--rev .bimarq__track span { color: transparent; -webkit-text-stroke: 1px rgba(255, 244, 238, .55); font-family: var(--bi-serif); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.55rem); }
.bimarq__track i { color: var(--bi-gold); font-style: normal; -webkit-text-stroke: 0; }
.bimarq__row--rev .bimarq__track i { color: var(--bi-rose); }
.bimarq:hover .bimarq__track { animation-play-state: paused; }
@keyframes bimarq { to { transform: translateX(-50%); } }

/* Personality ------------------------------------------------------------------------------- */
.biper__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.biper__card { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 24px; border: 1px solid transparent; background: linear-gradient(var(--bi-card), var(--bi-card)) padding-box, linear-gradient(140deg, color-mix(in srgb, var(--p2) 70%, transparent), rgba(255, 255, 255, .04) 50%, color-mix(in srgb, var(--p1) 60%, transparent)) border-box; transition: transform .4s var(--ease), box-shadow .4s; }
.biper__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px var(--p2); }
.biper__art { position: relative; display: grid; place-items: center; flex: none; width: 104px; aspect-ratio: 1; border-radius: 20px; background: radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--p2) 70%, transparent), transparent 55%), var(--p1); overflow: hidden; }
.biper__art b { color: var(--p3); font-size: 2.6rem; line-height: 1; font-weight: 700; transition: transform .4s var(--ease); }
.biper__card:hover .biper__art b { transform: scale(1.12) rotate(-4deg); }
.biper__art i { position: absolute; bottom: 9px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); }
.biper__art i:nth-of-type(1) { left: calc(50% - 24px); background: var(--p1); }
.biper__art i:nth-of-type(2) { left: calc(50% - 6px); background: var(--p2); }
.biper__art i:nth-of-type(3) { left: calc(50% + 12px); background: var(--p3); }
.biper__card--sage .biper__art b { font-family: var(--bi-serif); font-weight: 400; }
.biper__card--creator .biper__art b { font-family: var(--bi-serif); font-style: italic; font-weight: 400; font-size: 3rem; }
.biper__card--care .biper__art b { font-family: var(--font-body); font-weight: 500; border-radius: 50%; }
.biper__card--explore .biper__art b { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.biper__card--luxe .biper__art b { font-family: var(--bi-serif); font-weight: 400; letter-spacing: .12em; font-size: 2.3rem; }
.biper__card--fun .biper__art b { font-family: var(--font-display); font-weight: 800; rotate: -8deg; text-shadow: 3px 3px 0 var(--p2); }
.biper__body { display: grid; gap: 4px; min-width: 0; }
.biper__body strong { color: var(--bi-text); font-family: var(--font-display); font-size: 1.1rem; }
.biper__body em { color: color-mix(in srgb, var(--p2) 75%, #fff); font-style: normal; font-size: .86rem; font-weight: 700; }
.biper__body small { display: flex; gap: 6px; align-items: flex-start; color: var(--bi-muted); font-size: .84rem; line-height: 1.4; }
.biper__body small svg { flex: none; margin-top: 2px; }

/* Voice ------------------------------------------------------------------------------------- */
.bivoice__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.bivoice__grid > * { min-width: 0; }
.bivoice__chat { position: relative; display: grid; gap: 14px; padding: clamp(20px, 3vw, 30px); border-radius: 30px; background: radial-gradient(80% 60% at 0% 0%, rgba(94, 234, 212, .12), transparent 60%), radial-gradient(80% 60% at 100% 100%, rgba(255, 122, 89, .14), transparent 60%), var(--bi-card); border: 1px solid var(--bi-line); }
.bivoice__topic { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--bi-muted); font-size: .8rem; font-weight: 700; }
.bivoice__topic svg { color: var(--bi-gold); }
.bivoice__msg { position: relative; max-width: 88%; padding: 14px 16px 14px; border-radius: 20px 20px 20px 6px; background: color-mix(in srgb, var(--c) 14%, var(--bi-card2)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); animation: rise .6s var(--ease) both; animation-delay: calc(var(--d) * .15s); }
.bivoice__msg:nth-of-type(2) { justify-self: end; border-radius: 20px 20px 6px 20px; }
.bivoice__tag { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--c); color: #160b1f; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bivoice__msg p { margin: 0; color: var(--bi-text); line-height: 1.55; }
.bivoice__msg:nth-of-type(2) p { font-family: var(--bi-serif); font-size: 1.2rem; line-height: 1.35; }
.bivoice__msg:nth-of-type(3) p { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
.bivoice__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bivoice__list li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--bi-line); color: #e9def2; font-size: .92rem; line-height: 1.4; }
.bivoice__list li > span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(94, 234, 212, .16); color: var(--bi-sage); }

/* Files ------------------------------------------------------------------------------------- */
.bifile__wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; align-items: stretch; }
.bifile__wrap > * { min-width: 0; }
.bifile__folder { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin-top: 18px; padding: clamp(22px, 3vw, 32px); border-radius: 6px 26px 26px 26px; background: linear-gradient(150deg, #ff8a6b, #f0507a 55%, #8b5cf6); color: #fff; box-shadow: 0 40px 80px -40px rgba(240, 80, 122, .8); }
.bifile__tab { position: absolute; left: 0; top: -18px; width: 42%; height: 20px; border-radius: 14px 14px 0 0; background: #ff8a6b; }
.bifile__seal { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .4); }
.bifile__folder h3 { margin: 4px 0 0; color: #fff; font-size: 1.5rem; }
.bifile__folder p { margin: 0; color: rgba(255, 255, 255, .9); line-height: 1.6; }
.bifile__folder ul { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.bifile__folder li { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: .92rem; }
.bifile__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bifile__item { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--bi-card); border: 1px solid var(--bi-line); transition: transform .35s var(--ease), border-color .3s; }
.bifile__item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.bifile__doc { position: relative; display: grid; place-items: end center; flex: none; width: 50px; height: 62px; padding-bottom: 9px; border-radius: 8px 16px 8px 8px; background: linear-gradient(160deg, #fff, #ece4f3); clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%); }
.bifile__doc::after { content: ""; position: absolute; right: 0; top: 0; width: 30%; height: 22%; background: #cbbfd9; border-radius: 0 0 0 6px; }
.bifile__doc b { padding: 2px 6px; border-radius: 5px; background: var(--c); color: #160b1f; font-size: .64rem; font-weight: 800; letter-spacing: .04em; }
.bifile__item > span:last-child { display: grid; gap: 2px; }
.bifile__item strong { color: var(--bi-text); font-family: var(--font-display); font-size: .98rem; }
.bifile__item small { color: var(--bi-muted); font-size: .84rem; line-height: 1.4; }

/* Before & after ------------------------------------------------------------------------------ */
.bibefore__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.bibefore__grid > * { min-width: 0; }
.bibefore__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bibefore__list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid var(--bi-line); }
.bibefore__list li > span:first-child { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #ffb38a, #f0507a); color: #2a0d14; }
.bibefore__list li > span:last-child { display: grid; gap: 2px; }
.bibefore__list strong { color: var(--bi-text); font-family: var(--font-display); }
.bibefore__list small { color: var(--bi-muted); font-size: .9rem; line-height: 1.5; }
.bibefore__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 28px; box-shadow: 0 50px 100px -50px rgba(255, 122, 89, .7), 0 0 0 1px var(--bi-line); user-select: none; }
.bibefore__side { position: absolute; inset: 0; display: grid; place-items: center; }
.bibefore__side--old { background: #fff repeating-linear-gradient(45deg, #fff 0 14px, #f3f3f3 14px 28px); }
.bibefore__side--new { background: radial-gradient(circle at 70% 20%, #2f5a40, #1f3d2b 65%); clip-path: inset(0 0 0 var(--x)); }
.bibefore__oldlogo, .bibefore__newlogo { position: absolute; top: 50%; translate: -50% -50%; }
.bibefore__oldlogo { left: 25%; display: grid; justify-items: center; gap: 2px; rotate: -3deg; }
.bibefore__oldlogo i { font-style: normal; font-size: 3rem; filter: hue-rotate(160deg) saturate(2); }
.bibefore__oldlogo b { font-family: Impact, "Arial Black", sans-serif; font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: .02em; color: #e11d48; text-shadow: 3px 3px 0 #2563eb, 5px 5px 0 #facc15; }
.bibefore__oldlogo em { font-family: "Comic Sans MS", "Segoe Print", cursive; color: #16a34a; font-size: 1.1rem; }
.bibefore__newlogo { left: 75%; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #f4ead5; text-align: center; }
.bibefore__newlogo > span:last-child { display: grid; line-height: 1.1; }
.bibefore__newlogo strong { font-family: var(--bi-serif); font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 400; }
.bibefore__newlogo small { color: #c9a227; font-size: .66rem; letter-spacing: .2em; }
.bibefore__newlogo .biboard__mark { width: 72px; height: 72px; }
.bibefore__label { position: absolute; top: 16px; padding: 6px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.bibefore__label--old { left: 16px; background: rgba(0, 0, 0, .75); color: #fff; }
.bibefore__label--new { right: 16px; background: linear-gradient(90deg, #ffb38a, #ff7a59); color: #2a0d14; }
.bibefore__ex { position: absolute; left: 16px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.bibefore__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, .4); pointer-events: none; }
.bibefore__handle i { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(135deg, #ffb38a, #f0507a); color: #2a0d14; font-style: normal; font-weight: 800; box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 12px 24px -8px #000; }
.bibefore__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.bibefore__range:focus-visible ~ .bibefore__handle i, .bibefore__frame:has(.bibefore__range:focus-visible) .bibefore__handle i { outline: 3px solid var(--bi-sage); outline-offset: 4px; }

/* Compare (versus cards) ---------------------------------------------------------------------- */
.bivs__wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 2.4vw, 30px); max-width: 1080px; margin-inline: auto; }
.bivs__wrap > * { min-width: 0; }
.bivs__card { position: relative; padding: clamp(20px, 2.6vw, 30px); border-radius: 30px; }
.bivs__card h3 { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; font-size: 1.3rem; }
.bivs__sub { margin: 0 0 16px; font-size: .94rem; }
.bivs__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bivs__list li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; }
.bivs__list li > span { display: grid; gap: 1px; font-size: .93rem; line-height: 1.35; }
.bivs__list small { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bivs__list i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: .76rem; }
/* Template card: dull, dashed, slightly tilted */
.bivs__card--old { background: #17111d; border: 1.5px dashed rgba(255, 255, 255, .14); rotate: -1.5deg; filter: saturate(.55); transition: rotate .5s var(--ease), filter .5s; }
.bivs__card--old:hover { rotate: 0deg; filter: none; }
.bivs__card--old h3 { color: #c9bdd3; }
.bivs__card--old .bivs__sub { color: #8f7f9c; }
.bivs__card--old li { background: rgba(255, 255, 255, .025); color: #9d8dab; }
.bivs__card--old li small { color: #77688a; }
.bivs__card--old li i { background: rgba(255, 255, 255, .06); color: #8d7b9c; }
.bivs__mock { position: relative; display: grid; place-items: center; height: 140px; border-radius: 20px; overflow: hidden; }
.bivs__mock--old { align-content: center; gap: 0; background: #f4f4f5 repeating-linear-gradient(45deg, #f4f4f5 0 12px, #ebebee 12px 24px); color: #1d4ed8; text-align: center; }
.bivs__clip { font-size: 2.2rem; line-height: 1; color: #f59e0b; text-shadow: 2px 2px 0 #dc2626; }
.bivs__mock--old b { font-family: Arial, Helvetica, sans-serif; font-size: 1.5rem; font-weight: 900; letter-spacing: .02em; }
.bivs__mock--old small { font-family: "Times New Roman", serif; font-style: italic; color: #6b7280; font-size: .82rem; }
.bivs__sticker { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 6px; background: #ef4444; color: #fff; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; rotate: -6deg; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
/* VS medallion with fading lines */
.bivs__vs { position: relative; display: grid; place-items: center; align-self: stretch; }
.bivs__vs::before { content: ""; position: absolute; top: 6%; bottom: 6%; left: 50%; width: 2px; translate: -50% 0; background: linear-gradient(180deg, transparent, rgba(255, 122, 89, .6), rgba(183, 156, 255, .6), transparent); }
.bivs__vs span { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, #ffb38a, #f0507a 55%, #b79cff); color: #fff; font-family: var(--bi-serif); font-size: 2.1rem; font-style: italic; line-height: 1; box-shadow: 0 0 0 8px var(--bi-bg), 0 0 0 9px rgba(255, 122, 89, .4), 0 20px 40px -10px rgba(240, 80, 122, .8); animation: bivspulse 3s ease-in-out infinite; }
@keyframes bivspulse { 50% { box-shadow: 0 0 0 8px var(--bi-bg), 0 0 0 16px rgba(255, 122, 89, .12), 0 20px 40px -10px rgba(240, 80, 122, .8); } }
/* Our card: spinning gradient edge, glow */
.bivs__card--new { overflow: hidden; isolation: isolate; color: var(--bi-text); box-shadow: 0 50px 100px -50px rgba(240, 80, 122, .9); }
.bivs__card--new::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(from 0deg, #ffb38a, #f0507a, #b79cff, #5eead4, #ffb38a); animation: spin 6s linear infinite; }
.bivs__card--new::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 28px; background: radial-gradient(100% 60% at 100% 0%, rgba(240, 80, 122, .22), transparent 60%), radial-gradient(80% 50% at 0% 100%, rgba(94, 234, 212, .12), transparent 60%), #1f1029; }
.bivs__ribbon { position: absolute; z-index: 2; right: 18px; top: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(90deg, #ffb38a, #f0507a); color: #2a0d14; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 20px -8px rgba(240, 80, 122, .8); }
.bivs__mock--new { grid-auto-flow: column; justify-content: center; gap: 16px; --bg: #1f3d2b; --fg: #f4ead5; --ac: #c9a227; background: radial-gradient(circle at 30% 30%, rgba(201, 162, 39, .3), transparent 60%), #1f3d2b; color: #f4ead5; }
.bivs__mock--new .bix__mark { width: 64px; margin: 0; }
.bivs__mock--new > span:last-child { display: grid; line-height: 1.05; }
.bivs__mock--new b { font-family: var(--bi-serif); font-size: 2.3rem; font-weight: 400; }
.bivs__mock--new small { color: #c9a227; font-size: .64rem; font-weight: 800; letter-spacing: .26em; }
.bivs__card--new h3 svg { color: var(--bi-gold); }
.bivs__card--new .bivs__sub { color: var(--bi-muted); }
.bivs__card--new li { background: rgba(255, 255, 255, .04); border: 1px solid rgba(94, 234, 212, .12); color: #fff; font-weight: 600; transition: background .3s, transform .3s var(--ease); }
.bivs__card--new li:hover { background: rgba(94, 234, 212, .08); transform: translateX(4px); }
.bivs__card--new li small { color: var(--bi-sage); }
.bivs__card--new li i { background: var(--bi-sage); color: #0b2a26; box-shadow: 0 0 0 4px rgba(94, 234, 212, .14); }
.bivs__btn { width: 100%; margin-top: 18px; }

/* Responsive ---------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.biproc__list { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
	.biproc__list::before { display: none; }
	.bilogo__grid { grid-template-columns: repeat(3, 1fr); }
	.biper__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
	.bilive__plan { grid-template-columns: minmax(0, 1fr); }
	.bilive__tile--smm .bilive__chips, .bilive__tile--seo .bilive__chips, .bilive__tile--graphic .bilive__chips { display: flex; }
	.bilive__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; grid-template-areas: "web web" "web web" "smm seo" "smm graphic" "ads ads" "content content"; }
	.biext__grid { grid-template-columns: repeat(2, 1fr); }
	.biext__tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.bifit__core { width: 120px; height: 120px; }
	.bifit__core em { font-size: 1.1rem; }
	.bifit__core strong { font-size: .95rem; }
	.bikit { grid-template-columns: minmax(0, 1fr); }
	.bikit__tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
	.bikit__help { grid-column: 1 / -1; margin-top: 0; }
	.bikit__tab:hover { transform: none; }
	.bikit__go { display: none; }
	.bivs__wrap { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
	.bivs__vs { height: 74px; }
	.bivs__vs::before { top: 50%; bottom: auto; left: 8%; right: 8%; width: auto; height: 2px; translate: 0 -50%; background: linear-gradient(90deg, transparent, rgba(255, 122, 89, .6), rgba(183, 156, 255, .6), transparent); }
	.bivs__card--old { rotate: 0deg; }
	.bihero__seal { left: auto; right: 18px; top: 18px; width: 84px; height: 84px; translate: none; box-shadow: 0 0 0 4px var(--bi-bg), 0 16px 30px -12px rgba(240, 80, 122, .6); }
	.bihero__seal > span { width: 34px; height: 34px; }
	.bibento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "main main" "logo logo" "pal type"; }
	.bibento__logo { aspect-ratio: 16 / 9; }
	.bibento__pal, .bibento__type { min-height: 170px; }
	.biice__grid, .bipal__grid, .biguide__grid, .bisign__grid, .bitools__box, .bifaq__wrap, .bivoice__grid, .bifile__wrap, .bibefore__grid { grid-template-columns: minmax(0, 1fr); }
	.biinc__grid, .biapp__grid, .birel__grid { grid-template-columns: repeat(2, 1fr); }
	.bifaq__side { position: static; }
	.biguide__book { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 760px) {
	.bifit__grid { grid-template-columns: 1fr; }
	.bifit__card:nth-child(odd), .bifit__card:nth-child(even) { padding: 22px; }
	.bifit__no, .bifit__card:nth-child(even) .bifit__no { left: auto; right: 18px; }
	.bifit__core { position: relative; left: auto; top: auto; translate: none; margin: 30px auto 0; }
	.biinc__benefits { grid-template-columns: 1fr; }
	.biinc__benefits li + li::before { left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px; }
	.bisign__list, .biguide__list { grid-template-columns: 1fr; }
	.bilogo__grid { grid-template-columns: repeat(2, 1fr); }
	.bilogo__card:last-child { grid-column: span 2; }
	.bilogo__card:last-child .bilogo__ex { aspect-ratio: 2.4; }
	.bipal__bands { min-height: 240px; }
	.bipal__bands strong { font-size: 1.4rem; }
	.biq p { padding-left: 18px; }
	.biper__grid, .bivoice__list { grid-template-columns: 1fr; }
	.biq__no { display: none; }
}
@media (max-width: 560px) {
	.bilive__steps { grid-template-columns: minmax(0, 1fr); }
	.bilive__stats { gap: 6px; }
	.bilive__stats li { padding: 6px 10px; }
	.bilive__stats strong { font-size: 1.3rem; }
	.bilive__arrow { display: none; }
	.bilive__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; grid-template-areas: none; }
	.bilive__tile { grid-area: auto !important; }
	.bilive__art { height: 210px; flex: none; }
	.bilive__tile--web .bilive__art { height: 250px; }
	.bilive__tile--smm .bilive__art { height: 260px; }
	.bilive__hero { grid-template-columns: 1fr; }
	.bilive__cup { display: none; }
	.biext__grid { grid-template-columns: 1fr; }
	.biext__art { height: 180px; }
	.bifit__card { grid-template-columns: 1fr; }
	.bifit__blob { grid-row: auto; width: 54px; height: 54px; margin-bottom: 12px; }
	.bikit__tab { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 12px 6px; text-align: center; }
	.bikit__no { display: none; }
	.bikit__name { font-size: .72rem; }
	.bikit__tab:has(input:checked)::before { left: 20%; right: 20%; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
	.bikit__help { display: none; }
	.bikit__view { height: 240px; }
	.bikit__view--notes { grid-template-columns: repeat(2, 128px); gap: 12px; }
	.bikit__note { height: 84px; font-size: .8rem; }
	.bikit__view--colours { grid-template-columns: repeat(4, 46px) 86px; gap: 7px; }
	.bikit__sw { width: 46px; }
	.bikit__aa { width: 86px; height: 120px; }
	.bikit__aa b { font-size: 3rem; }
	.bikit__lg b { font-size: 1.2rem; }
	.bikit__lg--main b { font-size: 1.9rem; }
	.bikit__bubble { font-size: 1.4rem; margin-inline: 16px; }
	.bikit__letter { left: 4%; width: 140px; height: 200px; }
	.bikit__card { width: 160px; }
	.bikit__card--back { right: 6%; }
	.bikit__card--front { right: 10%; top: 112px; }
	.bikit__info { padding: 16px 16px 20px; }
	.bikit__info h3 { font-size: 1.25rem; }
	.bivs__mock { height: 120px; }
	.bivs__ribbon { right: 12px; top: 12px; }
	.bivs__list li { padding: 9px 10px; }
	.bihero__seal { right: 12px; top: 12px; width: 66px; height: 66px; }
	.bihero__seal text { font-size: 10px; }
	.bihero__seal > span { width: 26px; height: 26px; }
	.bihero__seal > span svg { width: 14px; height: 14px; }
	.bihero__btns .bihero__link { width: auto; }
	.bihero__facts { gap: 8px; }
	.bihero__facts li { padding: 10px; }
	.bihero__facts strong { font-size: 1.1rem; }
	.bihero__facts small { font-size: .62rem; letter-spacing: .06em; }
	.bibento__logo { aspect-ratio: 4 / 3.4; }
	.bibento__pal, .bibento__type { min-height: 170px; }
	.bix__type { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; padding: 12px; }
	.bix__type b { font-size: 2.8rem; }
	.bibento__cursor { left: 64%; top: 62%; }
	.bix__type small { display: none; }
	.bibento__cursor em { display: none; }
	.bix__names li { padding: 4px 8px; font-size: .64rem; }
	.biinc__grid, .biapp__grid, .birel__grid { grid-template-columns: 1fr; }
	.biproc__list { grid-template-columns: repeat(2, 1fr); }
	.bitools__grid { grid-template-columns: repeat(2, 1fr); }
	.bihero__btns { gap: 12px 16px; }
	.biguide__page { min-height: 260px; padding: 16px 14px; }
	.biguide__page strong { font-size: 1.5rem; }
	.bipal__bands { flex-direction: column; min-height: 0; }
	.bipal__bands span { min-height: 70px; }
	.bipal__bands span:last-child { min-height: 18px; padding: 0; }
	.biice__art { min-height: 400px; }
	.bifile__grid { grid-template-columns: 1fr; }
	.biper__art { width: 86px; }
	.bibefore__frame { aspect-ratio: 1; }
	.bibefore__newlogo .biboard__mark { width: 54px; height: 54px; }
	.bivoice__msg { max-width: 100%; }
	.bibefore__newlogo small { font-size: .54rem; letter-spacing: .08em; white-space: nowrap; }
	.biice__wave { top: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.bix__layer { animation: none; }
	.bix__layer[style^="--i:0"] { opacity: 1; }
	.bix__grid { stroke-dashoffset: 0; }
	.bihero__glow, .bihero__live, .bihero__swash, .bihero__seal > svg, .bibento__cursor, .bix__grid, .bix__names li, .biboard__mark i, .bicta__seal, .bimarq__track, .bivoice__msg, .bivs__vs span, .bivs__card--new::before, .bikit__panel, .bikit__note, .bikit__sw, .bikit__bubble, .bifit__blob, .bifit__ring { animation: none; }
	.bihero__swash { stroke-dashoffset: 0; }
}