/* ==========================================================================
   FestEngine.com — marketing site styles. Built on the design-system tokens.
   ========================================================================== */

.mk-root { background: var(--bg-page); color: var(--text-body); font-family: var(--font-sans); overflow-x: hidden; }
.mk-container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 32px; }
.mk-section-head { max-width: 760px; }
.mk-section-title { font-size: var(--fs-display-m); font-weight: var(--fw-extra); letter-spacing: var(--ls-tighter);
  line-height: 1.06; color: var(--text-primary); margin: 14px 0 0; }
.mk-section-sub { font-size: var(--fs-body-lg); color: var(--text-secondary); margin: 18px 0 0; line-height: var(--lh-normal); max-width: 620px; }

/* ---- Nav ---------------------------------------------------------------- */
.mk-nav { position: sticky; top: 0; z-index: 50; background: var(--glass-strong);
  backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md));
  border-bottom: 1px solid var(--line); }
.mk-nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.mk-nav__brand img { height: 38px; display: block; }
.mk-nav__links { display: flex; gap: 26px; margin-left: 18px; }
.mk-nav__link { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-secondary);
  transition: color var(--dur-base) var(--ease-out); }
.mk-nav__link:hover { color: var(--text-primary); }
.mk-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mk-nav__burger { display: none; }

/* ---- Hero --------------------------------------------------------------- */
.mk-hero { position: relative; padding: 76px 0 40px; overflow: hidden; isolation: isolate; }
.mk-hero__bg { position: absolute; inset: 0; z-index: -2;
  background: url("assets/img/bkg-drone-festival-camping-dark.jpg") center top / cover no-repeat;
  filter: brightness(2.4) saturate(1.18) contrast(1.04); }
.mk-hero__veil { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(45,212,191,.14), transparent 52%),
    radial-gradient(90% 70% at 12% 90%, rgba(255,122,89,.10), transparent 55%),
    linear-gradient(180deg, rgba(11,14,19,.74) 0%, rgba(11,14,19,.52) 38%, rgba(11,14,19,.82) 78%, var(--bg-page) 100%); }
.mk-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: start; min-height: 560px; }
.mk-hero__head { font-size: var(--fs-display-xl); margin: 18px 0 0; }
.mk-hero__sub { font-size: var(--fs-body-lg); color: var(--text-body); margin: 22px 0 0; max-width: 520px; line-height: var(--lh-normal); }
.mk-hero__switch { margin: 0 0 28px; }
.mk-hero__eyebrow { margin-bottom: 0; }
.mk-hero__cta { display: flex; gap: 14px; margin: 26px 0 0; flex-wrap: wrap; }
.mk-hero__copy { padding-top: 0; }
.mk-hero__preview { position: relative; height: 520px; overflow: visible; }
.mk-hero__preview-inner { position: absolute; inset: 0; animation: mk-rise var(--dur-slower) var(--ease-out) both; overflow: visible; }
@keyframes mk-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---- Backstage browser preview ------------------------------------------ */
.mk-win { background: var(--glass-strong); border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), var(--edge-highlight); overflow: hidden; backdrop-filter: blur(var(--blur-md)); }
.mk-win--wide { width: calc(100% + 120px); }
.mk-win__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02); }
.mk-win__dots { display: flex; gap: 7px; }
.mk-win__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-600); }
.mk-win__dots i:first-child { background: #ff6058; } .mk-win__dots i:nth-child(2) { background: #ffbe2e; } .mk-win__dots i:nth-child(3) { background: #2aca44; }
.mk-win__url { display: flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--text-secondary);
  font-family: var(--font-mono); background: var(--ink-850); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 5px 14px; }
.mk-win__url svg { color: var(--success-500); }
.mk-win__bar-r { margin-left: auto; display: flex; gap: 12px; color: var(--text-muted); }
.mk-win__shots { position: relative; height: 460px; overflow: hidden; background: var(--ink-950); }
.mk-win__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left;
  opacity: 0; }

/* ---- Capabilities ------------------------------------------------------- */
.mk-cap { padding: 100px 0; }
.mk-cap__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; }
.mk-cap__col-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.mk-cap__col-title { font-size: var(--fs-h1); font-weight: var(--fw-extra); color: var(--text-primary); margin: 14px 0 0; letter-spacing: var(--ls-tight); }
.mk-cap__col-sub { font-size: var(--fs-body); color: var(--text-secondary); margin: 8px 0 0; }
.mk-cap__col--bs { box-shadow: var(--shadow-md), inset 0 2px 0 var(--teal-500); }
.mk-cap__col--foh { box-shadow: var(--shadow-md), inset 0 2px 0 var(--coral-500); }
.mk-cap__list { display: flex; flex-direction: column; gap: 18px; }
.mk-cap__item { display: flex; gap: 14px; }
.mk-cap__ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-md); }
.mk-cap__ico--bs { background: var(--teal-tint-12); color: var(--teal-300); }
.mk-cap__ico--foh { background: var(--coral-tint-12); color: var(--coral-300); }
.mk-cap__t { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--text-primary); }
.mk-cap__d { font-size: var(--fs-body-sm); color: var(--text-secondary); margin-top: 3px; line-height: var(--lh-normal); }

/* ---- Showcase ----------------------------------------------------------- */
.mk-show { position: relative; padding: 100px 0; overflow: hidden; isolation: isolate; }
.mk-show__bg { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 90% at 90% 10%, rgba(255,122,89,.12), transparent 55%), var(--ink-850); }
.mk-show__head { display: flex; align-items: stretch; gap: 36px; }
.mk-show__head-text { flex: 1; max-width: 720px; }
.mk-show__head-text .mk-section-title { margin-top: 16px; }
.mk-show__head em { color: var(--coral-300); font-style: italic; }
.mk-show__head strong { color: var(--text-primary); font-weight: var(--fw-bold); }
.mk-show__appicon { flex: none; width: 120px; height: 120px; object-fit: contain;
  border-radius: 26px; align-self: flex-start; }
.mk-show__rail { display: flex; justify-content: center; align-items: flex-start; gap: 22px; margin: 52px 0 12px;
  padding-bottom: 8px; }
.mk-show__shot { margin: 0; flex: 0 0 auto; width: 196px; }
.mk-show__shot img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.55)); }
.mk-show__shot figcaption { text-align: center; font-size: var(--fs-caption); color: var(--text-secondary);
  margin-top: 16px; font-weight: var(--fw-semibold); }
.mk-show__foot { display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-top: 40px; flex-wrap: wrap; }
.mk-show__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.mk-show__list li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-body); color: var(--text-body); }
.mk-show__ck { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--coral-tint-20); color: var(--coral-300); margin-top: 1px; }

/* ---- Front-of-House phone preview --------------------------------------- */
.mk-fohshot { height: 100%; display: flex; align-items: flex-start; justify-content: center; }
.mk-fohshot__phone { position: relative; width: 440px; height: 760px;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.7)); flex: none; }
.mk-fohshot__shot { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: top center;
  opacity: 0; }

/* ---- CTA band + footer -------------------------------------------------- */
.mk-cta { position: relative; padding: 110px 0; overflow: hidden; isolation: isolate; text-align: center; }
.mk-cta__bg { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 80% at 50% 0%, rgba(45,212,191,.16), transparent 60%),
    linear-gradient(180deg, rgba(7,9,12,.7), rgba(7,9,12,.92)),
    url("assets/img/bkg-drone-festival-camping-dark.jpg") center / cover no-repeat; }
.mk-cta__bg::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(1px); }
.mk-cta__inner { position: relative; max-width: 720px; margin: 0 auto; }
.mk-cta__title { font-size: var(--fs-display-l); margin: 16px 0 0; }
.mk-cta__sub { font-size: var(--fs-body-lg); color: var(--text-body); margin: 20px auto 0; max-width: 560px; }
.mk-cta__btns { display: flex; gap: 14px; justify-content: center; margin-top: 34px; }
.mk-foot { background: var(--ink-1000); border-top: 1px solid var(--line); padding: 28px 0; }
.mk-foot__bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.mk-foot__wordmark img { height: 24px; display: block; opacity: .7; }
.mk-foot__wordmark:hover img { opacity: 1; }
.mk-foot__contact { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--accent); }
.mk-foot__contact:hover { color: var(--accent-hover); }
.mk-foot__copy { font-size: var(--fs-caption); color: var(--text-muted); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .mk-hero__grid, .mk-cap__grid { grid-template-columns: 1fr; }
  .mk-hero__grid { min-height: 0; }
  .mk-hero__head { font-size: var(--fs-display-l); }
  .mk-hero__preview { height: 460px; }
  .mk-win--wide { width: 100%; }
  .mk-fohshot__phone { width: 340px; height: 600px; }
  .mk-show__rail { flex-wrap: wrap; }
  .mk-show__foot { justify-content: center; text-align: left; }
  /* Hero copy — centred on single-column layout */
  .mk-hero__copy { text-align: center; }
  .mk-hero__switch { display: flex; justify-content: center; }
  .mk-hero__cta { justify-content: center; }
  .mk-hero__sub { max-width: 560px; margin-left: auto; margin-right: auto; }
  .mk-hero__preview { display: flex; justify-content: center; }
}
@media (max-width: 720px) {
  .mk-container { padding: 0 28px; }
  .mk-nav__brand img { height: 36px; }
  .mk-hero { padding-top: 48px; }
  .mk-hero__head { font-size: var(--fs-display-m); }
  .mk-hero__preview { height: 380px; }
  .mk-fohshot__phone { width: 300px; height: 520px; }
  /* Showcase — centred, 2-column screen grid */
  .mk-show__head { flex-direction: column; align-items: center; text-align: center; }
  .mk-show__appicon { width: 80px; height: 80px; border-radius: 18px; align-self: center; }
  .mk-show__rail { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; margin-left: auto; margin-right: auto; max-width: 420px; }
  .mk-show__shot { width: auto; margin-top: 0 !important; }
  .mk-show__foot { flex-direction: column; align-items: center; text-align: center; }
  .mk-show__foot > div { flex-wrap: nowrap !important; }
  .mk-show__foot .fe-btn--lg { height: var(--control-sm); padding: 0 var(--space-4); font-size: var(--fs-body-sm); }
  .mk-section-title, .mk-cta__title { font-size: var(--fs-h1); }
  .mk-foot__bar { justify-content: center; text-align: center; }
  .mk-cap { padding: 60px 0; }
  .mk-show { padding: 60px 0; }
  .mk-cta { padding: 70px 0; }
}

/* ---- Demo / contact form page ------------------------------------------- */
.mk-demo-hero { position: relative; padding: 88px 0 72px; text-align: center; overflow: hidden; isolation: isolate; }
.mk-demo-hero__bg { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(45,212,191,.15), transparent 60%),
    linear-gradient(180deg, rgba(11,14,19,.85), var(--bg-page));
}
.mk-demo-hero__inner { max-width: 640px; margin: 0 auto; }
.mk-demo-hero__title { font-size: var(--fs-display-l); font-weight: var(--fw-extra); color: var(--text-primary);
  letter-spacing: var(--ls-tighter); line-height: 1.06; margin: 16px 0 0; }
.mk-demo-hero__sub { font-size: var(--fs-body-lg); color: var(--text-body); margin: 18px 0 0; line-height: var(--lh-normal); }

.mk-form-wrap { padding: 0 0 100px; }
.mk-form { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.mk-form__field { display: flex; flex-direction: column; gap: 8px; }
.mk-form__label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.mk-form__label span { color: var(--text-muted); font-weight: var(--fw-regular); margin-left: 4px; }
.mk-form__input,
.mk-form__select,
.mk-form__textarea {
  width: 100%; background: var(--glass-strong); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); padding: 13px 16px; font-family: var(--font-sans);
  font-size: var(--fs-body); color: var(--text-primary); outline: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
  box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
}
.mk-form__input::placeholder, .mk-form__textarea::placeholder { color: var(--text-muted); }
.mk-form__input:focus, .mk-form__select:focus, .mk-form__textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,212,191,.18);
}
.mk-form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; cursor: pointer; }
.mk-form__select option { background: var(--ink-900); color: var(--text-primary); }
.mk-form__textarea { resize: vertical; min-height: 120px; line-height: var(--lh-normal); }
.mk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mk-form__row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.mk-form__submit { margin-top: 8px; }
.mk-form__note { font-size: var(--fs-body-sm); color: var(--text-muted); text-align: center; margin-top: 12px; }

.mk-form-confirm { max-width: 560px; margin: 40px auto 80px; padding: 56px 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px;
  background: rgba(45,212,191,.06); border: 1px solid rgba(45,212,191,.18); border-radius: var(--radius-xl); }
.mk-form-confirm__icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(45,212,191,.12); color: var(--teal-300); display: grid; place-items: center; }
.mk-form-confirm__title { font-size: var(--fs-display-s); color: var(--text-primary); margin: 0; }
.mk-form-confirm__sub { font-size: var(--fs-body-lg); color: var(--text-secondary); margin: 0; line-height: var(--lh-normal); }

@media (max-width: 720px) {
  .mk-demo-hero__title { font-size: var(--fs-h1); }
  .mk-form__row, .mk-form__row-3 { grid-template-columns: 1fr; }
}

/* ---- Hero mode toggle (CSS :checked — zero JS) -------------------------- */
/* Hide the radio inputs visually but keep them functional */
#mode-bs, #mode-foh { position: absolute; opacity: 0; width: 0; height: 0; }

/* Default (backstage active): bs label is lit, foh label is dimmed */
#mode-bs:checked ~ .mk-container [for="mode-bs"]  { color: var(--text-on-accent); }
#mode-bs:checked ~ .mk-container [for="mode-foh"] { color: var(--text-secondary); }

/* FoH active: slide thumb, swap colors */
#mode-foh:checked ~ .mk-container .fe-mode__thumb  { transform: translateX(100%); background: var(--accent-warm); box-shadow: var(--glow-coral); }
#mode-foh:checked ~ .mk-container [for="mode-foh"] { color: var(--text-on-warm); }
#mode-foh:checked ~ .mk-container [for="mode-bs"]  { color: var(--text-secondary); }

/* Show/hide copy + preview panels */
#mode-foh:checked ~ .mk-container .mk-hero__copy--bs,
#mode-foh:checked ~ .mk-container .mk-hero__preview--bs { display: none; }
#mode-bs:checked  ~ .mk-container .mk-hero__copy--foh,
#mode-bs:checked  ~ .mk-container .mk-hero__preview--foh { display: none; }

/* ---- CSS carousel keyframes (replaces React setInterval) ---------------- */

/* 7-image carousel: 3s per slide × 7 = 21s cycle
   Fade-out extends 0.5s past the 3s slot boundary so it overlaps
   with the next image's fade-in — gives a smooth crossfade. */
@keyframes mk-carousel-7 {
  0%      { opacity: 0; }
  2.38%   { opacity: 1; }   /* in: 0 → 0.5s */
  11.9%   { opacity: 1; }   /* hold: 0.5s → 2.5s */
  16.67%  { opacity: 0; }   /* out: 2.5s → 3.5s (overlaps next) */
  100%    { opacity: 0; }
}
.mk-win__shots .mk-win__shot:nth-child(1) { animation: mk-carousel-7 21s infinite  0s both; }
.mk-win__shots .mk-win__shot:nth-child(2) { animation: mk-carousel-7 21s infinite  3s both; }
.mk-win__shots .mk-win__shot:nth-child(3) { animation: mk-carousel-7 21s infinite  6s both; }
.mk-win__shots .mk-win__shot:nth-child(4) { animation: mk-carousel-7 21s infinite  9s both; }
.mk-win__shots .mk-win__shot:nth-child(5) { animation: mk-carousel-7 21s infinite 12s both; }
.mk-win__shots .mk-win__shot:nth-child(6) { animation: mk-carousel-7 21s infinite 15s both; }
.mk-win__shots .mk-win__shot:nth-child(7) { animation: mk-carousel-7 21s infinite 18s both; }

/* 5-image carousel: 3s per slide × 5 = 15s cycle
   Fade-out extends 0.5s past the 3s slot boundary so it overlaps
   with the next image's fade-in — gives a smooth crossfade. */
@keyframes mk-carousel-5 {
  0%      { opacity: 0; }
  3.33%   { opacity: 1; }   /* in: 0 → 0.5s */
  16.67%  { opacity: 1; }   /* hold: 0.5s → 2.5s */
  23.33%  { opacity: 0; }   /* out: 2.5s → 3.5s (overlaps next) */
  100%    { opacity: 0; }
}
.mk-fohshot__phone .mk-fohshot__shot:nth-child(1) { animation: mk-carousel-5 15s infinite  0s both; }
.mk-fohshot__phone .mk-fohshot__shot:nth-child(2) { animation: mk-carousel-5 15s infinite  3s both; }
.mk-fohshot__phone .mk-fohshot__shot:nth-child(3) { animation: mk-carousel-5 15s infinite  6s both; }
.mk-fohshot__phone .mk-fohshot__shot:nth-child(4) { animation: mk-carousel-5 15s infinite  9s both; }
.mk-fohshot__phone .mk-fohshot__shot:nth-child(5) { animation: mk-carousel-5 15s infinite 12s both; }