/* =========================================================
   /startup-mvp-development — astronaut / mission theme.
   Loaded after mvp.css; everything is scoped to body.sx-space.
   ========================================================= */
/* Accent palette: red, with violet (not orange) as the second gradient colour.
   --hg-mustard / --hg-coral keep their names from the earlier palette but now hold violet / light red. */
body.sx-space {
  --hg-red: #C42E1B; --hg-red-2: #E0303C; --hg-red-deep: #8F1D12; --hg-coral: #F0606E;
  --hg-mustard: #9B6BFF; --hg-violet: #9B6BFF;
  --sx-orange: var(--hg-red); --sx-orange-2: var(--hg-red-2);
  --sx-grad: linear-gradient(120deg, #C42E1B 0%, #E0303C 45%, #ff6b00 100%);
}
/* styles.css forces a white body with !important */
body.sx-space { background: #040407 !important; background-color: #040407 !important; color: #fff; }
.sx-space main { position: relative; z-index: 1; }
.sx-space .footer-block { position: relative; z-index: 1; }

/* fixed layers: stars, grain, vignette */
.mx-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.mx-grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cine-grain .9s steps(6) infinite;
}
@keyframes cine-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* type: Playfair Display headlines, like the homepage banners */
.sx-space .sx-h2, .sx-space .sx-final h2, .mx-hero h1, .sx-space .sx-pack h3, .sx-space .sx-case h3 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900; letter-spacing: 0 !important;
}
.sx-space .sx-h2 { color: #fff; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.08; }
.sx-space .sx-lead { color: rgba(255, 255, 255, .64); }
.sx-space .sx-eyebrow, .sx-space .sx-eyebrow--dark { color: var(--hg-coral); letter-spacing: .22em; }

/* =========================================================
   HERO
   ========================================================= */
.mx-hero { position: relative; height: 100vh; min-height: 680px; overflow: hidden; isolation: isolate; background: #040407; }
.mx-hero__canvas, .mx-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mx-hero__canvas { z-index: 1; opacity: 0; transition: opacity .8s ease; }
.mx-hero__canvas.is-ready { opacity: 1; }
.mx-hero__photo { z-index: 0; object-fit: cover; object-position: 70% 30%; filter: brightness(.6); }
.mx-hero__canvas.is-ready ~ .mx-hero__photo { visibility: hidden; }
/* letterbox that opens on load */
.mx-hero__bars i { position: absolute; left: 0; right: 0; z-index: 2; height: 50%; background: #000; transition: height 1.8s cubic-bezier(.7, 0, .2, 1) .2s; }
.mx-hero__bars i:first-child { top: 0; } .mx-hero__bars i:last-child { bottom: 0; }
.mx-hero.is-live .mx-hero__bars i { height: 0; }

.mx-hero__copy { position: absolute; z-index: 3; left: clamp(20px, 8vw, 140px); bottom: 14vh; max-width: 760px; }
.mx-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hg-red-2); box-shadow: 0 0 0 4px rgba(224, 48, 60, .22); animation: mx-blink 1.4s infinite; display: inline-block; }
@keyframes mx-blink { 50% { opacity: .3; } }
.mx-hero h1 { margin: 18px 0 18px !important; color: #fff; font-size: clamp(40px, 5.6vw, 88px); line-height: 1.02; text-align: left; }
.mx-hero h1 em { font-style: normal; background: var(--sx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mx-line { display: block; overflow: hidden; padding-bottom: .04em; }
.mx-line > span { display: inline-block; white-space: nowrap; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.16, 1, .3, 1); }
.mx-hero.is-live .mx-line > span { transform: none; }
.mx-hero.is-live .mx-line:nth-child(1) > span { transition-delay: 1.1s; }
.mx-hero.is-live .mx-line:nth-child(2) > span { transition-delay: 1.25s; }
.mx-hero__sub { max-width: 520px; margin: 0 !important; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, .7); text-align: left; }
.mx-hero__sub strong { color: #fff; }
.mx-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mx-kicker, .mx-hero__sub, .mx-hero__ctas, .mx-hero .sx-offer.is-on, .mx-telemetry, .mx-hero__scroll { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
.mx-hero.is-live .mx-kicker { opacity: 1; transform: none; transition-delay: .9s; }
.mx-hero.is-live .mx-hero__sub { opacity: 1; transform: none; transition-delay: 1.55s; }
.mx-hero.is-live .sx-offer.is-on { opacity: 1; transform: none; transition-delay: 1.65s; }
.mx-hero.is-live .mx-hero__ctas { opacity: 1; transform: none; transition-delay: 1.75s; }
.mx-hero.is-live .mx-telemetry { opacity: 1; transform: none; transition-delay: 2s; }
.mx-hero.is-live .mx-hero__scroll { opacity: 1; transform: none; transition-delay: 2.4s; }

.mx-telemetry {
  position: absolute; z-index: 3; right: clamp(20px, 4vw, 64px); top: 180px; width: 300px; padding: 16px 18px 6px;
  border-radius: 16px; background: rgba(6, 6, 9, .55); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(14px); font-size: 12.5px;
}
.mx-telemetry__h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hg-coral); }
.mx-telemetry__h b { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.mx-telemetry__h .mx-dot { width: 6px; height: 6px; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .2); }
.mx-telemetry dl { margin: 0; }
.mx-telemetry dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.mx-telemetry dt { font-weight: 400; color: rgba(255, 255, 255, .5); }
.mx-telemetry dd { margin: 0; color: #fff; font-weight: 500; text-align: right; }

.mx-hero__scroll { position: absolute; z-index: 3; right: clamp(20px, 4vw, 64px); bottom: 7vh; display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .6) !important; text-decoration: none !important; }
.mx-hero__scroll i { width: 1px; height: 56px; background: linear-gradient(rgba(255, 255, 255, .7), transparent); position: relative; overflow: hidden; }
.mx-hero__scroll i::after { content: ""; position: absolute; left: 0; top: -20px; width: 1px; height: 20px; background: var(--hg-coral); animation: mx-drop 1.8s infinite; }
@keyframes mx-drop { to { transform: translateY(80px); } }
.mx-hero .sx-offer { margin-top: 22px; }

/* =========================================================
   CHAPTER RAIL
   ========================================================= */
.mx-rail { position: fixed; z-index: 30; right: 22px; top: 50%; transform: translate(20px, -50%); opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s; }
.mx-rail.is-visible { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.mx-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.mx-rail a { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; text-decoration: none !important; color: rgba(255, 255, 255, .45) !important; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.mx-rail a i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); transition: all .3s; flex: none; }
.mx-rail a span { opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.mx-rail a:hover span, .mx-rail a:focus-visible span { opacity: 1; transform: none; }
.mx-rail a span { background: rgba(6, 6, 9, .8); padding: 5px 9px; border-radius: 6px; }
.mx-rail a.is-past i { background: rgba(240, 96, 110, .5); border-color: transparent; }
.mx-rail a.is-on { color: #fff !important; }
.mx-rail a.is-on i { background: var(--hg-red-2); border-color: var(--hg-red-2); box-shadow: 0 0 12px 2px rgba(224, 48, 60, .7); transform: scale(1.3); }
.mx-rail__alt { margin-top: 22px; text-align: right; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .4); line-height: 1.5; }
.mx-rail__alt b { display: block; font-size: 18px; letter-spacing: .06em; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) { .mx-rail { display: none; } }

/* =========================================================
   SECTIONS → deep space
   ========================================================= */
.sx-space .sx-section, .sx-space .sx-section--cream, .sx-space .sx-section--dark { background: transparent; }
.sx-space .sx-section--cream { background: linear-gradient(180deg, rgba(224, 48, 60, .035), rgba(123, 92, 255, .03)); }
.sx-space .sx-section--dark { background: rgba(4, 4, 7, .55); }
/* scan line sweeping each chapter as it arrives */
.sx-space .sx-section::before, .sx-space .sx-final::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(240, 96, 110, .9), transparent);
  transform: scaleX(0); opacity: 0;
}
.sx-space .is-seen::before, .sx-space .sx-final.is-seen::after { animation: mx-scan 1.6s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes mx-scan { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: .25; } }
.sx-space .sx-section .sx-h2 { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.16, 1, .3, 1) .15s; }
.sx-space .is-seen .sx-h2 { clip-path: inset(0 -5% 0 0); }

/* glass cards */
.sx-space .sx-who__card, .sx-space .sx-get__item, .sx-space .sx-stack__group {
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(8px);
}
.sx-space .sx-who__card:hover, .sx-space .sx-get__item:hover, .sx-space .sx-stack__group:hover { border-color: rgba(240, 96, 110, .45); box-shadow: 0 30px 60px -30px rgba(196, 46, 27, .55); }
.sx-space .sx-who__card h3, .sx-space .sx-get__item h4, .sx-space .sx-step h3 { color: #fff; }
.sx-space .sx-who__card p, .sx-space .sx-get__item p, .sx-space .sx-step p { color: rgba(255, 255, 255, .6); }
.sx-space .sx-stack__group h4 { color: rgba(255, 255, 255, .45); }
.sx-space .sx-stack__group li { background: rgba(255, 255, 255, .06); color: #fff; }
.sx-space .sx-stack__group--sec { background: linear-gradient(160deg, rgba(196, 46, 27, .22), rgba(255, 255, 255, .03)); border-color: rgba(240, 96, 110, .35); }
.sx-space .sx-pack { background: rgba(14, 14, 20, .7); backdrop-filter: blur(10px); }

/* flight plan: dots become waypoints, a comet rides the line */
.sx-space .sx-steps__line { background: rgba(255, 255, 255, .1); }
.sx-space .sx-step__dot { background: rgba(10, 10, 14, .9); border-color: rgba(255, 255, 255, .18); color: #fff; }
.sx-space .sx-step.is-lit .sx-step__dot { background: var(--hg-red-2); border-color: var(--hg-red-2); box-shadow: 0 0 30px -4px rgba(224, 48, 60, .9); }
.sx-steps__comet {
  position: absolute; z-index: 2; top: 35px; left: calc(4% + var(--p, 0) * 92%); width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(240, 96, 110, .35), 0 0 24px 8px rgba(224, 48, 60, .8);
  pointer-events: none; transition: left .2s linear, top .2s linear;
}
.sx-steps__comet::after { content: ""; position: absolute; right: 10px; top: 50%; width: 90px; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, rgba(240, 110, 130, .9)); }
@media (max-width: 991px) {
  .sx-steps__comet { left: 35px; top: calc(10px + var(--p, 0) * (100% - 20px)); }
  .sx-steps__comet::after { right: 50%; top: auto; bottom: 10px; width: 2px; height: 70px; margin: 0 -1px 0 0; background: linear-gradient(0deg, rgba(240, 110, 130, .9), transparent); }
}

/* missions flown */
.sx-space .sx-case { background: rgba(10, 10, 15, .75); }
.sx-space .sx-case__media::before, .sx-space .sx-case__media::after { content: ""; position: absolute; left: 0; right: 0; height: 9%; background: #000; z-index: 1; }
.sx-space .sx-case__media::before { top: 0; } .sx-space .sx-case__media::after { bottom: 0; }
.sx-space .sx-case__media img { filter: saturate(.9) contrast(1.05); }

/* mission control (FAQ) */
.sx-space .sx-faq { border-color: rgba(255, 255, 255, .1); }
.sx-space .sx-faq summary { color: #fff; }
.sx-space .sx-faq summary i { background: rgba(255, 255, 255, .08); }
.sx-space .sx-faq summary i::before, .sx-space .sx-faq summary i::after { background: #fff; }
.sx-space .sx-faq__a { color: rgba(255, 255, 255, .62); }
.sx-space .sx-link { color: var(--hg-coral) !important; }

/* launch sequence */
.sx-space .sx-final { background: transparent; }
.mx-countdown { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .5); letter-spacing: .1em; }
.mx-countdown span { font-size: 14px; text-transform: uppercase; }
.mx-countdown b { font-size: 44px; font-weight: 700; color: #fff; line-height: 1; }
.mx-countdown em { font-style: normal; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--hg-coral); opacity: 0; transition: opacity .5s; margin-left: 10px; }
.mx-countdown.is-tick b { animation: mx-tick .26s ease-out; }
@keyframes mx-tick { from { opacity: .3; transform: translateY(-6px); } }
.mx-countdown.is-done b { color: var(--hg-red-2); text-shadow: 0 0 24px rgba(224, 48, 60, .8); }
.mx-countdown.is-done em { opacity: 1; }
.sx-final.is-ignited::before { background: radial-gradient(circle, rgba(224, 48, 60, .55), transparent 65%); transition: background 1.5s; }
.sx-final.is-ignited #mvp-submit { animation: mx-ignite 2.4s ease-in-out infinite; }
@keyframes mx-ignite { 50% { box-shadow: 0 0 0 6px rgba(224, 48, 60, .18), 0 18px 50px -10px rgba(224, 48, 60, 1); } }
.sx-space .sx-form { background: rgba(12, 12, 18, .82); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(16px); color: #fff; }
.sx-space .sx-form h3, .sx-space .sx-field label, .sx-space .sx-field__label { color: #fff !important; }
.sx-space .sx-field input, .sx-space .sx-field select, .sx-space .sx-field textarea { background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: #fff; }
.sx-space .sx-field select option { color: #111; }
.sx-space .sx-field input::placeholder, .sx-space .sx-field textarea::placeholder { color: rgba(255, 255, 255, .35); }
.sx-space .sx-field input:focus, .sx-space .sx-field select:focus, .sx-space .sx-field textarea:focus { background-color: rgba(255, 255, 255, .08); }
.sx-space .sx-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.sx-space .sx-pills label { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: #fff; }
.sx-space .sx-pills input:checked + label { background: var(--hg-red-2); border-color: var(--hg-red-2); }
.sx-space .sx-form__fine, .sx-space .sx-form__done p { color: rgba(255, 255, 255, .55); }
.sx-space .sx-form__done h3 { color: #fff; }
.sx-space .sx-form.is-done { animation: mx-liftoff 1.2s cubic-bezier(.16, 1, .3, 1); }
@keyframes mx-liftoff { 0% { transform: translateY(0); } 30% { transform: translateY(8px); } 100% { transform: translateY(0); } }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {
  .mx-hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 40px; }
  .mx-hero__copy { position: relative; left: auto; bottom: auto; padding: 46vh 20px 0; }
  .mx-hero h1 { font-size: clamp(36px, 10.5vw, 48px); }
  .mx-line > span { white-space: normal; }
  .mx-hero::after { content: ""; position: absolute; inset: 30% 0 0 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(4, 4, 7, .78) 30%, #040407 75%); }
  .mx-hero__copy, .mx-telemetry { z-index: 3; }
  .mx-hero__ctas .sx-btn { width: 100%; }
  .mx-telemetry { position: relative; top: auto; right: auto; width: auto; margin: 26px 20px 0; }
  .mx-hero__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-grain, .mx-dot { animation: none; }
  .mx-hero__bars { display: none; }
  .mx-line > span, .mx-kicker, .mx-hero__sub, .mx-hero__ctas, .mx-telemetry, .mx-hero .sx-offer.is-on { transform: none !important; opacity: 1 !important; }
  .sx-space .sx-section .sx-h2 { clip-path: none; }
}

/* =========================================================
   AWARD LAYER (2026js/mvp-award.js)
   ========================================================= */
html.mx-loading, html.mx-loading body { overflow: hidden; }

/* preloader: mission counter, then the curtain lifts */
#mx-loader {
  position: fixed; inset: 0; z-index: 100000; background: #040407; color: #fff; font-family: var(--sx-font);
  display: flex; flex-direction: column; justify-content: space-between; padding: 40px clamp(20px, 6vw, 80px);
  transition: transform 1.1s cubic-bezier(.76, 0, .24, 1);
}
#mx-loader.is-out { transform: translateY(-100%); }
.mx-loader__top, .mx-loader__bottom { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.mx-loader__num { display: flex; align-items: flex-start; gap: 6px; }
.mx-loader__num b { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: clamp(110px, 22vw, 300px); line-height: .8; font-variant-numeric: tabular-nums; }
.mx-loader__num small { font-size: 22px; color: var(--hg-coral); margin-top: 10px; }
.mx-loader__bar { height: 1px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.mx-loader__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--hg-red), var(--hg-mustard)); transform-origin: left; transform: scaleX(0); }

/* scroll progress */
.mx-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 9998; pointer-events: none; }
.mx-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--hg-red), var(--hg-mustard)); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 12px rgba(224, 48, 60, .8); }

/* marquee band */
.mx-marquee { position: relative; z-index: 1; overflow: hidden; padding: 34px 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(4, 4, 7, .6); }
.mx-marquee__track { display: flex; width: max-content; align-items: center; gap: 34px; white-space: nowrap; will-change: transform; }
.mx-marquee__track span { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: clamp(42px, 7vw, 104px); line-height: 1; color: #fff; }
.mx-marquee__track span.o { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55); }
.mx-marquee__track i { font-style: normal; font-size: clamp(22px, 3vw, 40px); color: var(--hg-red-2); }
.mx-marquee__track--alt { margin-top: 18px; gap: 26px; }
.mx-marquee__track--alt span { font-size: clamp(28px, 4vw, 58px); }
.mx-marquee__track--alt span.o { -webkit-text-stroke-color: rgba(240, 96, 110, .55); }
.mx-marquee__track--alt i { color: rgba(255, 255, 255, .25); }

/* custom cursor */
html.mx-has-cursor, html.mx-has-cursor * { cursor: none !important; }
.mx-cursor-dot, .mx-cursor-ring { position: fixed; left: 0; top: 0; z-index: 100001; pointer-events: none; transition: opacity .3s; }
.mx-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--hg-red-2); }
.mx-cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55);
  display: grid; place-items: center; transition: width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1), margin .35s cubic-bezier(.2, .8, .2, 1), background .3s, border-color .3s, opacity .3s;
}
.mx-cursor-ring span { font: 600 11px/1 var(--sx-font); letter-spacing: .16em; text-transform: uppercase; color: #040407; opacity: 0; transition: opacity .2s; }
.mx-cursor-ring.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--hg-coral); background: rgba(224, 48, 60, .12); }
.mx-cursor-ring.is-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: #fff; border-color: #fff; }
.mx-cursor-ring.is-label span { opacity: 1; }
.mx-cursor-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* magnetic buttons ease back */
.sx-space .sx-btn { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, background .3s; }

/* image reveal masks */
.sx-space .sx-case__media img, .sx-space .sx-consumer img { clip-path: inset(100% 0 0 0); transform: scale(1.25); transition: clip-path 1.4s cubic-bezier(.76, 0, .24, 1), transform 2s cubic-bezier(.16, 1, .3, 1), opacity .4s; }
.sx-space .is-revealed .sx-case__media img, .sx-space .sx-consumer a.is-revealed img { clip-path: inset(0 0 0 0); transform: scale(1); }
.sx-space .sx-case:hover .sx-case__media img { transform: scale(1.05); }

@media (max-width: 767px) {
  .mx-marquee { padding: 22px 0; }
}
@media (prefers-reduced-motion: reduce) {
  #mx-loader { display: none; }
  .sx-space .sx-case__media img, .sx-space .sx-consumer img { clip-path: none; transform: none; }
}

/* colour-only overrides for orange values hardcoded in mvp.css (layout unchanged) */
.sx-space .sx-btn--primary { box-shadow: 0 14px 34px -12px rgba(196, 46, 27, .75); }
.sx-space .sx-btn--primary:hover { box-shadow: 0 20px 40px -12px rgba(196, 46, 27, .95); }
.sx-space .sx-pack--featured { background: linear-gradient(160deg, #2a0f14 0%, #15131c 60%); border-color: rgba(224, 48, 60, .55); box-shadow: 0 40px 80px -40px rgba(196, 46, 27, .8); }
.sx-space .sx-pack li::before { background-color: rgba(155, 107, 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='%23B48CFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.sx-space .sx-pack__time svg, .sx-space .sx-final__points svg { color: var(--hg-violet); }
.sx-space .sx-offer { border-color: rgba(155, 107, 255, .6); }
.sx-space .sx-handover li::before { border-color: var(--hg-red-2); }
.sx-space .sx-handover::before { background: radial-gradient(circle, rgba(196, 46, 27, .45), transparent 70%); }
.sx-space .sx-icon { box-shadow: 0 14px 30px -14px rgba(196, 46, 27, .9); }
.sx-space .sx-final::before { background: radial-gradient(circle, rgba(196, 46, 27, .35), transparent 65%); }
.sx-space .sx-case .sx-link, .sx-space .sx-pbr dt { color: var(--hg-coral) !important; }
.sx-space .sx-field input:focus, .sx-space .sx-field select:focus, .sx-space .sx-field textarea:focus { border-color: var(--hg-red-2); box-shadow: 0 0 0 4px rgba(224, 48, 60, .14); }

/* phones: keep the sticky CTA bar clear of the Tawk chat bubble (bottom-left)
   and bring the call button back, sitting just above the bar */
@media (max-width: 767px) {
  body.sx-page .sx-mobilebar { left: 86px; right: 12px; bottom: 14px; }
  body.sx-page .sx-mobilebar .sx-btn { font-size: 13px; padding: 0 10px; gap: 6px; }
  body.sx-page .tel { display: block; bottom: 84px; right: 14px; }
}

/* budget select: mvp.css's :focus rule uses the `background` shorthand, which resets
   background-repeat, so the arrow tiled across the field once a value was chosen */
.sx-space .sx-field select,
.sx-space .sx-field select:focus,
.sx-space .sx-field select:valid {
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* reCAPTCHA renders inside Google's iframe, so its own box can't be made transparent;
   it uses the dark theme (data-theme="dark") and sits flush, clipped to rounded corners */
.sx-space .sx-form__captcha .g-recaptcha { display: inline-block; border-radius: 6px; overflow: hidden; line-height: 0; background: transparent; }
.sx-space .sx-form__captcha .g-recaptcha iframe { display: block; }

/* case studies: brand-lit stage with the real device mockups + client logo */
.sx-stage { position: relative; overflow: hidden; isolation: isolate; min-height: 380px; display: grid; place-items: center; }
.sx-space .sx-stage::before, .sx-space .sx-stage::after { content: none; }   /* no cinema bars on the stages */
.sx-stage { background: radial-gradient(120% 90% at 55% 45%, var(--st-1) 0%, var(--st-2) 45%, #07060a 100%); }
.sx-stage--clikpay { --st-1: #ff8a3d; --st-2: #6e1a0c; }
.sx-stage--gni { --st-1: #3f7bff; --st-2: #0d2a78; }
.sx-stage--redteam { --st-1: #f13538; --st-2: #5a0b10; }
/* fine dot grid + a soft floor glow under the devices */
.sx-stage > .sx-stage__device { z-index: 1; }
.sx-stage { background-image:
  radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.2px),
  radial-gradient(60% 18% at 50% 88%, rgba(0, 0, 0, .55), transparent 70%),
  radial-gradient(120% 90% at 55% 45%, var(--st-1) 0%, var(--st-2) 45%, #07060a 100%);
  background-size: 18px 18px, auto, auto; }
.sx-space .sx-case__media.sx-stage img.sx-stage__device {
  position: relative; inset: auto; width: 86%; max-width: 560px; height: auto; max-height: 86%; object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); margin: 40px auto 24px;
  transform: none; animation: sx-float 7s ease-in-out infinite;
}
.sx-space .sx-case:hover .sx-case__media.sx-stage img.sx-stage__device { transform: none; animation-play-state: paused; }
@keyframes sx-float { 50% { translate: 0 -10px; } }
.sx-stage--clikpay img.sx-stage__device { width: 64%; max-width: 380px; }
.sx-stage__logo {
  position: absolute; z-index: 2; left: 22px; top: 22px; display: inline-flex; align-items: center; height: 44px; padding: 0 14px;
  border-radius: 12px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.sx-stage__logo--light { background: #fff; }
.sx-stage__logo--gni { background: rgba(13, 42, 120, .7); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px); height: 56px; padding: 0 12px; }
.sx-space .sx-case__media.sx-stage .sx-stage__logo img { position: static; inset: auto; width: auto; height: 30px; object-fit: contain; clip-path: none; transform: none; animation: none; }
.sx-space .sx-case__media.sx-stage .sx-stage__logo--gni img { height: 42px; }
/* the reveal mask from the award layer now applies to the device only */
.sx-space .sx-case__media.sx-stage img.sx-stage__device { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(.76, 0, .24, 1); }
.sx-space .is-revealed .sx-case__media.sx-stage img.sx-stage__device { clip-path: inset(-20% -20% -20% -20%); }

@media (max-width: 991px) {
  .sx-stage { min-height: 300px; }
  .sx-space .sx-case__media.sx-stage img.sx-stage__device { width: 82%; margin: 64px auto 20px; }
  .sx-stage--clikpay img.sx-stage__device { width: 60%; }
}
@media (max-width: 480px) {
  .sx-stage { min-height: 260px; }
  .sx-stage__logo { left: 14px; top: 14px; height: 38px; padding: 0 10px; }
  .sx-space .sx-case__media.sx-stage .sx-stage__logo img { height: 24px; }
  .sx-space .sx-case__media.sx-stage .sx-stage__logo--gni img { height: 34px; }
  .sx-space .sx-case__media.sx-stage img.sx-stage__device { width: 88%; margin: 58px auto 16px; }
  .sx-stage--clikpay img.sx-stage__device { width: 66%; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-space .sx-case__media.sx-stage img.sx-stage__device { animation: none; clip-path: none; }
}

/* ---------- estimate form: API error + thank-you modal ---------- */
.sx-form__err { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: #ffb4b9; background: rgba(224, 48, 60, .12); border: 1px solid rgba(224, 48, 60, .35); }
.sx-modal { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; }
.sx-modal[hidden] { display: none; }
.sx-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 4, 10, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s ease; }
.sx-modal__card { position: relative; width: 100%; max-width: 440px; padding: 44px 32px 32px; border-radius: 24px; text-align: center; color: #fff; outline: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(224, 48, 60, .22), transparent 60%), linear-gradient(180deg, #14111c, #0a0910);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(224, 48, 60, .15) inset;
  opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .25, 1.15); }
.sx-modal.is-open .sx-modal__backdrop { opacity: 1; }
.sx-modal.is-open .sx-modal__card { opacity: 1; transform: none; }
.sx-modal__x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.sx-modal__x:hover, .sx-modal__x:focus-visible { background: rgba(255, 255, 255, .14); color: #fff; }
.sx-modal__orbit { position: relative; width: 96px; height: 96px; margin: 0 auto 22px; display: grid; place-items: center; }
.sx-modal__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(224, 48, 60, .45); }
.sx-modal.is-open .sx-modal__ring { animation: sx-ring 2.4s ease-out infinite; }
.sx-modal.is-open .sx-modal__ring--2 { animation-delay: 1.2s; }
@keyframes sx-ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.sx-modal__tick { width: 72px; height: 72px; border-radius: 50%; background: var(--sx-grad); box-shadow: 0 16px 40px -12px rgba(224, 48, 60, .9); }
.sx-modal__tick circle { fill: none; }
.sx-modal__tick path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.sx-modal.is-open .sx-modal__tick path { animation: sx-tick .5s .35s ease-out forwards; }
@keyframes sx-tick { to { stroke-dashoffset: 0; } }
.sx-modal__kicker { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.sx-modal__title { margin: 0 0 12px; font-family: "Playfair Display", serif; font-size: clamp(28px, 6vw, 36px); line-height: 1.15; color: #fff; }
.sx-modal__text { margin: 0 0 26px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .68); }
.sx-modal__ok { min-width: 160px; justify-content: center; }
body.sx-modal-open { overflow: hidden; }
@media (max-width: 480px) { .sx-modal__card { padding: 40px 22px 26px; } }
@media (prefers-reduced-motion: reduce) {
  .sx-modal__card, .sx-modal__backdrop { transition: none; }
  .sx-modal.is-open .sx-modal__ring { animation: none; }
  .sx-modal__tick path { stroke-dashoffset: 0; }
}

/* MVP page hero (desktop): the Telemetry · Go for launch card sits at the bottom right, just above the
   "Begin the mission" scroll cue in that corner. */
@media (min-width: 992px) {
  .mx-telemetry { top: auto; bottom: 150px; }
}

/* H1 lead-in line: "MVP development company in Kochi" sits small above "Launch your MVP in 8–12 weeks."
   It is part of the H1 for search, styled like a label so the hero keeps its look. */
.mx-hero h1 .mx-line--pre > span {
  font-family: "Poppins", sans-serif; font-size: max(15px, .3em); font-weight: 600; letter-spacing: .04em;
  line-height: 1.5; color: rgba(255, 255, 255, .88); white-space: normal;
}
.mx-hero h1 .mx-line--pre { margin-bottom: .18em; }
.mx-hero.is-live .mx-line:nth-child(3) > span { transition-delay: 1.4s; }
.sx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* custom cursor stays visible above the success modal */
.mx-cursor-dot, .mx-cursor-ring { z-index: 2147483647; }