/* THEME: Midnight Cinema — dark, film-studio feel */
:root {
  --bg: #0f0c0c; --bg2: #161112; --card: #1b1516; --ink: #f4efe9; --ink2: #cdbfb8; --mu: #9a8b84; --line: #2e2526;
  --ox: #e0453a; --red: #ff5a4a; --sun: #e0453a;
  --silk-base: .13,.1,.1; --silk-shade: .035,.028,.028; --silk-tint: .6,.13,.1; --silk-spec: .14;
  color-scheme: dark;
}
html, html body { background: #0f0c0c; color: var(--ink); }
.grain { mix-blend-mode: screen; opacity: .05; }
.top img, .ft-brand img { content: url("media/logo-km-light.svg"); }
.top > .wrap { background: rgba(22, 17, 17, .62) !important; border-color: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px -20px rgba(0, 0, 0, .8) !important; }
.top nav > a:not(.btn) { color: var(--ink2) !important; }
.top nav > a:not(.btn):hover, .top nav > a:not(.btn).is-active { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
.btn.pri:not(#book .btn) { background: #f4efe9; color: #141010 !important; }
.btn.wa:not(#book .btn) { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .16); color: var(--ink); }
.lang { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.lang button[aria-pressed="true"] { background: #f4efe9; color: #141010; }
.flt { background: rgba(28, 22, 22, .82) !important; color: var(--ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .07) !important; }
.vf i { border-color: rgba(244, 239, 233, .45) !important; } .vf span { color: rgba(244, 239, 233, .7) !important; } .vf .rec { color: var(--red) !important; }
.towns { background: rgba(255, 255, 255, .04) !important; }
.has-silk .alt, .alt { background: linear-gradient(to bottom, rgba(22, 17, 18, 0), rgba(22, 17, 18, .55) 160px, rgba(22, 17, 18, .55) calc(100% - 160px), rgba(22, 17, 18, 0)) !important; }
#pricing .plan { background: linear-gradient(180deg, rgba(32, 25, 26, .92), rgba(24, 19, 20, .9)) !important; border-color: rgba(255, 255, 255, .07) !important; color: var(--ink); }
#pricing .plan .btn.wa { background: transparent !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, .2) !important; }
#pricing .plan .btn.wa:hover { background: #f4efe9 !important; color: #141010 !important; }
#pricing .plan.pop { background: radial-gradient(120% 70% at 100% 0%, rgba(224, 69, 58, .5), transparent 60%), linear-gradient(160deg, #2a1514, #160c0c) !important; }
#pricing .price strong { color: #fff !important; }
.plans-note { background: rgba(255, 255, 255, .04) !important; border-color: rgba(224, 69, 58, .35) !important; }
.per span, #pricing .plan li svg { background: rgba(224, 69, 58, .14) !important; color: #ff9b8f !important; }
#work::before, #team::before { -webkit-text-stroke-color: rgba(244, 239, 233, .06) !important; }
.mq-band.b2 { background: #f4efe9; color: #141010; } .b2 .mq-track i { color: var(--ox); }
footer.ft::before { background: linear-gradient(to bottom, rgba(18, 14, 14, 0), rgba(18, 14, 14, .85) 120px) !important; }
.ft-col h3 { color: var(--ox); }
.cookie { background: rgba(28, 22, 22, .95); color: var(--ink); border-color: rgba(255, 255, 255, .08); }
.ck-btn { background: #f4efe9; color: #141010; }
#reel .btn:not(.pri) { background: rgba(255, 255, 255, .06) !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, .18) !important; }

/* the "Let's talk" section (form card + 3D bubbles) keeps its original look: restore the original palette inside it */
#book { --bg: #f6f2ec; --bg2: #efe9e1; --card: #ffffff; --ink: #141010; --ink2: #463d3a; --mu: #7f726c; --line: #e3dad0;
  --ox: #7a1f1c; --red: #b8322a; --sun: #8f2620; color-scheme: light; }

/* problem section: the clock card stays light, so its text stays dark */
.pc2 { color: #141010; }
.pc2 p { color: #463d3a; }
.pc2 .pn { color: #141010; }

/* mobile menu, sticky call bar, social chips, legal pages on dark */
.menu-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.menu-btn span { background: #f4efe9; }
.mmenu { background: rgba(22, 17, 17, .96) !important; border-color: rgba(255, 255, 255, .08) !important; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8) !important; }
.mmenu a { color: var(--ink); }
.mmenu a:hover, .mmenu a.is-active { background: rgba(255, 255, 255, .06); color: #fff; }
.mmenu .mm-cta { background: #f4efe9 !important; color: #141010 !important; }
.mcta { background: rgba(22, 17, 17, .86) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08) !important; }
.top nav .soc .tt, .ft-soc .tt { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) !important; }
.legal-card { background: rgba(28, 22, 22, .78) !important; border-color: rgba(255, 255, 255, .08) !important; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8) !important; }
.legal p, .legal li, .legal td { color: var(--ink2); }
.legal h2, .legal b { color: var(--ink); }
.legal a { color: #ff8b7f; }
.legal th { color: var(--mu); }