/* ==========================================================================
   Home page (index.html) — ported from the live theme's home rules.
   ========================================================================== */

/* ---------- Shared bits on this page ---------- */
.home-eyebrow {
  margin: 0;
  padding-bottom: 10px;
  color: #5b87e3; /* lighter than --accent: 16px text needs 4.5:1 on black */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}
.home-small-title {
  display: block;
  margin-bottom: 16px;
  padding-bottom: 8px;
  font-size: 18px;
  text-transform: uppercase;
  background: linear-gradient(153.53deg, #3567db 2.54%, rgba(66, 52, 219, .65) 101.34%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-heading {
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
}
.home-block-title { padding: 30px 0; font-size: 40px; font-weight: 400; color: #fff; }

/* Pill button with cyan fill sweep */
.home-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px;
  border: 1px solid #fff;
  border-radius: 50px;
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  transition: border-color .4s ease-in-out;
}
.home-btn::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--accent);
  transition: width .4s ease-in-out;
}
.home-btn:hover { border-color: var(--accent); }
.home-btn:hover::before { width: 100%; }
.home-btn span, .home-btn .chev { position: relative; z-index: 1; }
.home-btn .chev { width: 16px; height: 16px; transition: transform .3s ease-in-out; }
.home-btn:hover .chev { transform: translateX(3px); }
/* Filled variant for the primary call to action */
.home-btn--solid { border-color: var(--accent); background: var(--accent); }
.home-btn--solid::before { background: #2559d2; }
.home-btn--solid:hover { border-color: #2559d2; }

/* ---------- Hero ---------- */
.home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: 40px 10px;
  background: radial-gradient(120% 90% at 50% 20%, #0b1020 0%, #05070d 55%, #020308 100%);
  text-align: center;
}
.home-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; }

/* Planet horizon (static): a dark sphere whose lower rim is lit in the logo blues.
   The rim and halo are masked so only the bottom arc glows and the sides fade
   into the background, like the original hero art. */
.home-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.home-hero__planet {
  position: absolute; left: 50%; bottom: 9%;
  width: min(1250px, 92vw); aspect-ratio: 1;
  transform: translateX(-50%);
}
.home-hero__planet > span { position: absolute; inset: 0; border-radius: 50%; }
/* The glow box is 140% of the planet so the outer glow below the rim is not cut
   by the mask; the mask fades the lit rim out toward the top. */
.home-hero__planet > .home-hero__glow {
  inset: -20%; border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .3) 62%, #000 76%);
          mask-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .3) 62%, #000 76%);
}
.home-hero__glow > span { position: absolute; border-radius: 50%; }
.home-hero__halo {
  inset: 10%;
  background: radial-gradient(closest-side, transparent 80%, rgba(53, 103, 219, .32) 89%, rgba(66, 52, 219, .12) 95%, transparent 100%);
  transform: translateY(3%);
  filter: blur(26px);
}
.home-hero__body {
  background:
    radial-gradient(circle at 50% 100%, rgba(53, 103, 219, .30) 0%, rgba(53, 103, 219, .06) 24%, transparent 44%),
    radial-gradient(circle at 50% 30%, #12161f 0%, #0c0f17 55%, #090b11 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 35%, #000 70%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 35%, #000 70%);
}
.home-hero__rim {
  inset: 14.2857%;
  box-shadow:
    inset 0 -3px 2px -1px rgba(190, 210, 255, .9),
    inset 0 -16px 26px -10px rgba(110, 146, 229, .9),
    inset 0 -60px 90px -40px rgba(53, 103, 219, .85),
    0 26px 70px -18px rgba(53, 103, 219, .7),
    0 70px 170px -40px rgba(66, 52, 219, .5);
}
/* The H1 is a static kicker line; the big rotating display line below it is decorative. */
.home-hero__kicker {
  margin-bottom: 20px;
  font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: .08em;
  text-transform: uppercase;
  color: #8fb0f0;
}
.home-hero__title { font-size: 3.75rem; line-height: 1.2; font-weight: 400; color: #fff; width: 100%; }
.home-hero__line { display: block; }
.home-hero__rotator { position: relative; display: block; width: 100%; height: 75px; overflow: hidden; }
.home-hero__item {
  position: absolute; left: 0; top: 0; width: 100%;
  color: var(--accent);
  line-height: 75px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  transition: transform .5s ease-in-out, opacity .5s ease-in-out;
}
.home-hero__item.is-active { opacity: 1; transform: translateY(0); }
.home-hero__desc { max-width: 760px; padding: 20px 0 60px; font-size: 22px; font-weight: 500; line-height: 32px; color: #fff; }
.home-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.home-hero__kicker, .home-hero__line, .home-hero__rotator, .home-hero__desc, .home-hero__actions {
  animation: homeHeroIn 1s var(--ease-out) both;
}
.home-hero__line:first-child { animation-delay: .08s; }
.home-hero__rotator { animation-delay: .16s; }
.home-hero__line:last-child { animation-delay: .28s; }
.home-hero__desc { animation-delay: .4s; }
.home-hero__actions { animation-delay: .52s; }
@keyframes homeHeroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Why Desmok (char scrub) ---------- */
.home-why { margin-top: 6rem; padding-bottom: 100px; }
.home-why__text { font-size: 35px; line-height: 1.45; color: #fff; }
.home-why__text span { color: inherit; }

/* ---------- Differentiator boxes ---------- */
.home-diff { padding-bottom: 100px; margin-top: 3rem; text-align: center; }
.home-diff__title { font-size: 48px; font-weight: 400; color: #fff; }
.home-diff__viewport { position: relative; height: 22rem; margin-top: 60px; overflow: hidden; }
.home-diff__track {
  display: flex; gap: 40px;
  height: 100%;
  padding: 0 5%;
  transition: transform .3s ease;
  will-change: transform;
}
.home-box {
  position: relative;
  flex: 0 0 608px;
  height: 100%;
  padding: 0 40px;
  border-radius: 20px;
  background: transparent no-repeat top right / 100% 100%;
  text-align: left;
  transition: opacity .8s ease, transform .8s ease;
  overflow: hidden;
}
/* Hidden start state only with JS (home.js reveals the boxes); no-JS visitors see them. */
.js .home-box {
  opacity: 0;
  transform: translateY(50px);
}
.home-box.is-visible { opacity: 1; transform: translateY(0); }
.home-box--1 { background-image: url("../../images/art/diff-card-1.webp"); }
.home-box--2 { background-image: url("../../images/art/diff-card-2.webp"); }
.home-box--3 { background-image: url("../../images/art/diff-card-3.webp"); }
.home-box--4 { background-image: url("../../images/art/diff-card-4.webp"); }
/* The icon tile is drawn into the top-right notch of the box art, so titles stop
   short of it (about a quarter of the box) instead of running underneath. */
.home-box__title { position: relative; z-index: 1; max-width: calc(100% - 26%); margin: 65px 0 50px; font-size: 1.8rem; font-weight: 600; line-height: 1.3; color: #fff; }
.home-box__text { position: relative; z-index: 1; font-size: 18px; line-height: 24px; color: #fff; }
.home-box__light {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #3567db 0%, transparent 60%);
  filter: blur(90px);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .1s;
  pointer-events: none;
}

/* ---------- Counters ---------- */
.home-stats { margin-top: 3rem; padding-bottom: 100px; text-align: center; }
.home-stats__lead { margin-bottom: 48px; font-size: 30px; line-height: 1.3; font-weight: 400; color: #fff; }
.home-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.home-stat__value { font-size: 32px; line-height: 40px; font-weight: 500; color: #fff; }
.home-stat__label {
  display: inline-block;
  margin-top: 4px; padding-bottom: 4px;
  border-bottom: 1px solid #4371de;
  font-size: 20px; line-height: 30px; color: #999;
}

/* ---------- Services accordion ---------- */
.home-services { padding-bottom: 100px; }
.home-services__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; }
.home-services__lead { margin-bottom: 24px; font-size: 32px; line-height: 42px; color: #ddd; }
.home-acc__item { border-bottom: 1px solid #333; }
.home-acc__head { margin: 0; }
.home-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%;
  padding: 1rem 0;
  font-size: 32px; font-weight: 500; line-height: 1.2;
  color: #fff; text-align: left;
}
.home-acc__sign { position: relative; flex: 0 0 auto; width: 14px; height: 14px; transition: transform .3s ease; }
.home-acc__sign::before, .home-acc__sign::after {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: #fff;
  transition: transform .3s ease;
}
.home-acc__sign::after { transform: rotate(90deg); }
.home-acc__btn[aria-expanded="true"] .home-acc__sign { transform: rotate(180deg); }
.home-acc__btn[aria-expanded="true"] .home-acc__sign::after { transform: rotate(0deg); }
.home-acc__body { padding: 1rem 0; font-size: 16px; line-height: 28px; color: #fff; }
.home-acc__also { margin-top: 20px; font-size: 16px; line-height: 26px; color: #bbb; }
.home-acc__also a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.home-acc__also a:hover { color: #8fb0f0; }

/* ---------- Testimonials marquee ---------- */
.home-testi { padding-bottom: 100px; }
.home-testi__eyebrow { margin-bottom: 8px; text-align: center; }
.home-testi__title { margin-bottom: 60px; text-align: center; }
.home-marquee { display: grid; gap: 48px; }
.home-marquee__row { overflow: hidden; }
.home-marquee__track { display: flex; gap: 20px; width: max-content; }
.home-marquee__row--left .home-marquee__track { animation: homeSlideLeft 25s linear infinite; }
.home-marquee__row--right .home-marquee__track { animation: homeSlideRight 30s linear infinite; }
.home-marquee__track:hover { animation-play-state: paused; }
@keyframes homeSlideLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes homeSlideRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.home-tcard {
  display: flex; gap: 15px; align-items: flex-start;
  flex: 0 0 auto;
  width: 365px; height: 285px;
  padding: 30px 10px;
  border-radius: 12px;
  background: #1a1a1a;
}
.home-tcard__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #4371de, #0a3d4a); color: #fff;
  font-size: 16px; font-weight: 600; letter-spacing: .5px;
}
.home-tcard__body { flex: 1; min-width: 0; }
.home-tcard__name { margin-bottom: 2px; font-size: 20px; font-weight: 500; line-height: 33px; color: #e2e2e2; }
.home-tcard__meta { margin-bottom: 6px; font-size: 13px; font-weight: 500; line-height: 20px; color: #e2e2e2; overflow-wrap: anywhere; }
.home-tcard__text { font-size: 16px; line-height: 24.35px; color: #999; }

/* ---------- Service categories (tag words) ---------- */
.home-logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 64px; padding: 116px 0; }
.home-logo { display: flex; align-items: center; justify-content: center; min-height: 100px; padding: 0 4px; }
.home-logo__word {
  display: inline-block; font-size: 38px; font-weight: 700; letter-spacing: -.5px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .85);
  transition: transform .3s var(--ease), color .3s;
}
.home-logo__word--solid { color: #fff; -webkit-text-stroke: 0; }
.home-logo:hover .home-logo__word,
.home-logo:focus-visible .home-logo__word { transform: scale(1.06); color: #5b87e3; -webkit-text-stroke: 0; }

/* ---------- Case studies ---------- */
.home-cases { margin-top: 5rem; }
.home-case { display: block; color: #fff; }
.home-case--featured { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.home-case__img { overflow: hidden; border-radius: 16px; height: 390px; }
.home-case--featured .home-case__img { height: 572px; }
.home-cases__list { display: flex; gap: 100px; margin-top: 5rem; }
.home-cases__list .home-case { flex: 1 1 50%; }
.home-cases__list .home-case__img { margin-bottom: 15px; border-radius: 20px; }

/* ---------- Build mockups ----------
   The case cards show code-drawn illustrations of each build (chat window,
   automation flow, SaaS dashboard) instead of photos. Everything is sized in em,
   and each .mk sets its font-size from the card's size (container query units),
   so the whole drawing scales with the card. home.js adds .is-armed (motion
   allowed) and site.js adds .is-in on scroll; without JS every part is shown. */
.home-case__art {
  position: relative; display: grid; place-items: center; isolation: isolate;
  container-type: size;
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(53, 103, 219, .3), transparent 70%),
    radial-gradient(60% 55% at 0% 100%, rgba(66, 52, 219, .2), transparent 70%),
    #0a0c10;
  border: 1px solid #1c212a;
}
.home-case__art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 20%, transparent 75%);
}
.home-case__art::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 45% at 50% 50%, rgba(53, 103, 219, .22), transparent 75%);
  opacity: .6; transition: opacity .5s var(--ease-out);
}
.home-case:hover .home-case__art::after { opacity: 1; }

.mk { position: relative; color: #e6e9ef; font-size: 14px; line-height: 1.35; }
.mk svg { display: inline-block; flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-win {
  background: linear-gradient(180deg, #14171d, #101318);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 1em;
  box-shadow: 0 1.6em 3.2em -1.2em rgba(0, 0, 0, .8), 0 0 4em -1em rgba(53, 103, 219, .35);
  transition: transform .6s var(--ease-out);
}
.home-case:hover .mk-win { transform: translateY(-.35em); }
.mk-chip { display: inline-flex; align-items: center; padding: .2em .65em; border: 1px solid rgba(255, 255, 255, .12); border-radius: 99em; font-size: .72em; color: #9aa3b2; white-space: nowrap; }
.mk-chip.is-on { border-color: rgba(67, 113, 222, .55); background: rgba(53, 103, 219, .16); color: #b9ccf7; }
.mk-skel { display: block; width: 70%; height: .55em; border-radius: 99em; background: linear-gradient(90deg, #2c3442, #3a4558); }
.mk.is-armed .mk-step { opacity: 0; transform: translateY(.7em); }
.mk.is-armed.is-in .mk-step { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--d, 0s); }

/* AI Support Agent: chat window */
.mk--chat { width: 26em; max-width: calc(100cqw - 2.4em); font-size: clamp(7px, min(3.7cqh, 2.7cqw), 17px); }
.mk-chat { display: flex; flex-direction: column; overflow: hidden; }
.mk-chat__head { display: flex; align-items: center; gap: .7em; padding: .85em 1em; border-bottom: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02); }
.mk-chat__avatar { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: linear-gradient(135deg, #3567db, #4234db); color: #fff; box-shadow: 0 0 1.2em rgba(53, 103, 219, .55); }
.mk-chat__avatar svg { fill: currentColor; stroke: none; }
.mk-chat__who { display: flex; flex-direction: column; min-width: 0; }
.mk-chat__name { font-size: .9em; font-weight: 500; color: #fff; }
.mk-chat__status { display: inline-flex; align-items: center; gap: .4em; font-size: .72em; color: #8b94a3; }
.mk-live { width: .55em; height: .55em; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 0 .2em rgba(62, 207, 142, .18); }
.mk-chat__chans { display: flex; gap: .35em; margin-left: auto; }
.mk-chat__body { display: flex; flex-direction: column; gap: .7em; padding: 1.1em 1em 1em; }
.mk-msg { max-width: 82%; padding: .65em .9em; border-radius: 1.1em; font-size: .85em; }
.mk-msg--user { align-self: flex-end; border-bottom-right-radius: .35em; background: linear-gradient(135deg, #3567db, #3f45d8); color: #fff; }
.mk-msg--bot { align-self: flex-start; border: 1px solid rgba(255, 255, 255, .06); border-bottom-left-radius: .35em; background: #1c2029; color: #dde2ea; }
.mk-src { display: flex; align-items: center; gap: .4em; margin-top: .55em; padding-top: .5em; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .82em; color: #8fb0f5; }
.mk-handoff { display: flex; align-items: center; gap: .45em; font-size: .72em; color: #8b94a3; white-space: nowrap; }
.mk-handoff::before, .mk-handoff::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .08); }
.mk-chat__input { display: flex; align-items: center; justify-content: space-between; margin: 0 1.25em 1.25em; padding: .5em .5em .5em 1em; border: 1px solid rgba(255, 255, 255, .07); border-radius: 99em; background: #1a1e26; font-size: .8em; color: #6f7888; }
.mk-send { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--accent); color: #fff; }

/* Back-Office Autopilot: inputs -> AI -> systems */
.mk--flow { font-size: clamp(7px, min(2.9cqw, 4cqh), 16px); }
.mk-flow { display: grid; grid-template-columns: 7.4em 3.6em 4.6em 3.6em 9.6em; grid-template-rows: 13em; }
.mk-flow__col { display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; }
.mk-node { display: flex; align-items: center; gap: .55em; padding: .6em .8em; border: 1px solid rgba(255, 255, 255, .09); border-radius: .8em; background: #14171d; font-size: .85em; color: #dfe4ec; white-space: nowrap; box-shadow: 0 .8em 1.6em -1em rgba(0, 0, 0, .8); }
.mk-node svg { color: #7fa2f0; }
.mk-flow__col--out .mk-node { border-color: rgba(67, 113, 222, .35); }
.mk .mk-wires { width: 100%; height: 100%; overflow: visible; }
.mk-wires path { fill: none; vector-effect: non-scaling-stroke; }
.mk-wire { stroke: rgba(127, 162, 240, .3); stroke-width: 1.5; }
.mk-pulse { stroke: #9dbaf7; stroke-width: 2.5; stroke-linecap: butt; stroke-dasharray: 16 184; stroke-dashoffset: 16; opacity: 0; }
.mk-flow__ai { position: relative; display: grid; place-items: center; }
.mk-core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; width: 4.6em; height: 4.6em; border-radius: 1.2em; background: linear-gradient(145deg, #3567db, #4234db); color: #fff; font-weight: 600; box-shadow: 0 0 0 .35em rgba(53, 103, 219, .14), 0 0 2.6em rgba(53, 103, 219, .6); }
.mk-core svg { width: 1.5em; height: 1.5em; fill: currentColor; stroke: none; }
.mk-core span { font-size: .8em; letter-spacing: .08em; }
.mk-core::after { content: ""; position: absolute; inset: -.35em; border: 1px solid rgba(143, 176, 245, .5); border-radius: 1.45em; opacity: 0; }
.mk-fields { position: absolute; top: calc(50% + 2.9em); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .15em; color: #9aa3b2; white-space: nowrap; }
.mk-fields > span { display: flex; align-items: center; gap: .35em; font-size: .68em; }
.mk-fields svg { color: #3ecf8e; }

/* SaaS MVP: admin dashboard + phone + payment toast */
.mk--dash { width: 34em; height: 21em; font-size: clamp(7px, min(2.55cqw, 3.9cqh), 15px); }
.mk-dash { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; width: 28.5em; height: 18.5em; overflow: hidden; }
.mk-bar { display: flex; align-items: center; gap: .4em; padding: .7em .9em; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.mk-bar i { width: .6em; height: .6em; border-radius: 50%; background: #2b313c; }
.mk-url { display: inline-flex; align-items: center; gap: .4em; margin-left: .8em; padding: .25em .8em; border-radius: 99em; background: #1a1e26; font-size: .68em; color: #7c8594; }
.mk-dash__body { flex: 1; display: grid; grid-template-columns: 7.6em 1fr; min-height: 0; }
.mk-dash__side { display: flex; flex-direction: column; gap: .3em; padding: .9em .6em; border-right: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .015); }
.mk-dash__brand { width: 1.6em; height: 1.6em; margin: 0 0 .7em .35em; border-radius: .45em; background: linear-gradient(135deg, #3567db, #4234db); }
.mk-dash__nav { display: flex; align-items: center; gap: .5em; padding: .4em .5em; border-radius: .5em; font-size: .7em; color: #8b94a3; }
.mk-dash__nav.is-on { background: rgba(53, 103, 219, .16); color: #cfdcfa; }
.mk-dash__main { display: flex; flex-direction: column; gap: .8em; min-width: 0; padding: .9em 1em; }
.mk-dash__top { display: flex; align-items: center; justify-content: space-between; }
.mk-dash__title { font-size: .95em; font-weight: 500; color: #fff; }
.mk-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.mk-kpi { display: flex; flex-direction: column; gap: .5em; padding: .65em .7em; border: 1px solid rgba(255, 255, 255, .06); border-radius: .7em; background: #181c23; }
.mk-kpi__label { font-size: .66em; color: #8b94a3; }
.mk-kpi:nth-child(2) .mk-skel { width: 55%; }
.mk-kpi:nth-child(3) .mk-skel { width: 62%; }
.mk-dash__chart { flex: 1; min-height: 0; padding: .6em 0 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .05); border-radius: .7em; background: #15181e; }
.mk .mk-dash__chart svg { display: block; width: 100%; height: 100%; }
.mk-dash__area { stroke: none; }
.mk-dash__line, .mk-phone__chart path { fill: none; stroke: #6d93ee; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mk.is-armed .mk-dash__line { stroke-dasharray: 100; stroke-dashoffset: 100; }
.mk.is-armed.is-in .mk-dash__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out) .35s; }
.mk-phone { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; gap: .5em; width: 7.6em; height: 14.2em; padding: 1.5em .65em .8em; border: 1px solid rgba(255, 255, 255, .14); border-radius: 1.4em; background: #111419; box-shadow: 0 1.4em 2.8em -1em rgba(0, 0, 0, .9), 0 0 3em -1em rgba(53, 103, 219, .45); }
.mk-phone__notch { position: absolute; top: .55em; left: 50%; width: 2.4em; height: .45em; margin-left: -1.2em; border-radius: 99em; background: #23282f; }
.mk-phone__title { font-size: .62em; font-weight: 500; color: #fff; }
.mk-phone__kpi { padding: .5em; border: 1px solid rgba(255, 255, 255, .06); border-radius: .55em; background: #181c23; }
.mk-phone__kpi .mk-skel { width: 60%; height: .45em; }
.mk .mk-phone__chart { flex: 1; width: 100%; height: auto; min-height: 0; margin-top: .3em; }
.mk-toast { position: absolute; left: 2.6em; bottom: 1.2em; display: inline-flex; align-items: center; gap: .55em; padding: .55em 1em .55em .55em; border: 1px solid rgba(255, 255, 255, .12); border-radius: 99em; background: rgba(22, 26, 33, .94); font-size: .74em; color: #e6e9ef; white-space: nowrap; box-shadow: 0 1em 2em -1em rgba(0, 0, 0, .9); }
.mk-toast__ic { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: rgba(62, 207, 142, .16); color: #3ecf8e; }
.mk-toast__ic svg { width: 1em; height: 1em; }

/* Short cards (phones): drop the optional parts and let the rest grow */
@container (max-height: 300px) {
  .mk--chat { font-size: clamp(7px, min(4.6cqh, 3.2cqw), 14px); }
  .mk--flow { font-size: clamp(7px, min(3.1cqw, 5cqh), 15px); }
  .mk--dash { width: 28.5em; height: 19.6em; font-size: clamp(7px, min(3.2cqw, 4.6cqh), 15px); }
  .mk-opt, .mk--dash .mk-phone { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .mk-pulse { opacity: 1; animation: mk-pulse 2.7s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: var(--pd, 0s); }
  .mk-core::after { animation: mk-ring 2.7s ease-out infinite; }
}
@keyframes mk-pulse { from { stroke-dashoffset: 16; } to { stroke-dashoffset: -100; } }
@keyframes mk-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.3); } }
.home-case h3 { font-size: 32px; line-height: 42px; font-weight: 400; color: #fff; }
.home-case p { margin-top: 16px; font-size: 1.25rem; color: #999; }
.home-readmore {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-bottom: 4px;
  font-size: 24px; font-weight: 500; color: #999;
}
.home-readmore::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--accent); transition: width .3s ease;
}
.home-case:hover .home-readmore::after { width: 80%; }
.home-readmore svg { width: 20px; height: 20px; }
.home-case__meta { display: block; margin-bottom: 10px; font-size: 14px; letter-spacing: .5px; color: #5b87e3; }
.home-acc__link { color: #5b87e3; }
.home-acc__body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.home-acc__body a:hover { color: #8fb0f0; }
.home-cases__nav, .home-articles__nav { display: flex; justify-content: flex-end; margin-top: 2rem; }

/* ---------- Articles ---------- */
.home-articles { margin-top: 7rem; margin-bottom: 5rem; }
.home-articles__wrap { display: flex; gap: 40px; align-items: stretch; }
.home-articles__latest { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 445px; }
.home-articles__latest img { width: 100%; height: 330px; object-fit: cover; border-radius: 16px; }
.home-articles__date { position: absolute; top: 12px; left: 12px; padding: 12px 16px; font-size: 14px; color: #fff; }
.home-articles__latest-title {
  margin-top: 16px;
  font-size: 20px; line-height: 1.4; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-articles__list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.home-article { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 24px; margin-bottom: 24px; }
.home-article:not(:last-child) { border-bottom: 1px solid #fff; }
.home-article:last-child { margin-bottom: 0; padding-bottom: 0; }
.home-article__img { flex: 0 0 190px; overflow: hidden; border-radius: 8px; }
.home-article__img img { width: 190px; height: auto; transition: transform .5s var(--ease-out); }
.home-article__img--model {
  display: flex; align-items: center; justify-content: center; height: 107px;
  background: radial-gradient(circle at 30% 20%, rgba(67, 113, 222, .35), transparent 60%), #0b1418;
  border: 1px solid rgba(67, 113, 222, .35);
}
.home-article__img--model span { color: #fff; font-size: 22px; font-weight: 500; transition: transform .5s var(--ease-out); }
.home-article:hover .home-article__img--model span { transform: scale(1.05); }
.home-article__sub { margin-top: 4px; color: #5b87e3; font-size: 14px; }
.home-article:hover .home-article__img img { transform: scale(1.05); }
.home-article__title a { color: #ddd; font-size: 18px; line-height: 1.4; transition: color .25s; }
.home-article__title a:hover { color: var(--accent); }
.home-article__date { margin-top: 8px; color: #ddd; }

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
  .home-articles__wrap { flex-direction: column; }
}
@media (max-width: 1150px) {
  .home-case--featured { display: flex; flex-direction: column; }
  .home-case--featured .home-case__img { height: 372px; }
  .home-cases__list { flex-direction: column; }
}
@media (max-width: 991.98px) {
  .home-heading { font-size: 33px; line-height: 41px; }
  .home-services__lead { font-size: 24px; line-height: 35px; margin-bottom: 4rem; }
  .home-services__grid { grid-template-columns: 1fr; }
  .home-acc__btn { font-size: 24px; line-height: 34px; }
  .home-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .home-why, .home-diff, .home-stats, .home-services, .home-testi { padding-bottom: 80px; }
  .home-diff__head { text-align: left; }
}
@media (max-width: 899px) {
  .home-diff__viewport { height: auto; overflow: visible; margin-top: 0; }
  .home-diff__track { flex-direction: column; gap: 30px; height: auto; padding: 0 var(--gutter); transform: none !important; }
  .home-box { flex: 0 0 auto; width: 100%; max-width: 609px; height: auto; aspect-ratio: 609 / 368; background-size: 100% 100%; }
  .home-case p { display: none; }
  .home-case__img, .home-case--featured .home-case__img { height: 15rem; }
  .home-case h3 { font-size: 18px; line-height: 28px; }
  .home-readmore { font-size: 19px; }
  .home-cases__list { gap: 50px; margin-top: 3rem; }
  .home-cases__nav, .home-articles__nav { justify-content: flex-start; }
  .home-btn { font-size: 16px; }
  .home-articles__latest { display: none; }
  .home-article, .home-article:not(:last-child) {
    flex-direction: column; gap: 0;
    border: 0; padding: 0;
    border-radius: 12px; overflow: hidden;
    background: #1d222b;
  }
  .home-article__img { flex: none; width: 100%; border-radius: 0; }
  .home-article__img img { width: 100%; height: auto; }
  .home-article__details { width: 100%; padding: 16px; background: #000; }
  .home-articles__latest { display: flex; min-height: 0; }
  .home-articles__latest img { height: 240px; }
  .home-article__title a { font-size: 18px; font-weight: 200; color: #fff; }
  .home-article__date { font-size: 13px; color: #aaa; }
}
@media (max-width: 768px) {
  .home-hero { min-height: 60vh; }
  .home-hero__planet { width: 150vw; bottom: 4%; }
  .home-hero__title { font-size: 26px; line-height: 1.5; }
  .home-hero__rotator { height: 48px; }
  .home-hero__item { line-height: 48px; white-space: normal; }
  .home-hero__kicker { margin-bottom: 14px; font-size: 14px; }
  .home-hero__desc { padding: 20px 0; font-size: 20px; line-height: 28px; }
  .home-logos__row { gap: 8px 36px; padding: 64px 0; }
  .home-logo { min-height: 64px; }
  .home-logo__word { font-size: 28px; }
  .home-small-title { text-align: left; }
  .home-stats { text-align: left; }
  .home-stats__lead { font-size: 24px; text-align: left; }
  .home-diff__title { font-size: 33px; margin: 1rem 0 2rem; }
  .home-box { padding: 30px; }
  .home-box__title { margin: 55px 0 45px; max-width: calc(100% - 90px); font-size: 21px; }
  .home-box__text { font-size: 17px; }
  .home-testi__eyebrow, .home-testi__title { text-align: left; }
}
@media (max-width: 767px) {
  .home-why__text { font-size: 28px; line-height: 36px; }
  .home-why, .home-diff, .home-stats, .home-services, .home-testi { padding-bottom: 40px; }
  .home-stat__label { font-size: 18px; line-height: 24px; }
  .home-block-title { font-size: 32px; }
}
@media (max-width: 574px) {
  .home-tcard { width: 300px; height: auto; min-height: 285px; }
  .home-box { aspect-ratio: auto; min-height: 270px; background-size: cover; }
  .home-box__title { margin: 40px 0 20px; }
  .home-box__text { font-size: 14px; line-height: 21px; }
}
@media (max-width: 420px) {
  .home-hero__title { font-size: 22px; }
  .home-logo__word { font-size: 24px; }
}
/* Phones in landscape: the desktop-size headline would push the copy and button
   below a ~400px-tall screen. */
@media (max-height: 500px) and (orientation: landscape) {
  .home-hero { min-height: 0; padding: 36px 10px 48px; }
  .home-hero__title { font-size: 34px; line-height: 1.25; }
  .home-hero__rotator { height: 46px; }
  .home-hero__item { line-height: 46px; }
  .home-hero__kicker { margin-bottom: 10px; font-size: 14px; }
  .home-hero__desc { padding: 10px 0 24px; font-size: 18px; line-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__kicker, .home-hero__line, .home-hero__rotator, .home-hero__desc, .home-hero__actions { animation: none; }
  .home-marquee__track { animation: none !important; }
  .home-marquee__row { overflow-x: auto; }
  .home-box { opacity: 1; transform: none; transition: none; }
  /* No scroll-linked slide: let the differentiator row scroll horizontally on its own
     so the cards past the fold stay reachable. */
  .home-diff__viewport { overflow-x: auto; }
  .home-diff__track { transform: none !important; }
}

/* ===== LIGHT THEME (.theme-light) =====
   Scoped to <html class="theme-light">; removing the class restores the dark page.
   The hero is light too: a pale planet with the same blue lower-rim glow. The
   differentiator box art has its dark card baked into the PNGs, so those cards
   stay dark on the light page. */
.theme-light .home-heading,
.theme-light .home-block-title,
.theme-light .home-diff__title,
.theme-light .home-why__text,
.theme-light .home-stats__lead,
.theme-light .home-stat__value,
.theme-light .home-acc__btn { color: var(--text); }
.theme-light .home-eyebrow,
.theme-light .home-case__meta,
.theme-light .home-acc__link,
.theme-light .home-article__sub { color: var(--accent); }

/* Pill button: dark outline on light, white text once the blue sweep fills it */
.theme-light .home-btn { border-color: rgba(14, 21, 37, .28); color: var(--text); transition: border-color .4s ease-in-out, color .4s ease-in-out; }
.theme-light .home-btn:hover { border-color: var(--accent); color: #fff; }

/* Hero: white-to-pale background, pale sphere, blue lower rim, softer glow */
.theme-light .home-hero { background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #f5f7fb 55%, #eef2fa 100%); }
.theme-light .home-hero__title { color: #0e1525; }
.theme-light .home-hero__kicker { color: var(--accent); }
.theme-light .home-hero__desc { color: #2b3445; }
.theme-light .home-btn--solid { border-color: var(--accent); color: #fff; }
.theme-light .home-btn--solid:hover { border-color: #2559d2; }
.theme-light .home-hero__body {
  background:
    radial-gradient(circle at 50% 100%, rgba(53, 103, 219, .16) 0%, rgba(53, 103, 219, .04) 24%, transparent 44%),
    radial-gradient(circle at 50% 30%, #ffffff 0%, #f3f6fc 55%, #e9eef8 100%);
}
.theme-light .home-hero__halo {
  background: radial-gradient(closest-side, transparent 80%, rgba(53, 103, 219, .22) 89%, rgba(66, 52, 219, .08) 95%, transparent 100%);
}
.theme-light .home-hero__rim {
  box-shadow:
    inset 0 -3px 2px -1px rgba(53, 103, 219, .9),
    inset 0 -16px 26px -10px rgba(83, 126, 225, .55),
    inset 0 -60px 90px -40px rgba(53, 103, 219, .35),
    0 26px 70px -18px rgba(53, 103, 219, .4),
    0 70px 170px -40px rgba(66, 52, 219, .25);
}

/* White bands behind the differentiator and builds sections (top margin moved
   inside as padding, so spacing is unchanged) */
.theme-light .home-diff { margin-top: 0; padding-top: 3rem; background: #fff; }
.theme-light .home-cases { margin-top: 0; padding: 5rem 0 3.5rem; background: #fff; }
.theme-light .home-articles { margin-top: 3.5rem; }

/* Counters */
.theme-light .home-stat__label { color: var(--muted); border-bottom-color: var(--accent); }

/* Core offers accordion */
.theme-light .home-services__lead { color: var(--text-2); }
.theme-light .home-acc__item { border-bottom-color: #d6dce7; }
.theme-light .home-acc__btn:hover { color: var(--accent); }
.theme-light .home-acc__sign::before,
.theme-light .home-acc__sign::after { background: currentColor; }
.theme-light .home-acc__body { color: var(--text-2); }
.theme-light .home-acc__body a:hover { color: var(--accent); }

/* Testimonial cards: four colour tints from the logo blues, cycled along each row
   (the rows are shuffled per visit, so neighbours always differ). */
.theme-light .home-tcard {
  --tc-a: #3567db; --tc-b: #2340a8;
  background: linear-gradient(150deg, var(--tc-a) 0%, var(--tc-b) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 16px 34px -16px rgba(35, 64, 168, .55);
}
.theme-light .home-tcard:nth-child(4n+2) { --tc-a: #4234db; --tc-b: #2a1f8f; }
.theme-light .home-tcard:nth-child(4n+3) { --tc-a: #1f3a7a; --tc-b: #0e1a3d; }
.theme-light .home-tcard:nth-child(4n+4) { --tc-a: #2f6fe0; --tc-b: #1b4fb8; }
.theme-light .home-tcard__avatar { background: rgba(255, 255, 255, .95); color: #2340a8; }
.theme-light .home-tcard__name { color: #fff; }
.theme-light .home-tcard__meta { color: rgba(255, 255, 255, .78); }
.theme-light .home-tcard__text { color: rgba(255, 255, 255, .9); }

/* Tag words: dark outline + solid ink */
.theme-light .home-logo__word { -webkit-text-stroke-color: rgba(14, 21, 37, .7); }
.theme-light .home-logo__word--solid { color: var(--text); }
.theme-light .home-logo:hover .home-logo__word,
.theme-light .home-logo:focus-visible .home-logo__word { color: var(--accent); }
.theme-light .home-acc__also { color: var(--text-2); }
.theme-light .home-acc__also a { color: var(--text); }
.theme-light .home-acc__also a:hover { color: var(--accent); }

/* Representative builds */
.theme-light .home-case,
.theme-light .home-case h3 { color: var(--text); }
.theme-light .home-case p,
.theme-light .home-readmore { color: var(--muted); }
.theme-light .home-case:hover .home-readmore { color: var(--text); }
.theme-light .home-case__img { box-shadow: 0 10px 30px -12px rgba(14, 21, 37, .18); }
.theme-light .home-case__art {
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(53, 103, 219, .16), transparent 70%),
    radial-gradient(60% 55% at 0% 100%, rgba(66, 52, 219, .1), transparent 70%),
    #f3f6fc;
  border-color: #dfe5f0;
}
.theme-light .home-case__art::before { background-image: radial-gradient(rgba(14, 21, 37, .1) 1px, transparent 1.2px); }
.theme-light .mk,
.theme-light .mk-node,
.theme-light .mk-toast { color: #1f2735; }
.theme-light .mk-win,
.theme-light .mk-node,
.theme-light .mk-phone,
.theme-light .mk-toast { background: #fff; border-color: #dde3ee; box-shadow: 0 1.2em 2.4em -1.2em rgba(14, 21, 37, .25); }
.theme-light .mk-chat__head,
.theme-light .mk-bar,
.theme-light .mk-dash__side { border-color: #e6eaf2; background: #f8faff; }
.theme-light .mk-chat__name,
.theme-light .mk-dash__title,
.theme-light .mk-phone__title { color: #0e1525; }
.theme-light .mk-msg--bot,
.theme-light .mk-chat__input,
.theme-light .mk-url,
.theme-light .mk-kpi,
.theme-light .mk-dash__chart,
.theme-light .mk-phone__kpi { border-color: #e3e8f1; background: #f1f4fa; color: #2b3445; }
.theme-light .mk-chip { border-color: #d6dce7; color: #5b6578; }
.theme-light .mk-chip.is-on,
.theme-light .mk-dash__nav.is-on { border-color: rgba(53, 103, 219, .35); background: rgba(53, 103, 219, .1); color: var(--accent); }
.theme-light .mk-src { border-top-color: #e3e8f1; color: var(--accent); }
.theme-light .mk-handoff::before,
.theme-light .mk-handoff::after { background: #e3e8f1; }
.theme-light .mk-skel { background: linear-gradient(90deg, #dfe5f0, #e9eef6); }
.theme-light .mk-bar i,
.theme-light .mk-phone__notch { background: #dfe5f0; }
.theme-light .mk-node svg { color: var(--accent); }
.theme-light .mk-wire { stroke: rgba(53, 103, 219, .3); }
.theme-light .mk-pulse,
.theme-light .mk-dash__line,
.theme-light .mk-phone__chart path { stroke: var(--accent); }

/* Working together */
.theme-light .home-articles__latest-title { color: var(--text); }
.theme-light .home-article:not(:last-child) { border-bottom-color: var(--line); }
.theme-light .home-article__img--model {
  background: radial-gradient(circle at 30% 20%, rgba(53, 103, 219, .22), transparent 60%), #eef2fb;
  border-color: rgba(53, 103, 219, .3);
}
.theme-light .home-article__img--model span { color: #1d3f8f; }
.theme-light .home-article__title a { color: var(--text); }
.theme-light .home-article__title a:hover { color: var(--accent); }
.theme-light .home-article__date { color: var(--muted); }
@media (max-width: 899px) {
  .theme-light .home-article,
  .theme-light .home-article:not(:last-child) {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px -12px rgba(14, 21, 37, .12);
  }
  .theme-light .home-article__img--model { border-width: 0 0 1px; }
  .theme-light .home-article__details { background: #fff; }
  .theme-light .home-article__title a { color: var(--text); }
  .theme-light .home-article__date { color: var(--muted); }
}