/* barktranslate.com — style.css
   DESIGN: Dark tech / modern SaaS — completely different from all previous sites
   Syne (geometric display) + Inter (body)
   Palette: #0D0F14 near-black · #1A1D26 surface · #22D3A5 teal accent · #F59E0B amber · #E8EAF0 light text
   CSS prefix: bk-
   NAV: Floating pill nav — transparent on load, pill-shaped on scroll
   HERO: Centered hero with animated dot grid bg + floating stat chips
   Very different from: tc- (warm editorial), wte- (dark indigo), lt- (coral editorial)
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --bk-dark:     #0D0F14;
  --bk-dark2:    #12141C;
  --bk-surface:  #1A1D26;
  --bk-surf2:    #20242F;
  --bk-surf3:    #272B38;
  --bk-teal:     #22D3A5;
  --bk-teal2:    #16B88E;
  --bk-teal-lo:  rgba(34,211,165,.1);
  --bk-teal-lo2: rgba(34,211,165,.06);
  --bk-amber:    #F59E0B;
  --bk-amber-lo: rgba(245,158,11,.1);
  --bk-text:     #E8EAF0;
  --bk-text2:    #A8AFBE;
  --bk-muted:    #5C6478;
  --bk-line:     rgba(255,255,255,.07);
  --bk-line2:    rgba(255,255,255,.12);

  --ff-disp: 'Syne', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, sans-serif;
  --nav-h:   64px;
  --ease:    cubic-bezier(.16,1,.3,1);
  --dur:     .18s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--ff-body); background: var(--bk-dark); color: var(--bk-text); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img  { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul,ol  { list-style: none; }
input,textarea,select { font-family: inherit; font-size: inherit; }
p { margin-bottom: .9rem; }
p:last-child { margin-bottom: 0; }
h1,h2,h3,h4 { font-family: var(--ff-disp); line-height: 1.08; }

/* ── Labels / chips ── */
.bk-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--bk-teal-lo); border: 1px solid rgba(34,211,165,.25);
  color: var(--bk-teal); border-radius: 100px;
  font-family: var(--ff-body); font-size: .58rem; font-weight: 600;
  padding: .22rem 1rem; letter-spacing: .14em; text-transform: uppercase;
}
.bk-chip--amber { background: var(--bk-amber-lo); border-color: rgba(245,158,11,.25); color: var(--bk-amber); }
.bk-chip--neutral { background: rgba(255,255,255,.04); border-color: var(--bk-line2); color: var(--bk-text2); }

/* ── Buttons ── */
.bk-btn-teal {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bk-teal); color: var(--bk-dark);
  font-family: var(--ff-body); font-size: .82rem; font-weight: 700;
  padding: .78rem 1.8rem; border-radius: 6px; border: none;
  transition: background var(--dur), box-shadow var(--dur);
  white-space: nowrap; letter-spacing: .01em;
}
.bk-btn-teal:hover { background: var(--bk-teal2); box-shadow: 0 0 0 4px var(--bk-teal-lo); }

.bk-btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; color: var(--bk-text);
  font-family: var(--ff-body); font-size: .82rem; font-weight: 600;
  padding: .76rem 1.6rem; border-radius: 6px; border: 1px solid var(--bk-line2);
  transition: border-color var(--dur), background var(--dur);
  white-space: nowrap;
}
.bk-btn-ghost:hover { border-color: rgba(34,211,165,.4); color: var(--bk-teal); background: var(--bk-teal-lo2); }

.bk-arrow-link { color: var(--bk-teal); font-family: var(--ff-body); font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; transition: gap var(--dur); }
.bk-arrow-link:hover { gap: .5rem; }

/* ══════════════════════════════════════════════════════════
   FLOATING NAV — appears as pill after scroll
   Transparent on top, pill-shaped card on scroll
   (opposite of tc- split nav, wte- sticky dark, lt- mega menu)
   ══════════════════════════════════════════════════════════ */
.bk-nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1rem 1.5rem;
  pointer-events: none;
  transition: padding var(--dur);
}
.bk-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: 0 auto;
  background: transparent;
  border-radius: 12px; padding: .5rem 1.2rem;
  border: 1px solid transparent;
  transition: background .25s, border-color .25s, box-shadow .25s, padding .25s;
  pointer-events: auto;
}
.bk-nav-wrap.bk-scrolled .bk-nav-inner {
  background: rgba(18,20,28,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-color: var(--bk-line2); box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* Logo */
.bk-nav-logo {
  font-family: var(--ff-disp); font-size: .92rem; font-weight: 800;
  color: var(--bk-text); letter-spacing: -.01em; display: flex; align-items: center; gap: .4rem;
}
.bk-logo-dot { width: 8px; height: 8px; background: var(--bk-teal); border-radius: 50%; flex-shrink: 0; animation: bk-pulse 2.4s ease-in-out infinite; }
@keyframes bk-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,211,165,.4)} 50%{box-shadow:0 0 0 5px rgba(34,211,165,0)} }

/* Center links (classic horizontal inside the pill) */
.bk-nav-center { display: flex; align-items: center; gap: .2rem; }
.bk-nav-lnk { font-family: var(--ff-body); font-size: .74rem; font-weight: 500; color: var(--bk-text2); padding: .32rem .8rem; border-radius: 6px; transition: color var(--dur), background var(--dur); white-space: nowrap; }
.bk-nav-lnk:hover { color: var(--bk-text); background: rgba(255,255,255,.05); }
.bk-nav-lnk.bk-cur { color: var(--bk-teal); }

/* Services sub-menu (hover dropdown) */
.bk-nav-drop { position: relative; }
.bk-nav-drop-btn { font-family: var(--ff-body); font-size: .74rem; font-weight: 500; color: var(--bk-text2); padding: .32rem .8rem; border-radius: 6px; cursor: pointer; background: none; border: none; display: flex; align-items: center; gap: .2rem; transition: color var(--dur), background var(--dur); }
.bk-nav-drop-btn::after { content: '▾'; font-size: .5rem; opacity: .4; }
.bk-nav-drop-btn:hover { color: var(--bk-text); background: rgba(255,255,255,.05); }
.bk-drop-panel {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--bk-surface); border: 1px solid var(--bk-line2);
  border-radius: 10px; padding: .5rem; min-width: 240px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(4px);
  transition: opacity .18s, transform .18s;
}
.bk-nav-drop:hover .bk-drop-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.bk-drop-row { display: flex; align-items: center; gap: .5rem; padding: .42rem .7rem; border-radius: 6px; font-family: var(--ff-body); font-size: .74rem; color: var(--bk-text2); transition: background var(--dur), color var(--dur); }
.bk-drop-row:hover { background: var(--bk-surf2); color: var(--bk-teal); }
.bk-drop-row-dot { width: 5px; height: 5px; background: var(--bk-teal); border-radius: 50%; opacity: .4; flex-shrink: 0; transition: opacity var(--dur); }
.bk-drop-row:hover .bk-drop-row-dot { opacity: 1; }

/* Right CTA */
.bk-nav-right { display: flex; align-items: center; gap: .6rem; }
.bk-nav-cta { font-family: var(--ff-body); font-size: .72rem; font-weight: 700; background: var(--bk-teal); color: var(--bk-dark); padding: .4rem 1rem; border-radius: 6px; transition: background var(--dur); letter-spacing: .01em; }
.bk-nav-cta:hover { background: var(--bk-teal2); }

/* Burger */
.bk-burger { display: none; flex-direction: column; gap: 5px; padding: 6px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid var(--bk-line2); border-radius: 6px; }
.bk-bbar { width: 18px; height: 1.5px; background: var(--bk-text); transition: transform .2s, opacity .2s; }
.bk-burger.bk-open .bk-bbar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.bk-burger.bk-open .bk-bbar:nth-child(2) { opacity: 0; }
.bk-burger.bk-open .bk-bbar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.bk-mob-nav { position: fixed; inset: 0; z-index: 99; background: var(--bk-dark2); padding: calc(var(--nav-h) + 1rem) 2rem 2rem; opacity: 0; pointer-events: none; transition: opacity .2s; overflow-y: auto; }
.bk-mob-nav.bk-mob-on { opacity: 1; pointer-events: auto; }
.bk-mob-lnk { font-family: var(--ff-disp); font-size: 1.6rem; font-weight: 700; color: var(--bk-text); display: block; padding: .4rem 0; border-bottom: 1px solid var(--bk-line); transition: color var(--dur); }
.bk-mob-lnk:hover { color: var(--bk-teal); }
.bk-mob-subh { font-size: .52rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bk-muted); margin: .8rem 0 .2rem; }
.bk-mob-sub { font-size: .88rem; font-weight: 500; color: var(--bk-text2); display: block; padding: .15rem 0; }

/* ══════════════════════════════════════════════════════════
   CENTERED HERO — animated dot-grid background + floating chips
   (opposite of tc- asymmetric split, wte- centered bento)
   ══════════════════════════════════════════════════════════ */
.bk-hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: calc(var(--nav-h) + 4rem) 2rem 6rem;
  position: relative; overflow: hidden;
}
/* Animated dot grid */
.bk-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(34,211,165,.12) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: bk-grid 20s linear infinite;
  pointer-events: none;
}
@keyframes bk-grid { 0%{background-position:0 0} 100%{background-position:28px 28px} }
.bk-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 60%, rgba(34,211,165,.06) 0%, transparent 60%);
  pointer-events: none;
}
.bk-hero-inner { position: relative; z-index: 1; max-width: 900px; }
.bk-hero-pre { margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.bk-hero-h1 { font-family: var(--ff-disp); font-size: clamp(3rem,8vw,8rem); font-weight: 800; color: var(--bk-text); line-height: .95; letter-spacing: -.03em; margin-bottom: 1.5rem; }
.bk-hero-h1 em { font-style: normal; color: var(--bk-teal); }
.bk-hero-h1 strong { font-weight: 800; }
.bk-hero-sub { font-size: 1.05rem; color: var(--bk-text2); max-width: 52ch; margin: 0 auto 2.5rem; line-height: 1.75; }
.bk-hero-btns { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 4rem; }
/* Floating stat chips */
.bk-hero-chips { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.bk-stat-chip { background: var(--bk-surface); border: 1px solid var(--bk-line2); border-radius: 10px; padding: .9rem 1.5rem; display: flex; align-items: center; gap: .8rem; }
.bk-stat-chip-n { font-family: var(--ff-disp); font-size: 1.8rem; font-weight: 800; color: var(--bk-text); line-height: 1; }
.bk-stat-chip-n em { color: var(--bk-teal); font-style: normal; }
.bk-stat-chip-l { font-size: .64rem; color: var(--bk-text2); line-height: 1.35; text-align: left; }

/* ── Scrolling ticker ── */
.bk-ticker { background: var(--bk-surf2); border-top: 1px solid var(--bk-line); border-bottom: 1px solid var(--bk-line); padding: .75rem 0; overflow: hidden; }
.bk-ticker-track { display: flex; gap: 4rem; white-space: nowrap; animation: bk-ticker 24s linear infinite; }
@keyframes bk-ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.bk-ticker-item { font-family: var(--ff-body); font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bk-muted); display: inline-flex; align-items: center; gap: .5rem; }
.bk-ticker-sep { width: 3px; height: 3px; background: var(--bk-teal); border-radius: 50%; opacity: .5; }

/* ── Services BENTO GRID ── */
.bk-svc-zone { padding: 8rem 1.5rem; }
.bk-svc-frame { max-width: 1280px; margin: 0 auto; }
.bk-svc-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; }
.bk-svc-h2 { font-family: var(--ff-disp); font-size: clamp(2.5rem,6vw,6rem); font-weight: 800; color: var(--bk-text); letter-spacing: -.03em; line-height: .95; }
.bk-svc-h2 em { color: var(--bk-teal); font-style: normal; }
.bk-svc-aside { font-size: .84rem; color: var(--bk-text2); max-width: 28ch; text-align: right; line-height: 1.7; }
/* Bento grid */
.bk-bento { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--bk-line); border: 1px solid var(--bk-line); border-radius: 12px; overflow: hidden; }
.bk-bento-cell {
  background: var(--bk-surface); padding: 2.2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 280px; position: relative; overflow: hidden;
  transition: background var(--dur);
}
.bk-bento-cell:hover { background: var(--bk-surf2); }
.bk-bento-cell--wide { grid-column: span 2; }
.bk-bento-cell::before { content: ''; position: absolute; top: -2rem; right: -2rem; width: 180px; height: 180px; background: radial-gradient(circle, var(--bk-teal-lo) 0%, transparent 60%); pointer-events: none; opacity: 0; transition: opacity .3s; }
.bk-bento-cell:hover::before { opacity: 1; }
.bk-bento-n { font-family: var(--ff-disp); font-size: .62rem; font-weight: 700; color: var(--bk-teal); letter-spacing: .14em; margin-bottom: 1rem; }
.bk-bento-name { font-family: var(--ff-disp); font-size: 1.25rem; font-weight: 700; color: var(--bk-text); margin-bottom: .35rem; line-height: 1.15; }
.bk-bento-desc { font-size: .74rem; color: var(--bk-text2); line-height: 1.7; max-width: 30ch; }
.bk-bento-price { font-family: var(--ff-disp); font-size: 1.5rem; font-weight: 800; color: var(--bk-text); }
.bk-bento-price em { font-size: .7rem; font-style: normal; color: var(--bk-muted); font-family: var(--ff-body); font-weight: 400; vertical-align: middle; }
.bk-bento-arr { width: 32px; height: 32px; background: var(--bk-teal-lo); border: 1px solid rgba(34,211,165,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--bk-teal); font-size: .78rem; transition: background var(--dur), transform var(--dur); }
.bk-bento-cell:hover .bk-bento-arr { background: var(--bk-teal); color: var(--bk-dark); transform: translate(2px,-2px); }
.bk-bento-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 1.5rem; }

/* ── Large statement section ── */
.bk-statement { background: var(--bk-surf2); border-top: 1px solid var(--bk-line); border-bottom: 1px solid var(--bk-line); padding: 8rem 1.5rem; }
.bk-statement-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center; }
.bk-st-h { font-family: var(--ff-disp); font-size: clamp(2.5rem,5vw,6rem); font-weight: 800; color: var(--bk-text); letter-spacing: -.03em; line-height: .92; }
.bk-st-h em { color: var(--bk-teal); font-style: normal; }
.bk-st-body { font-size: .9rem; color: var(--bk-text2); line-height: 1.85; }
.bk-st-body p { margin-bottom: .9rem; }
.bk-st-body p:last-child { margin-bottom: 0; }

/* ── Cases — horizontal cards ── */
.bk-cases-zone { padding: 8rem 1.5rem; }
.bk-cases-frame { max-width: 1280px; margin: 0 auto; }
.bk-cases-h2 { font-family: var(--ff-disp); font-size: clamp(2.5rem,6vw,6rem); font-weight: 800; color: var(--bk-text); letter-spacing: -.03em; margin-bottom: 3rem; }
.bk-cases-h2 em { color: var(--bk-amber); font-style: normal; }
.bk-case-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.bk-case-card { background: var(--bk-surface); border: 1px solid var(--bk-line2); border-radius: 12px; padding: 2rem; transition: border-color var(--dur), transform var(--dur); }
.bk-case-card:hover { border-color: rgba(34,211,165,.3); transform: translateY(-3px); }
.bk-case-tag { font-size: .52rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bk-teal); margin-bottom: .5rem; }
.bk-case-client { font-family: var(--ff-disp); font-size: 1.05rem; font-weight: 700; color: var(--bk-text); margin-bottom: .4rem; }
.bk-case-desc { font-size: .76rem; color: var(--bk-text2); line-height: 1.72; margin-bottom: 1rem; }
.bk-case-stat { background: var(--bk-surf2); border-radius: 8px; padding: .6rem 1rem; display: inline-block; }
.bk-case-stat-v { font-family: var(--ff-disp); font-size: 1.15rem; font-weight: 800; color: var(--bk-teal); }
.bk-case-stat-l { font-size: .56rem; color: var(--bk-muted); letter-spacing: .1em; text-transform: uppercase; }

/* ── Testimonials: 2-column with large quote marks ── */
.bk-tmon-zone { padding: 8rem 1.5rem; background: var(--bk-dark2); border-top: 1px solid var(--bk-line); border-bottom: 1px solid var(--bk-line); }
.bk-tmon-frame { max-width: 1280px; margin: 0 auto; }
.bk-tmon-h2 { font-family: var(--ff-disp); font-size: clamp(2.5rem,5vw,5rem); font-weight: 800; color: var(--bk-text); letter-spacing: -.03em; margin-bottom: 3rem; }
.bk-tmon-h2 em { color: var(--bk-teal); font-style: normal; }
.bk-tmon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.bk-tmon-card { background: var(--bk-surface); border: 1px solid var(--bk-line2); border-radius: 12px; padding: 2.2rem; position: relative; overflow: hidden; }
.bk-tmon-qmark { position: absolute; top: -.5rem; right: 1rem; font-family: var(--ff-disp); font-size: 8rem; color: rgba(34,211,165,.04); font-weight: 800; line-height: 1; pointer-events: none; user-select: none; }
.bk-tmon-stars { color: var(--bk-amber); font-size: .82rem; letter-spacing: .08em; margin-bottom: .8rem; }
.bk-tmon-q { font-family: var(--ff-body); font-size: .9rem; color: var(--bk-text); line-height: 1.75; margin-bottom: 1.5rem; font-style: italic; }
.bk-tmon-who { display: flex; align-items: center; gap: .8rem; }
.bk-tmon-ava { width: 36px; height: 36px; border-radius: 50%; background: var(--bk-surf2); border: 2px solid var(--bk-line2); flex-shrink: 0; }
.bk-tmon-nm { font-family: var(--ff-body); font-size: .82rem; font-weight: 700; color: var(--bk-text); }
.bk-tmon-role { font-size: .64rem; color: var(--bk-muted); }

/* ── Process: timeline with teal accents ── */
.bk-proc-zone { padding: 8rem 1.5rem; }
.bk-proc-frame { max-width: 1280px; margin: 0 auto; }
.bk-proc-h2 { font-family: var(--ff-disp); font-size: clamp(2.5rem,6vw,6rem); font-weight: 800; color: var(--bk-text); letter-spacing: -.03em; margin-bottom: 4rem; }
.bk-proc-h2 em { color: var(--bk-teal); font-style: normal; }
.bk-proc-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--bk-line); border-radius: 12px; overflow: hidden; }
.bk-proc-step { padding: 2.5rem; border-bottom: 1px solid var(--bk-line); border-right: 1px solid var(--bk-line); background: var(--bk-surface); transition: background var(--dur); }
.bk-proc-step:nth-child(2n) { border-right: none; }
.bk-proc-step:nth-last-child(-n+2) { border-bottom: none; }
.bk-proc-step:hover { background: var(--bk-surf2); }
.bk-proc-step-n { font-family: var(--ff-disp); font-size: 3rem; font-weight: 800; color: var(--bk-teal); opacity: .15; line-height: 1; margin-bottom: .4rem; }
.bk-proc-step-t { font-family: var(--ff-disp); font-size: 1.1rem; font-weight: 700; color: var(--bk-text); margin-bottom: .3rem; }
.bk-proc-step-d { font-size: .78rem; color: var(--bk-text2); line-height: 1.75; }

/* ── FAQ: accordion ── */
.bk-faq-zone { padding: 8rem 1.5rem; background: var(--bk-dark2); border-top: 1px solid var(--bk-line); }
.bk-faq-frame { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.bk-faq-left {}
.bk-faq-h2 { font-family: var(--ff-disp); font-size: clamp(2.5rem,6vw,6rem); font-weight: 800; color: var(--bk-text); letter-spacing: -.03em; line-height: .92; margin-bottom: .8rem; }
.bk-faq-h2 em { color: var(--bk-teal); font-style: normal; }
.bk-faq-sub { font-size: .86rem; color: var(--bk-text2); line-height: 1.75; margin-bottom: 1.5rem; }
.bk-faq-right { padding-top: .5rem; }
.bk-faq-item { border-bottom: 1px solid var(--bk-line); }
.bk-faq-btn { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.1rem 0; background: none; border: none; cursor: pointer; text-align: left; }
.bk-faq-q { font-family: var(--ff-body); font-size: .88rem; font-weight: 600; color: var(--bk-text); line-height: 1.4; transition: color var(--dur); }
.bk-faq-btn:hover .bk-faq-q { color: var(--bk-teal); }
.bk-faq-ico { width: 20px; height: 20px; border: 1px solid var(--bk-line2); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: .72rem; color: var(--bk-muted); flex-shrink: 0; transition: all var(--dur); margin-top: 1px; }
.bk-faq-item.bk-open .bk-faq-ico { background: var(--bk-teal); border-color: var(--bk-teal); color: var(--bk-dark); transform: rotate(45deg); }
.bk-faq-ans { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.bk-faq-ans-txt { padding: 0 0 1rem; font-size: .8rem; color: var(--bk-text2); line-height: 1.82; }
.bk-faq-item.bk-open .bk-faq-ans { max-height: 300px; }

/* ── Page masthead (inner pages) — CENTERED ── */
.bk-mast {
  padding: calc(var(--nav-h) + 5rem) 2rem 5rem;
  text-align: center; position: relative; overflow: hidden;
  background: var(--bk-dark);
  border-bottom: 1px solid var(--bk-line);
}
.bk-mast::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(34,211,165,.07) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.bk-mast::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 110%, rgba(34,211,165,.08) 0%, transparent 60%);
  pointer-events: none;
}
.bk-mast-inner { position: relative; z-index: 1; }
.bk-mast-chip { margin: 0 auto .9rem; display: block; width: fit-content; }
.bk-mast-h1 { font-family: var(--ff-disp); font-size: clamp(2.5rem,7vw,8rem); font-weight: 800; color: var(--bk-text); letter-spacing: -.03em; line-height: .94; margin-bottom: .7rem; }
.bk-mast-h1 em { color: var(--bk-teal); font-style: normal; }
.bk-mast-sub { font-size: .94rem; color: var(--bk-text2); max-width: 50ch; margin: 0 auto; line-height: 1.82; }
.bk-mast-btns { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; margin-top: 2rem; }

/* ── Pricing ── */
.bk-price-zone { padding: 5rem 1.5rem 8rem; }
.bk-price-frame { max-width: 1280px; margin: 0 auto; }
.bk-price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.bk-price-card {
  background: var(--bk-surface); border: 1px solid var(--bk-line2); border-radius: 12px;
  padding: 2.2rem; display: flex; flex-direction: column;
  transition: border-color var(--dur), transform var(--dur);
}
.bk-price-card:hover { border-color: rgba(34,211,165,.3); transform: translateY(-4px); }
.bk-price-card--feat { border-color: var(--bk-teal); background: linear-gradient(135deg, var(--bk-surf2) 0%, rgba(34,211,165,.05) 100%); }
.bk-price-card-tag { font-size: .52rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bk-teal); margin-bottom: .5rem; }
.bk-price-card-name { font-family: var(--ff-disp); font-size: 1.05rem; font-weight: 700; color: var(--bk-text); margin-bottom: .25rem; }
.bk-price-card-del { font-size: .64rem; color: var(--bk-muted); margin-bottom: 1.2rem; }
.bk-price-val { font-family: var(--ff-disp); font-size: 3rem; font-weight: 800; color: var(--bk-text); letter-spacing: -.02em; line-height: 1; margin-bottom: .1rem; }
.bk-price-val em { font-style: normal; color: var(--bk-teal); }
.bk-price-unit { font-size: .6rem; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.5rem; }
.bk-price-incl { font-size: .52rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bk-muted); margin-bottom: .6rem; }
.bk-price-incl-row { display: flex; gap: .4rem; font-size: .76rem; color: var(--bk-text2); padding: .18rem 0; border-bottom: 1px solid var(--bk-line); }
.bk-price-incl-row:last-child { border-bottom: none; }
.bk-price-incl-row::before { content: '◆'; font-size: .36rem; color: var(--bk-teal); margin-top: .35rem; flex-shrink: 0; }
.bk-price-cta { margin-top: auto; padding-top: 1.5rem; }
/* Addon pricing box */
.bk-addon-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-top: 3rem; }
.bk-addon-card { background: var(--bk-surface); border: 1px solid var(--bk-line2); border-radius: 10px; padding: 1.3rem; }
.bk-addon-n { font-size: .72rem; font-weight: 600; color: var(--bk-text); margin-bottom: .15rem; }
.bk-addon-p { font-family: var(--ff-disp); font-size: 1.3rem; font-weight: 800; color: var(--bk-teal); }

/* ── Service page ── */
.bk-svc-pg { padding: 5rem 1.5rem; }
.bk-svc-pg-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr; gap: 6rem; }
.bk-svc-body h3 { font-family: var(--ff-disp); font-size: 1.35rem; font-weight: 700; color: var(--bk-text); margin: 2.5rem 0 .6rem; }
.bk-svc-body p { font-size: .88rem; color: var(--bk-text2); line-height: 1.88; margin-bottom: .9rem; }
.bk-svc-highlight { background: var(--bk-teal-lo); border-left: 2px solid var(--bk-teal); border-radius: 0 6px 6px 0; padding: .85rem 1.2rem; margin-bottom: .6rem; font-size: .82rem; color: var(--bk-text); line-height: 1.68; }
.bk-svc-sidebar {}
.bk-svc-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; border: 1px solid var(--bk-line2); margin-bottom: 1rem; opacity: .75; }
.bk-price-box { background: var(--bk-surface); border: 1px solid var(--bk-teal); border-radius: 12px; padding: 1.8rem; margin-bottom: 1rem; }
.bk-price-box-lbl { font-size: .52rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bk-teal); margin-bottom: .05rem; }
.bk-price-box-val { font-family: var(--ff-disp); font-size: 3.5rem; font-weight: 800; color: var(--bk-text); letter-spacing: -.02em; line-height: 1; }
.bk-price-box-del { font-size: .58rem; color: var(--bk-muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.3rem; }
.bk-incl-box { background: var(--bk-surf2); border: 1px solid var(--bk-line); border-radius: 10px; padding: 1.2rem; }
.bk-incl-box-h { font-size: .52rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bk-teal); margin-bottom: .7rem; }
.bk-incl-row { display: flex; gap: .4rem; font-size: .76rem; color: var(--bk-text2); padding: .2rem 0; border-bottom: 1px solid var(--bk-line); }
.bk-incl-row:last-child { border-bottom: none; }
.bk-incl-ico { color: var(--bk-teal); font-size: .48rem; margin-top: .25rem; flex-shrink: 0; }

/* ── Builder ── */
.bk-build-wrap { padding: calc(var(--nav-h) + 4rem) 1.5rem 6rem; min-height: 100vh; background: var(--bk-dark); }
.bk-build-inner { max-width: 1280px; margin: 0 auto; }
.bk-build-hd { text-align: center; margin-bottom: 4rem; }
.bk-build-h1 { font-family: var(--ff-disp); font-size: clamp(2.5rem,7vw,8rem); font-weight: 800; color: var(--bk-text); letter-spacing: -.03em; line-height: .92; }
.bk-build-h1 em { color: var(--bk-teal); font-style: normal; }
.bk-build-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 4rem; }
.bk-build-step { margin-bottom: 2.5rem; }
.bk-step-hd { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.bk-step-n { width: 24px; height: 24px; background: var(--bk-teal); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--ff-disp); font-size: .62rem; font-weight: 800; color: var(--bk-dark); flex-shrink: 0; }
.bk-step-lbl { font-size: .52rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bk-muted); }

/* Radio rows */
.bk-radio-rows { border-top: 1px solid var(--bk-line); }
.bk-radio-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: .95rem 0; border-bottom: 1px solid var(--bk-line);
  cursor: pointer; user-select: none; transition: background var(--dur);
  position: relative;
}
.bk-radio-row::before { content:''; position:absolute; left:0;top:0;bottom:0; width:0; background:var(--bk-teal-lo2); border-radius:4px; transition:width .2s; }
.bk-radio-row:hover::before,.bk-radio-row.bk-sel::before { width:100%; }
.bk-radio-row.bk-sel::before { background:var(--bk-teal-lo); }
.bk-radio-lft { display: flex; align-items: center; gap: .7rem; position: relative; }
.bk-radio-disc { width: 14px; height: 14px; border: 1.5px solid var(--bk-line2); border-radius: 50%; background: transparent; flex-shrink: 0; transition: all var(--dur); display: flex; align-items: center; justify-content: center; }
.bk-radio-row.bk-sel .bk-radio-disc { border-color: var(--bk-teal); background: var(--bk-teal); }
.bk-radio-row.bk-sel .bk-radio-disc::after { content:''; width:5px; height:5px; background: var(--bk-dark); border-radius:50%; }
.bk-radio-nm { font-family: var(--ff-body); font-size: .9rem; font-weight: 600; color: var(--bk-text); transition: color var(--dur); }
.bk-radio-row.bk-sel .bk-radio-nm { color: var(--bk-teal); }
.bk-radio-sub { font-size: .62rem; color: var(--bk-muted); }
.bk-radio-pr { font-family: var(--ff-disp); font-size: .95rem; font-weight: 700; color: var(--bk-text2); white-space: nowrap; position: relative; }
.bk-radio-row.bk-sel .bk-radio-pr { color: var(--bk-teal); }

/* Addon rows */
.bk-addon-rows { display: flex; flex-direction: column; gap: .4rem; }
.bk-addon-row {
  background: var(--bk-surf2); border: 1px solid var(--bk-line); border-radius: 8px;
  padding: .7rem 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  transition: border-color var(--dur), background var(--dur); user-select: none;
}
.bk-addon-row:hover { border-color: rgba(34,211,165,.3); }
.bk-addon-row.bk-sel { border-color: var(--bk-teal); background: var(--bk-teal-lo); }
.bk-addon-lft { display: flex; align-items: center; gap: .5rem; }
.bk-addon-sq { width: 14px; height: 14px; border: 1.5px solid var(--bk-line2); border-radius: 3px; background: transparent; transition: all var(--dur); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk-addon-row.bk-sel .bk-addon-sq { background: var(--bk-teal); border-color: var(--bk-teal); }
.bk-addon-row.bk-sel .bk-addon-sq::after { content:'\2713'; font-size: .5rem; color: var(--bk-dark); font-weight: 900; }
.bk-addon-lbl { font-size: .82rem; font-weight: 600; color: var(--bk-text); }
.bk-addon-row-pr { font-family: var(--ff-disp); font-size: .9rem; font-weight: 700; color: var(--bk-muted); }
.bk-addon-row.bk-sel .bk-addon-row-pr { color: var(--bk-teal); }

/* Hours slider */
.bk-hrs-box { background: var(--bk-surf2); border: 1px solid var(--bk-line); border-radius: 10px; padding: 1.2rem; }
.bk-hrs-title { font-family: var(--ff-body); font-size: .88rem; font-weight: 700; color: var(--bk-text); margin-bottom: .1rem; }
.bk-hrs-sub { font-size: .68rem; color: var(--bk-muted); margin-bottom: .85rem; }
.bk-hrs-row { display: flex; align-items: center; gap: 1rem; }
.bk-hrs-num { font-family: var(--ff-disp); font-size: 2rem; font-weight: 800; color: var(--bk-teal); min-width: 2.2ch; text-align: center; }
.bk-hrs-slider { -webkit-appearance: none; appearance: none; flex: 1; height: 3px; background: var(--bk-line2); outline: none; cursor: pointer; border-radius: 2px; }
.bk-hrs-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--bk-teal); cursor: pointer; border-radius: 50%; }
.bk-hrs-rate strong { font-family: var(--ff-disp); font-size: .9rem; font-weight: 700; color: var(--bk-text); display: block; }
.bk-hrs-rate span { font-size: .56rem; color: var(--bk-muted); }

/* Summary panel */
.bk-sum { background: var(--bk-surface); border: 1px solid var(--bk-line2); border-radius: 12px; padding: 1.6rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.bk-sum-hd { font-size: .52rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bk-muted); padding-bottom: .7rem; border-bottom: 1px solid var(--bk-line); margin-bottom: .7rem; }
.bk-sum-body { min-height: 48px; margin-bottom: .6rem; }
.bk-sum-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; color: var(--bk-text2); padding: .2rem 0; border-bottom: 1px solid var(--bk-line); }
.bk-sum-row-v { font-family: var(--ff-disp); font-weight: 700; color: var(--bk-text); font-size: .88rem; white-space: nowrap; }
.bk-sum-empty { font-size: .72rem; color: var(--bk-muted); font-style: italic; }
.bk-sum-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--bk-line2); padding-top: .8rem; margin-top: .3rem; }
.bk-sum-total-lbl { font-size: .52rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bk-muted); }
.bk-sum-total-v { font-family: var(--ff-disp); font-size: 2.8rem; font-weight: 800; color: var(--bk-text); letter-spacing: -.02em; }
.bk-sum-go { width: 100%; background: var(--bk-teal); color: var(--bk-dark); font-family: var(--ff-body); font-size: .82rem; font-weight: 700; padding: .82rem; border: none; border-radius: 8px; cursor: pointer; transition: background var(--dur), box-shadow var(--dur); margin-top: 1rem; letter-spacing: .01em; }
.bk-sum-go:hover { background: var(--bk-teal2); box-shadow: 0 0 0 4px var(--bk-teal-lo); }
.bk-sum-go:disabled { opacity: .2; pointer-events: none; }

/* ── Checkout ── */
.bk-co-wrap { padding: calc(var(--nav-h) + 4rem) 1.5rem 6rem; min-height: 100vh; }
.bk-co-hd { max-width: 1280px; margin: 0 auto 3rem; text-align: center; }
.bk-co-h1 { font-family: var(--ff-disp); font-size: clamp(2.5rem,7vw,7rem); font-weight: 800; color: var(--bk-text); letter-spacing: -.03em; line-height: .92; }
.bk-co-h1 em { color: var(--bk-teal); font-style: normal; }
.bk-co-cols { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: start; }
.bk-field { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .65rem; }
.bk-field-lbl { font-size: .52rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bk-muted); }
.bk-inp,.bk-sel,.bk-ta { background: var(--bk-surface); border: 1px solid var(--bk-line2); border-radius: 8px; padding: .72rem 1rem; color: var(--bk-text); font-size: .88rem; outline: none; width: 100%; transition: border-color var(--dur); }
.bk-inp:focus,.bk-sel:focus,.bk-ta:focus { border-color: var(--bk-teal); }
.bk-inp::placeholder { color: var(--bk-muted); }
.bk-sel { -webkit-appearance: none; }
.bk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.bk-tos-row { display: flex; gap: .55rem; align-items: flex-start; font-size: .74rem; color: var(--bk-text2); cursor: pointer; margin-bottom: 1rem; line-height: 1.6; }
.bk-tos-row a { color: var(--bk-teal); }
.bk-tos-row input { accent-color: var(--bk-teal); flex-shrink: 0; margin-top: 2px; }
.bk-pay-btn { width: 100%; background: var(--bk-teal); color: var(--bk-dark); font-family: var(--ff-body); font-size: .92rem; font-weight: 700; padding: .95rem 1.5rem; border: none; border-radius: 8px; cursor: pointer; transition: background var(--dur), box-shadow var(--dur); display: flex; align-items: center; justify-content: space-between; letter-spacing: .01em; }
.bk-pay-btn:hover { background: var(--bk-teal2); box-shadow: 0 0 0 4px var(--bk-teal-lo); }
.bk-order-panel { background: var(--bk-surface); border: 1px solid var(--bk-line2); border-radius: 12px; padding: 1.8rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.bk-order-hd { font-size: .52rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bk-muted); padding-bottom: .7rem; border-bottom: 1px solid var(--bk-line); margin-bottom: .7rem; }
.bk-order-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; color: var(--bk-text2); padding: .22rem 0; border-bottom: 1px solid var(--bk-line); }
.bk-order-val { color: var(--bk-text); font-weight: 700; font-family: var(--ff-disp); }
.bk-order-total-v { font-family: var(--ff-disp); font-size: 2.8rem; font-weight: 800; color: var(--bk-teal); }

/* ── Legal ── */
.bk-legal-wrap { padding: calc(var(--nav-h) + 4rem) 1.5rem 6rem; }
.bk-legal-doc { max-width: 800px; margin: 0 auto; }
.bk-legal-doc h2 { font-family: var(--ff-disp); font-size: 1.2rem; font-weight: 700; color: var(--bk-text); margin: 2.5rem 0 .6rem; padding-top: 2rem; border-top: 1px solid var(--bk-line); }
.bk-legal-doc h2:first-child { margin-top: 0; padding-top: 0; border: none; }
.bk-legal-doc p { font-size: .88rem; color: var(--bk-text2); line-height: 1.88; margin-bottom: 1rem; }
.bk-legal-doc ul { font-size: .88rem; color: var(--bk-text2); padding-left: 1.4rem; list-style: disc; margin-bottom: 1rem; line-height: 1.78; }
.bk-legal-doc a { color: var(--bk-teal); }
.bk-legal-meta { font-size: .7rem; color: var(--bk-muted); margin-bottom: 2.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bk-line); }
.bk-ltbl { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .82rem; }
.bk-ltbl th { background: var(--bk-surf2); color: var(--bk-text); padding: .55rem 1rem; text-align: left; font-weight: 700; border: 1px solid var(--bk-line); }
.bk-ltbl td { padding: .45rem 1rem; border: 1px solid var(--bk-line); color: var(--bk-text2); }

/* ── Contact ── */
.bk-contact-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 7rem; padding: 5rem 1.5rem; align-items: start; }
.bk-det-item { margin-bottom: .9rem; }
.bk-det-lbl { font-size: .52rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bk-muted); margin-bottom: .1rem; }
.bk-det-val { font-size: .86rem; color: var(--bk-text2); }
.bk-det-val a { color: var(--bk-teal); }
.bk-form-panel { background: var(--bk-surface); border: 1px solid var(--bk-line2); border-radius: 12px; border-top: 2px solid var(--bk-teal); padding: 2.5rem; }

/* ── Footer ── */
.bk-footer { background: var(--bk-dark2); padding: 6rem 1.5rem 3rem; border-top: 1px solid var(--bk-line); }
.bk-footer-rail { max-width: 1280px; margin: 0 auto; }
.bk-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 4rem; padding-bottom: 4rem; border-bottom: 1px solid var(--bk-line); margin-bottom: 2rem; }
.bk-footer-brand { font-family: var(--ff-disp); font-size: 1.1rem; font-weight: 800; color: var(--bk-text); display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.bk-footer-blurb { font-size: .72rem; color: var(--bk-muted); max-width: 22ch; line-height: 1.65; margin-bottom: 1rem; }
.bk-footer-biz { font-size: .62rem; color: rgba(255,255,255,.12); line-height: 2.1; }
.bk-footer-biz a { color: rgba(255,255,255,.12); transition: color var(--dur); }
.bk-footer-biz a:hover { color: var(--bk-teal); }
.bk-footer-col-h { font-size: .52rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bk-muted); margin-bottom: 1rem; }
.bk-footer-nav { display: flex; flex-direction: column; gap: .55rem; }
.bk-footer-nav a { font-size: .74rem; color: rgba(255,255,255,.18); transition: color var(--dur); }
.bk-footer-nav a:hover { color: var(--bk-teal); }
.bk-footer-btm { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.bk-footer-copy { font-size: .6rem; color: rgba(255,255,255,.1); }
.bk-footer-dig  { font-size: .58rem; color: rgba(255,255,255,.1); }
.bk-footer-leg  { display: flex; gap: 1.2rem; }
.bk-footer-leg a { font-size: .6rem; color: rgba(255,255,255,.1); transition: color var(--dur); }
.bk-footer-leg a:hover { color: var(--bk-teal); }

/* ── Cookie + Chat ── */
.bk-cookie {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200;
  background: var(--bk-surface); border: 1px solid var(--bk-line2); border-top: 2px solid var(--bk-teal);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.5);
  padding: 1.2rem 1.5rem; max-width: 380px;
  transition: opacity .3s, transform .3s;
}
.bk-cookie.bk-ck-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
.bk-ck-txt { font-size: .72rem; color: var(--bk-text2); line-height: 1.65; margin-bottom: .8rem; }
.bk-ck-txt a { color: var(--bk-teal); }
.bk-ck-btns { display: flex; gap: .5rem; }
.bk-ck-yes { background: var(--bk-teal); color: var(--bk-dark); font-family: var(--ff-body); font-size: .72rem; font-weight: 700; padding: .38rem 1.1rem; border: none; border-radius: 6px; cursor: pointer; }
.bk-ck-no  { background: transparent; color: var(--bk-muted); font-family: var(--ff-body); font-size: .72rem; padding: .38rem .9rem; border: 1px solid var(--bk-line2); border-radius: 6px; cursor: pointer; }

.bk-chat-fab { position: fixed; bottom: 2rem; left: 2rem; z-index: 199; width: 50px; height: 50px; background: var(--bk-teal); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 20px rgba(34,211,165,.3); transition: transform var(--dur), box-shadow var(--dur); }
.bk-chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(34,211,165,.4); }
.bk-chat-win { position: fixed; bottom: 5.8rem; left: 2rem; z-index: 199; width: 310px; background: var(--bk-surface); border: 1px solid var(--bk-line2); border-radius: 14px; border-top: 2px solid var(--bk-teal); box-shadow: 0 20px 60px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translateY(8px) scale(.97); transform-origin: bottom left; transition: opacity var(--dur), transform var(--dur); overflow: hidden; }
.bk-chat-win.bk-chat-on { opacity: 1; pointer-events: auto; transform: none; }
.bk-chat-top { padding: .9rem 1rem; border-bottom: 1px solid var(--bk-line); display: flex; align-items: center; justify-content: space-between; }
.bk-chat-online { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; }
.bk-chat-who-n { font-family: var(--ff-disp); font-size: .88rem; font-weight: 700; color: var(--bk-text); }
.bk-chat-who-c { font-size: .56rem; color: var(--bk-muted); }
.bk-chat-x { background: none; border: none; color: var(--bk-muted); cursor: pointer; font-size: .82rem; }
.bk-chat-log { padding: .8rem; height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; }
.bk-chat-msg { max-width: 88%; padding: .45rem .85rem; font-size: .72rem; line-height: 1.55; border-radius: 10px; }
.bk-chat-msg--bot { background: var(--bk-surf2); color: var(--bk-text2); align-self: flex-start; border-bottom-left-radius: 2px; }
.bk-chat-msg--me  { background: var(--bk-teal); color: var(--bk-dark); font-weight: 600; align-self: flex-end; border-bottom-right-radius: 2px; }
.bk-chat-form { display: flex; border-top: 1px solid var(--bk-line); }
.bk-chat-inp { flex: 1; background: none; border: none; padding: .6rem .9rem; font-size: .72rem; color: var(--bk-text); outline: none; font-family: var(--ff-body); }
.bk-chat-inp::placeholder { color: var(--bk-muted); }
.bk-chat-send { background: var(--bk-teal); color: var(--bk-dark); border: none; padding: 0 .9rem; font-family: var(--ff-body); font-size: .62rem; font-weight: 700; cursor: pointer; letter-spacing: .04em; }

/* ── Confirm pages ── */
.bk-confirm-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 4rem 2rem; background: var(--bk-dark); }
.bk-confirm-box { max-width: 440px; width: 100%; background: var(--bk-surface); border: 1px solid var(--bk-line2); border-top: 2px solid var(--bk-teal); border-radius: 16px; padding: 3.5rem; text-align: center; }

/* ── Reveal animation ── */
.bk-rev { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.bk-rev.bk-vis { opacity: 1; transform: none; }
.bk-d1{transition-delay:.06s}.bk-d2{transition-delay:.12s}.bk-d3{transition-delay:.18s}

.bk-pt { padding-top: var(--nav-h); }

/* ── About ── */
.bk-about-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8rem; padding: 6rem 1.5rem; }

/* ── Responsive ── */
@media(max-width:1080px) {
  .bk-nav-center { display: none; }
  .bk-burger { display: flex; }
  .bk-bento { grid-template-columns: 1fr 1fr; }
  .bk-bento-cell--wide { grid-column: span 2; }
  .bk-case-cards,.bk-price-grid { grid-template-columns: 1fr 1fr; }
  .bk-tmon-grid { grid-template-columns: 1fr; }
  .bk-proc-rail { grid-template-columns: 1fr; }
  .bk-proc-step { border-right: none !important; }
  .bk-faq-frame,.bk-statement-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .bk-footer-grid { grid-template-columns: 1fr 1fr; }
  .bk-build-cols,.bk-co-cols,.bk-svc-pg-grid,.bk-contact-grid,.bk-about-grid { grid-template-columns: 1fr; }
  .bk-svc-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .bk-svc-aside { text-align: left; }
}
@media(max-width:720px) {
  .bk-bento { grid-template-columns: 1fr; }
  .bk-bento-cell--wide { grid-column: span 1; }
  .bk-case-cards,.bk-price-grid,.bk-addon-grid { grid-template-columns: 1fr; }
  .bk-hero-chips { flex-direction: column; align-items: center; }
  .bk-footer-grid { grid-template-columns: 1fr; }
  .bk-pair { grid-template-columns: 1fr; }
}