/* ==========================================================================
   myTool.studio — Marketing / public presentation styles
   Shared by:  /            (public/index.html)
               /digital-menu (public/digital-menu.html)
               /booking      (public/booking.html)
   Builds on /css/design-system.css (fonts + tokens + viewport containment).
   Public marketing only — no application logic, no auth, no data.
   ========================================================================== */

:root{
  --mk-ink:#141b2d;
  --mk-ink-soft:#3d4a63;
  --mk-muted:#5a6683;
  --mk-line:#e4e8f1;
  --mk-line-strong:#d3d9e6;
  --mk-canvas:#f6f7fb;
  --mk-surface:#ffffff;
  --mk-surface-2:#f0f2f8;
  --mk-brand:#4d54e6;
  --mk-brand-ink:#3a41c8;
  --mk-brand-wash:#eef0ff;
  --mk-accent-grad:linear-gradient(120deg,#18aee0 0%,#3a5fe6 52%,#6a48e6 100%);
  /* text-safe gradient (drops the pale cyan so gradient headings keep >=4.5:1 on light) */
  --mk-text-grad:linear-gradient(110deg,#2f57e0 0%,#4b3fd6 60%,#6a3fd0 100%);
  /* darker gradient for the full-bleed CTA band so white text passes AA */
  --mk-cta-grad:linear-gradient(120deg,#1f76b8 0%,#2f45c8 48%,#5b32bd 100%);
  --mk-shadow-sm:0 1px 2px rgba(20,27,45,.06),0 4px 14px rgba(20,27,45,.05);
  --mk-shadow:0 10px 30px rgba(20,27,45,.10);
  --mk-shadow-lg:0 30px 70px rgba(20,27,45,.18);
  --mk-radius:16px;
  --mk-radius-lg:24px;
  --mk-content:1160px;
  --mk-gutter:clamp(20px,5vw,64px);
  --mk-section:clamp(46px,6vw,84px);

  /* Digital Menu mood — mirrors the real dark menu UI */
  --dm-bg:#101a2b;
  --dm-bg-2:#16233b;
  --dm-cream:#f3efe6;
  --dm-cream-soft:#c9c6bd;
  --dm-amber:#e2a63d;
  --dm-line:rgba(243,239,230,.14);

  /* Booking mood — mirrors the real warm booking UI */
  --bk-bg:#faf5ec;
  --bk-surface:#ffffff;
  --bk-ink:#2b2016;
  --bk-muted:#8a7b64;
  --bk-amber:#b3792b;
  --bk-line:#ece2d0;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  color:var(--mk-ink);background:var(--mk-canvas);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Space Grotesk','DM Sans',sans-serif;line-height:1.08;letter-spacing:-.02em;margin:0;color:var(--mk-ink)}
p{margin:0}
:where(a,button):focus-visible{outline:2px solid var(--mk-brand);outline-offset:3px;border-radius:6px}

/* ---------- layout primitives ---------- */
.mk-wrap{max-width:var(--mk-content);margin-inline:auto;padding-inline:var(--mk-gutter)}
.mk-section{padding-block:var(--mk-section)}
.mk-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mk-brand-ink);
  margin:0 0 18px;
}
.mk-eyebrow::before{content:"";width:22px;height:2px;background:var(--mk-brand);border-radius:2px}
.mk-h2{font-size:clamp(28px,4.4vw,46px);letter-spacing:-.03em}
.mk-lead{font-size:clamp(16px,1.6vw,19px);color:var(--mk-ink-soft);max-width:56ch;margin-top:16px}
.mk-kicker{color:var(--mk-muted);font-size:15px}

/* ---------- buttons ---------- */
.mk-btn{
  --_bg:var(--mk-brand);--_fg:#fff;--_bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border-radius:12px;border:1px solid var(--_bd);
  background:var(--_bg);color:var(--_fg);font:600 15.5px/1 'Space Grotesk',sans-serif;
  letter-spacing:-.01em;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  box-shadow:0 8px 20px rgba(77,84,230,.24);
}
.mk-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(77,84,230,.32)}
.mk-btn:active{transform:translateY(0)}
.mk-btn--ghost{--_bg:var(--mk-surface);--_fg:var(--mk-ink);--_bd:var(--mk-line-strong);box-shadow:var(--mk-shadow-sm)}
.mk-btn--ghost:hover{box-shadow:var(--mk-shadow);background:var(--mk-surface)}
.mk-btn--lg{min-height:56px;padding:0 30px;font-size:16.5px}
.mk-btn--on-dark{--_bg:var(--dm-cream);--_fg:#101a2b;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.mk-btn--on-warm{--_bg:var(--bk-amber);--_fg:#fff;box-shadow:0 12px 28px rgba(179,121,43,.32)}
.mk-arrow{transition:transform .18s ease}
.mk-btn:hover .mk-arrow,.mk-textlink:hover .mk-arrow{transform:translateX(3px)}
.mk-textlink{display:inline-flex;align-items:center;gap:7px;font:600 15px/1 'Space Grotesk',sans-serif;color:var(--mk-brand-ink)}
.mk-textlink::after{content:"";position:relative}

/* ---------- header ---------- */
.mk-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--mk-canvas) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,background .2s ease;
}
.mk-header.is-stuck{border-color:var(--mk-line);background:color-mix(in srgb,var(--mk-canvas) 92%,transparent)}
.mk-nav{display:flex;align-items:center;gap:28px;max-width:var(--mk-content);margin-inline:auto;padding:14px var(--mk-gutter)}
.mk-logo{display:flex;align-items:center;gap:11px;margin-right:auto;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em}
.mk-logo b{color:var(--mk-brand-ink);font-weight:700}
.mk-logo-mark{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:19px;background:var(--mk-accent-grad);
  box-shadow:0 6px 16px rgba(58,95,230,.32);font-family:'Space Grotesk',sans-serif;
}
.mk-navlinks{display:flex;align-items:center;gap:26px;font-size:15px;color:var(--mk-ink-soft)}
.mk-navlinks a{padding:6px 0;position:relative;transition:color .16s ease}
.mk-navlinks a:hover{color:var(--mk-ink)}
.mk-navlinks a[aria-current]{color:var(--mk-ink);font-weight:600}
.mk-nav-cta{display:flex;align-items:center;gap:10px}
.mk-nav .mk-btn{min-height:44px;padding:0 18px;font-size:14.5px;box-shadow:none}
.mk-nav .mk-btn:hover{box-shadow:0 8px 18px rgba(77,84,230,.24)}
.mk-nav-login{display:none}   /* mobile-only entry; desktop uses the ghost button */
.mk-burger{display:none;width:44px;height:44px;border:1px solid var(--mk-line-strong);border-radius:11px;background:var(--mk-surface);align-items:center;justify-content:center;cursor:pointer}
.mk-burger svg{width:20px;height:20px}

@media (max-width:860px){
  .mk-navlinks{
    position:absolute;left:var(--mk-gutter);right:var(--mk-gutter);top:calc(100% + 8px);
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;
    background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:16px;
    box-shadow:var(--mk-shadow-lg);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s ease;
  }
  .mk-navlinks a{padding:13px 12px;border-radius:10px;min-height:44px;display:flex;align-items:center}
  .mk-navlinks a:hover{background:var(--mk-surface-2)}
  .mk-nav[data-open] .mk-navlinks{opacity:1;visibility:visible;transform:none}
  .mk-burger{display:inline-flex}
  .mk-nav-cta .mk-btn{display:none}
  .mk-nav-login{display:flex;color:var(--mk-brand-ink);font-weight:600}
}

/* ---------- hero ---------- */
.mk-hero{padding-block:clamp(40px,6vw,76px) clamp(28px,4vw,52px);position:relative;overflow-x:clip}
.mk-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,5vw,64px);align-items:center}
.mk-hero h1{font-size:clamp(38px,6vw,66px);letter-spacing:-.035em;max-width:21ch;text-wrap:balance}
.mk-hero h1 .mk-grad{color:#3a41c8}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mk-hero h1 .mk-grad{background:var(--mk-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.mk-hero .mk-lead{font-size:clamp(17px,1.7vw,20px);max-width:48ch}
.mk-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.mk-hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 26px;margin-top:34px;padding-top:26px;border-top:1px solid var(--mk-line)}
.mk-hero-proof div{font-size:13.5px;color:var(--mk-muted);line-height:1.45}
.mk-hero-proof b{display:block;font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--mk-ink);letter-spacing:-.02em;margin-bottom:3px}
@media (max-width:560px){.mk-hero-proof{grid-template-columns:1fr 1fr;gap:16px}}
@media (max-width:380px){.mk-hero-proof{grid-template-columns:1fr}}

/* device frames */
.mk-frame{position:relative}
.mk-browser{
  border-radius:14px;background:var(--mk-surface);border:1px solid var(--mk-line-strong);
  box-shadow:var(--mk-shadow-lg);overflow:hidden;
}
.mk-browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--mk-surface-2);border-bottom:1px solid var(--mk-line)}
.mk-browser-bar i{width:10px;height:10px;border-radius:50%;background:var(--mk-line-strong)}
.mk-browser-bar span{margin-left:12px;font-size:12px;color:var(--mk-muted);background:var(--mk-surface);padding:4px 12px;border-radius:7px;border:1px solid var(--mk-line);flex:1;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-browser-body{background:#fff}
.mk-phone{
  width:248px;border-radius:34px;background:#0d1526;padding:10px;
  box-shadow:var(--mk-shadow-lg);border:1px solid rgba(255,255,255,.06);
}
.mk-phone-screen{border-radius:26px;overflow:hidden;background:#fff;aspect-ratio:9/19.3;position:relative}
.mk-phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:44%;height:20px;background:#0d1526;border-radius:0 0 12px 12px;z-index:5}

.mk-hero-stage{position:relative;min-height:360px}
.mk-hero-stage .mk-browser{position:relative;z-index:1}
.mk-hero-stage .mk-phone{position:absolute;right:-6px;bottom:-34px;width:212px;z-index:3}
.mk-hero-glow{position:absolute;inset:-12% -8% -18% -4%;background:radial-gradient(60% 60% at 70% 30%,rgba(77,84,230,.16),transparent 70%);z-index:0;filter:blur(6px)}

@media (max-width:900px){
  .mk-hero-grid{grid-template-columns:1fr;gap:34px}
  .mk-hero h1{max-width:100%}
  .mk-hero-stage{max-width:540px}
  .mk-hero-stage .mk-phone{right:-4px;bottom:-22px;width:180px}
}

/* ---------- "cosa trovi" tiles ---------- */
.mk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.mk-tile{
  position:relative;display:flex;flex-direction:column;
  padding:24px 22px 22px;border:1px solid var(--mk-line);border-radius:var(--mk-radius-lg);
  background:var(--mk-surface);box-shadow:var(--mk-shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.mk-tile:hover{transform:translateY(-4px);box-shadow:var(--mk-shadow-lg);border-color:var(--mk-line-strong)}
/* the "su misura" tile is deliberately NOT a solid product card:
   dashed outline, flat, sketch-like — it is a possibility, not a shipped app. */
.mk-tile--custom{background:transparent;border-style:dashed;border-color:var(--mk-line-strong);box-shadow:none}
.mk-tile--custom:hover{box-shadow:var(--mk-shadow-sm);background:var(--mk-surface)}
.mk-tile-badge{
  align-self:flex-start;font:600 10.5px/1 'Space Grotesk',sans-serif;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mk-brand-ink);background:var(--mk-brand-wash);padding:6px 10px;border-radius:999px;margin-bottom:20px;
}
.mk-tile--custom .mk-tile-badge{color:#8a5a08;background:transparent;border:1px dashed #d8b978}
.mk-tile-ico{width:44px;height:44px;color:var(--mk-brand);margin-bottom:14px}
.mk-tile--custom .mk-tile-ico{color:#a86a12}
.mk-tile-ico svg{width:100%;height:100%}
.mk-tile b{font-family:'Space Grotesk',sans-serif;font-size:19px;letter-spacing:-.01em;margin-bottom:8px}
.mk-tile p{font-size:14.5px;color:var(--mk-ink-soft);line-height:1.55;flex:1}
.mk-tile-go{margin-top:16px;font:600 14px/1 'Space Grotesk',sans-serif;color:var(--mk-brand-ink);display:inline-flex;gap:7px;align-items:center}
.mk-tile--custom .mk-tile-go{color:#a86a12}
.mk-tile-go span{transition:transform .18s ease}
.mk-tile:hover .mk-tile-go span{transform:translateX(3px)}
@media (max-width:900px){.mk-tiles{grid-template-columns:1fr;gap:14px}.mk-tile{padding:22px 20px}.mk-tile-badge{margin-bottom:14px}}

/* steps heading — breaks between steps, never mid-arrow */
.mk-steps-h{display:flex;flex-wrap:wrap;gap:.28em .5em;align-items:baseline}
.mk-steps-h span[aria-hidden]{color:var(--mk-brand);font-weight:400}
.mk-steps-h.mk-h2 span{white-space:nowrap}
.mk-center .mk-steps-h{justify-content:center}

/* ---------- generic section header ---------- */
.mk-shead{max-width:62ch}
.mk-shead.mk-center{margin-inline:auto;text-align:center}
.mk-shead.mk-center .mk-eyebrow{justify-content:center}

/* ---------- app showcase (split: copy + device composition) ---------- */
.mk-showcase{position:relative;overflow:hidden}
.mk-showcase-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,72px);align-items:center}
.mk-showcase--flip .mk-showcase-grid{direction:rtl}
.mk-showcase--flip .mk-showcase-grid>*{direction:ltr}
.mk-showcase h2{font-size:clamp(26px,3.6vw,40px)}
.mk-feature-list{display:grid;gap:14px;margin-top:24px;padding:0;list-style:none}
.mk-feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--mk-ink-soft);list-style:none}
.mk-feature-list li::before{content:"";flex:0 0 20px;height:20px;margin-top:1px;border-radius:6px;background:var(--mk-brand-wash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d54e6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center}
.mk-feature-list b{color:var(--mk-ink);font-weight:600}
.mk-showcase-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

/* Media composition.
   Two devices (browser + phone) => overlapping "two views" composition.
   One device => simply centred, no absolute positioning. */
.mk-duo{position:relative;display:grid;place-items:center;gap:20px}
.mk-duo .mk-browser{width:100%;max-width:540px}
.mk-duo .mk-phone{width:min(74%,240px)}
/* solo phone: give it presence instead of floating in whitespace */
.mk-duo:not(:has(.mk-browser)) .mk-phone{width:min(70%,270px);z-index:1}
.mk-duo:not(:has(.mk-browser))::before{
  content:"";position:absolute;inset:8% 12%;z-index:0;border-radius:40px;
  background:radial-gradient(60% 55% at 50% 42%,rgba(77,84,230,.14),transparent 72%);
}
/* two-device duo: browser full width, phone tucked under its bottom corner
   (overlaps only ~40px of browser padding), connector pill flows below.
   Nothing critical in either UI is covered. */
.mk-duo:has(.mk-browser):has(.mk-phone){display:grid;gap:0;place-items:stretch}
.mk-duo:has(.mk-browser):has(.mk-phone) .mk-browser{width:100%;max-width:none}
.mk-duo:has(.mk-browser):has(.mk-phone) .mk-phone{
  width:190px;justify-self:end;margin:-34px -6px 0 0;position:relative;z-index:4;
}
.mk-duo--right:has(.mk-browser):has(.mk-phone) .mk-phone{justify-self:start;margin-right:0;margin-left:-6px}
.mk-duo-link{
  justify-self:start;margin:16px 0 0;position:relative;z-index:5;
  font:600 12px/1.4 'Space Grotesk',sans-serif;color:var(--mk-brand-ink);text-align:left;
  background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:13px;
  padding:11px 14px;box-shadow:var(--mk-shadow);display:flex;align-items:center;gap:9px;max-width:min(340px,88%);
}
.mk-duo--right .mk-duo-link{justify-self:end}
.mk-duo-link svg{width:16px;height:16px;flex:0 0 auto;color:var(--mk-brand)}
@media (max-width:960px){
  .mk-showcase-grid{grid-template-columns:1fr;gap:34px}
  .mk-showcase--flip .mk-showcase-grid{direction:ltr}
  .mk-duo{gap:16px}
  .mk-duo:has(.mk-browser):has(.mk-phone) .mk-phone{width:196px;justify-self:end;margin:-52px 16px 0 0}
  .mk-duo--right:has(.mk-browser):has(.mk-phone) .mk-phone{justify-self:start;margin-left:16px}
  .mk-duo-link{margin:8px auto 0;justify-self:center;max-width:none}
}

/* ---------- Digital Menu recreated UI (dark) ---------- */
.mk-dmui{background:var(--dm-bg);color:var(--dm-cream);font-family:'DM Sans',sans-serif;height:100%;overflow:hidden;padding:18px 16px 22px}
.mk-dmui-hero{text-align:center;padding:6px 0 14px}
.mk-dmui-logo{width:56px;height:56px;border-radius:14px;margin:0 auto 10px;background:var(--mk-accent-grad);display:grid;place-items:center;color:#fff;font:700 24px 'Space Grotesk',sans-serif}
.mk-dmui-kick{font:600 10px/1 'Space Grotesk',sans-serif;letter-spacing:.22em;color:var(--dm-cream-soft);text-transform:uppercase}
.mk-dmui-name{font:700 22px/1.1 'Space Grotesk',sans-serif;margin:8px 0 4px;letter-spacing:-.01em}
.mk-dmui-sub{font-size:12px;color:var(--dm-cream-soft)}
.mk-dmui-search{margin:12px 0 12px;padding:9px 12px;border-radius:12px;border:1px solid var(--dm-line);color:var(--dm-cream-soft);font-size:12px;background:rgba(255,255,255,.03)}
.mk-dmui-pills{display:flex;gap:7px;overflow:hidden;margin-bottom:16px}
.mk-dmui-pill{font:600 11px/1 'Space Grotesk',sans-serif;padding:8px 13px;border-radius:999px;border:1px solid var(--dm-line);color:var(--dm-cream);white-space:nowrap}
.mk-dmui-pill.is-on{background:var(--dm-amber);color:#1a1206;border-color:var(--dm-amber)}
.mk-dmui-cat{font:700 14px/1 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:14px 0 3px}
.mk-dmui-cat span{color:var(--dm-cream-soft);font-weight:500}
.mk-dmui-catnote{font-size:11px;color:var(--dm-cream-soft);margin-bottom:8px}
.mk-dmui-row{display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:start;padding:11px 0;border-bottom:1px solid var(--dm-line)}
.mk-dmui-thumb{width:38px;height:38px;border-radius:9px;background-size:cover;background-position:center}
.mk-dmui-pname{font:700 12.5px/1.2 'Space Grotesk',sans-serif}
.mk-dmui-pdesc{font-size:11px;color:var(--dm-cream-soft);margin-top:3px;line-height:1.4}
.mk-dmui-alg{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.mk-dmui-alg span{font:600 8.5px/1 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dm-cream-soft)}
.mk-dmui-price{font:700 13px 'Space Grotesk',sans-serif;color:var(--dm-amber);white-space:nowrap}
.mk-dmui-var{display:flex;justify-content:space-between;font-size:11px;color:var(--dm-cream-soft);margin-top:4px}
.mk-dmui-var b{color:var(--dm-cream);font-weight:600}

/* ---------- Digital Menu admin recreated (light panel) ---------- */
.mk-admui{background:var(--mk-surface);height:100%;overflow:hidden;font-size:13px}
.mk-admui-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--mk-line)}
.mk-admui-top .dot{width:26px;height:26px;border-radius:8px;background:var(--mk-accent-grad)}
.mk-admui-top b{font-family:'Space Grotesk',sans-serif;font-size:13.5px}
.mk-admui-top .mk-admui-tag{margin-left:auto;font:600 10px/1 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8a5a08;background:#fff7e6;padding:5px 9px;border-radius:7px}
.mk-admui-body{display:grid;grid-template-columns:118px 1fr;height:100%}
.mk-admui-side{border-right:1px solid var(--mk-line);padding:12px 8px;display:grid;gap:2px;align-content:start}
.mk-admui-side a{padding:8px 10px;border-radius:8px;color:var(--mk-muted);font-size:12px}
.mk-admui-side a.is-on{background:var(--mk-brand-wash);color:var(--mk-brand-ink);font-weight:600}
.mk-admui-main{padding:16px 18px;overflow:hidden}
.mk-admui-h{font-family:'Space Grotesk',sans-serif;font-size:16px;margin-bottom:3px}
.mk-admui-hint{color:var(--mk-muted);font-size:12px;margin-bottom:14px}
.mk-admui-card{border:1px solid var(--mk-line);border-radius:12px;padding:12px 13px;margin-bottom:10px;display:grid;grid-template-columns:40px 1fr auto;gap:11px;align-items:center;box-shadow:var(--mk-shadow-sm)}
.mk-admui-card .th{width:40px;height:40px;border-radius:9px;background-size:cover;background-position:center;background-color:var(--mk-surface-2)}
.mk-admui-card b{font-family:'Space Grotesk',sans-serif;font-size:13px}
.mk-admui-card .sub{color:var(--mk-muted);font-size:11.5px;margin-top:2px}
.mk-admui-card .price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px}
.mk-admui-chip{display:inline-flex;font:600 10px/1 'Space Grotesk',sans-serif;padding:5px 8px;border-radius:6px;background:var(--success-soft,#e8f7f2);color:var(--success,#16856a);letter-spacing:.03em}
.mk-admui-btnrow{display:flex;gap:8px;margin-top:6px}
.mk-admui-btn{font:600 11.5px/1 'Space Grotesk',sans-serif;padding:8px 12px;border-radius:9px;border:1px solid var(--mk-line-strong);color:var(--mk-ink)}
.mk-admui-btn.pri{background:var(--mk-brand);color:#fff;border-color:transparent}

/* ---------- Booking recreated UI (warm) ---------- */
.mk-bkui{background:var(--bk-bg);color:var(--bk-ink);height:100%;overflow:hidden;padding:16px 15px}
.mk-bkui-top{display:flex;align-items:center;gap:9px;padding-bottom:12px}
.mk-bkui-top .lg{width:30px;height:30px;border-radius:9px;background:var(--bk-amber);display:grid;place-items:center;color:#fff;font:700 14px 'Space Grotesk',sans-serif}
.mk-bkui-top b{font:700 13px 'Space Grotesk',sans-serif}
.mk-bkui-top small{display:block;color:var(--bk-muted);font-size:10px}
.mk-bkui-steps{display:flex;gap:5px;margin-bottom:14px}
.mk-bkui-steps i{height:4px;border-radius:3px;background:var(--bk-line);flex:1}
.mk-bkui-steps i.on{background:var(--bk-amber)}
.mk-bkui-h{font:700 18px/1.1 'Space Grotesk',sans-serif}
.mk-bkui-hint{color:var(--bk-muted);font-size:12px;margin:3px 0 14px}
.mk-bkui-card{background:var(--bk-surface);border:1px solid var(--bk-line);border-radius:13px;padding:13px 14px;margin-bottom:9px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mk-bkui-card.is-on{border-color:var(--bk-amber);box-shadow:0 0 0 3px rgba(179,121,43,.14)}
.mk-bkui-card b{font:700 13.5px 'Space Grotesk',sans-serif}
.mk-bkui-card .meta{text-align:right;font-size:11px;color:var(--bk-muted)}
.mk-bkui-card .meta b{display:block;color:var(--bk-ink);font-size:12px}
.mk-bkui-days{display:flex;gap:7px;overflow:hidden;margin:2px 0 12px}
.mk-bkui-day{flex:0 0 auto;width:46px;text-align:center;padding:9px 0;border-radius:11px;border:1px solid var(--bk-line);background:var(--bk-surface);font-size:10px;color:var(--bk-muted)}
.mk-bkui-day b{display:block;font:700 15px 'Space Grotesk',sans-serif;color:var(--bk-ink);margin-top:2px}
.mk-bkui-day.is-on{background:var(--bk-amber);border-color:var(--bk-amber);color:#fff}
.mk-bkui-day.is-on b{color:#fff}
.mk-bkui-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mk-bkui-slot{padding:10px 0;text-align:center;border-radius:10px;border:1px solid var(--bk-line);background:var(--bk-surface);font:600 12px 'Space Grotesk',sans-serif}
.mk-bkui-slot.is-on{background:var(--bk-amber);border-color:var(--bk-amber);color:#fff}
.mk-bkui-recap{background:var(--bk-surface);border:1px solid var(--bk-line);border-radius:13px;padding:11px 13px}
.mk-bkui-recap .rr{display:grid;gap:1px;padding:6px 0;font-size:11px;border-bottom:1px solid var(--bk-line)}
.mk-bkui-recap .rr:last-child{border:0}
.mk-bkui-recap .rr>span{color:var(--bk-muted)}
.mk-bkui-recap .rr b{font:600 12px/1.25 'Space Grotesk',sans-serif}
.mk-bkui-confirm{margin-top:12px;text-align:center;background:var(--bk-amber);color:#fff;border-radius:11px;padding:12px;font:700 13px 'Space Grotesk',sans-serif}

/* ---------- Booking admin agenda recreated (light) ---------- */
.mk-agui{background:var(--mk-surface);height:100%;overflow:hidden;font-size:13px}
.mk-agui-top{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--mk-line)}
.mk-agui-top .dot{width:26px;height:26px;border-radius:8px;background:var(--bk-amber)}
.mk-agui-top b{font-family:'Space Grotesk',sans-serif}
.mk-agui-top .day{margin-left:auto;font:600 12px 'Space Grotesk',sans-serif;color:var(--mk-muted)}
.mk-agui-grid{padding:14px 16px;display:grid;gap:9px}
.mk-agui-row{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:stretch}
.mk-agui-time{font:700 13px 'Space Grotesk',sans-serif;color:var(--mk-muted);padding-top:12px}
.mk-agui-appt{border:1px solid var(--mk-line);border-left:3px solid var(--bk-amber);border-radius:10px;padding:11px 13px;background:var(--mk-surface);box-shadow:var(--mk-shadow-sm)}
.mk-agui-appt.is-highlight{border-color:var(--bk-amber);box-shadow:0 0 0 3px rgba(179,121,43,.15)}
.mk-agui-appt b{font-family:'Space Grotesk',sans-serif;font-size:13px}
.mk-agui-appt .m{color:var(--mk-muted);font-size:11.5px;margin-top:3px}
.mk-agui-appt.free{border-style:dashed;border-left-style:dashed;border-left-color:var(--mk-line-strong);color:var(--mk-muted);background:var(--mk-surface-2);box-shadow:none;font-size:12px;display:flex;align-items:center}

/* ---------- Custom software section ---------- */
.mk-custom{background:linear-gradient(180deg,#101a2b,#0c1424);color:#e8ecf5;overflow:hidden;padding-bottom:clamp(40px,5vw,68px)}
.mk-custom .mk-eyebrow{color:#7f9bff}
.mk-custom .mk-eyebrow::before{background:#7f9bff}
.mk-custom h2{color:#fff;font-size:clamp(28px,4.2vw,44px)}
.mk-custom .mk-lead{color:#aeb8cf}
.mk-custom-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,5vw,60px);align-items:center;margin-top:8px}
.mk-custom-note{margin-top:22px;font-size:14px;line-height:1.6;color:#b3bdd6;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;max-width:48ch;background:rgba(127,155,255,.08);border:1px solid rgba(127,155,255,.16);border-radius:12px;padding:14px 16px}
.mk-custom-note b{color:#dfe5f5;font-weight:700}
.mk-custom-note::before{content:"";width:22px;height:22px;margin-top:1px;border-radius:6px;background:rgba(127,155,255,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f9bff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center}
.mk-custom-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

.mk-stack{position:relative;min-height:536px}
.mk-appwin{
  position:absolute;border-radius:14px;overflow:hidden;background:#fff;color:var(--mk-ink);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px rgba(0,0,0,.45);
}
.mk-appwin-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--mk-surface-2);border-bottom:1px solid var(--mk-line)}
.mk-appwin-bar i{width:8px;height:8px;border-radius:50%;background:var(--mk-line-strong)}
.mk-appwin-bar span{margin-left:8px;font:600 11px 'Space Grotesk',sans-serif;color:var(--mk-muted)}
.mk-appwin-1{left:0;top:0;width:min(49%,348px);z-index:2}
.mk-appwin-2{left:53%;right:0;top:70px;width:min(47%,340px);z-index:4}
.mk-appwin-3{left:26%;bottom:0;width:min(52%,356px);z-index:3}
.mk-app-pad{padding:14px 15px}
.mk-app-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.mk-app-kpi{border:1px solid var(--mk-line);border-radius:10px;padding:9px 10px}
.mk-app-kpi span{font-size:10.5px;color:var(--mk-muted);display:block}
.mk-app-kpi b{font:700 19px 'Space Grotesk',sans-serif;letter-spacing:0}
.mk-app-kpi.accent b{color:var(--mk-brand-ink)}
.mk-app-toolbar{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.mk-app-tool{font:600 10.5px 'Space Grotesk',sans-serif;padding:6px 10px;border-radius:8px;border:1px solid var(--mk-line-strong);color:var(--mk-ink-soft)}
.mk-app-tool.pri{background:var(--mk-brand);color:#fff;border-color:transparent}
.mk-app-tr{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 0;border-bottom:1px solid var(--mk-line);align-items:center}
.mk-app-tr:last-child{border:0}
.mk-app-tr b{font:600 12px 'Space Grotesk',sans-serif}
.mk-app-tr .s{font-size:10.5px;color:var(--mk-muted);margin-top:1px}
.mk-tagn{font:600 9.5px 'Space Grotesk',sans-serif;letter-spacing:.04em;padding:4px 7px;border-radius:6px;white-space:nowrap}
.mk-tagn.ok{background:#e8f7f2;color:#16856a}
.mk-tagn.warn{background:#fff7e6;color:#8a5a08}
.mk-tagn.info{background:var(--mk-brand-wash);color:var(--mk-brand-ink)}
.mk-tagn.wip{background:#eef2ff;color:#3b47c4}
.mk-tagn.todo{background:var(--mk-surface-2);color:var(--mk-muted)}
.mk-app-time{display:grid;grid-template-columns:44px 1fr;gap:9px;padding:8px 0;border-bottom:1px solid var(--mk-line)}
.mk-app-time:last-child{border:0}
.mk-app-time .t{font:700 12px 'Space Grotesk',sans-serif;color:var(--mk-muted)}
.mk-app-time b{font:600 12px 'Space Grotesk',sans-serif}
.mk-app-time .s{font-size:10.5px;color:var(--mk-muted)}

@media (max-width:1000px){
  .mk-custom-grid{grid-template-columns:1fr;gap:40px}
  .mk-stack{min-height:0;display:grid;gap:16px}
  .mk-appwin{position:static;width:100%!important;box-shadow:0 24px 50px rgba(0,0,0,.4)}
}

/* ---------- contact / CTA band ---------- */
.mk-cta{position:relative;background:var(--mk-cta-grad);color:#fff;text-align:center;overflow:hidden}
.mk-cta h2{color:#fff;font-size:clamp(28px,4.4vw,46px);max-width:20ch;margin-inline:auto}
.mk-cta p{color:rgba(255,255,255,.9);max-width:52ch;margin:16px auto 0;font-size:17px}
.mk-cta-actions{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mk-cta .mk-btn{--_bg:#fff;--_fg:var(--mk-brand-ink);box-shadow:0 16px 40px rgba(0,0,0,.22)}
.mk-cta .mk-btn--ghost{--_bg:transparent;--_fg:#fff;--_bd:rgba(255,255,255,.55)}
.mk-cta small{display:block;margin-top:18px;color:rgba(255,255,255,.8);font-size:13.5px}

/* ---------- footer ---------- */
.mk-footer{background:var(--mk-surface);border-top:1px solid var(--mk-line);padding-block:44px 34px}
.mk-footer-grid{display:flex;flex-wrap:wrap;gap:26px 48px;align-items:flex-start}
.mk-footer .mk-logo{margin-right:auto}
.mk-footer nav{display:flex;flex-wrap:wrap;gap:2px 20px;font-size:14px;color:var(--mk-ink-soft)}
.mk-footer nav a{padding:9px 0;display:inline-block}
.mk-footer nav a:hover{color:var(--mk-ink)}
.mk-footer-legal{margin-top:28px;padding-top:22px;border-top:1px solid var(--mk-line);font-size:13px;color:var(--mk-muted);display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}

/* ---------- reveal-on-scroll (JS adds .is-in) ---------- */
.mk-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.mk-reveal.is-in{opacity:1;transform:none}
.mk-reveal[data-d="1"]{transition-delay:.06s}
.mk-reveal[data-d="2"]{transition-delay:.12s}
.mk-reveal[data-d="3"]{transition-delay:.18s}
.mk-float{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  .mk-reveal{opacity:1!important;transform:none!important;transition:none}
  .mk-btn:hover,.mk-card:hover{transform:none}
  .mk-float{transition:none}
}

/* ---------- small screens polish ---------- */
@media (max-width:560px){
  .mk-hero-proof{gap:16px}
  .mk-phone{width:214px}
  .mk-duo:has(.mk-browser):has(.mk-phone) .mk-phone{width:182px;margin-top:-46px}
  .mk-hero-stage .mk-phone{width:172px}
  .mk-browser-bar span{max-width:150px}
  .mk-cta p{font-size:15.5px}
}
@media (max-width:360px){
  :root{--mk-gutter:16px}
  .mk-phone{width:190px}
}