/* =========================================================
   Saihasoft 2026 — Startups / MVP design layer
   Shared by the homepage hero and /startup-mvp-development
   All classes are prefixed sx- so they never clash with 2021css.
   ========================================================= */
:root {
  --sx-ink: #0b0b12;
  --sx-ink-2: #13131d;
  --sx-ink-3: #1b1b28;
  --sx-line: rgba(255, 255, 255, 0.1);
  --sx-text: #f5f3ef;
  --sx-dim: rgba(245, 243, 239, 0.68);
  --sx-orange: #e5410f;
  --sx-orange-2: #ff7a3d;
  --sx-violet: #8b6cff;
  --sx-cream: #f7f4ef;
  --sx-paper: #ffffff;
  --sx-body: #1d1d27;
  --sx-muted: #5e5e6e;
  --sx-radius: 22px;
  --sx-grad: linear-gradient(120deg, #e5410f 0%, #ff7a3d 45%, #fff800 100%);
  --sx-shadow: 0 30px 60px -30px rgba(11, 11, 18, 0.45);
  --sx-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sx-scope, .sx-scope * { box-sizing: border-box; }
.sx-scope { font-family: var(--sx-font); -webkit-font-smoothing: antialiased; }
.sx-scope h1, .sx-scope h2, .sx-scope h3, .sx-scope h4, .sx-scope p { margin: 0; letter-spacing: normal; text-align: left; }
.sx-scope a { text-decoration: none; }
.sx-scope img { max-width: 100%; display: block; }

.sx-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .sx-wrap { padding: 0 16px; } }

.sx-grad-text {
  background: var(--sx-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.sx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sx-orange-2);
}
.sx-eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.sx-eyebrow--dark { color: var(--sx-orange); }

.sx-h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; font-weight: 700; color: var(--sx-body); letter-spacing: -0.02em !important; margin-top: 14px !important; }
.sx-lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: var(--sx-muted); max-width: 640px; margin-top: 16px !important; }
.sx-dark .sx-h2 { color: var(--sx-text); }
.sx-dark .sx-lead { color: var(--sx-dim); }
.sx-head { margin-bottom: 48px; }
.sx-head--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.sx-head--center .sx-h2, .sx-head--center .sx-lead { text-align: center; }

/* ---------- Buttons ---------- */
.sx-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0;
  font: 600 16px/1 var(--sx-font); cursor: pointer; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.sx-btn svg { width: 18px; height: 18px; transition: transform .25s ease; }
.sx-btn:hover svg { transform: translateX(4px); }
.sx-btn--primary { background: var(--sx-grad); color: #fff !important; box-shadow: 0 14px 34px -12px rgba(229, 65, 15, .75); }
.sx-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(229, 65, 15, .9); }
.sx-btn--ghost { background: rgba(255, 255, 255, .06); color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.sx-btn--ghost:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.sx-btn--dark { background: var(--sx-ink); color: #fff !important; }
.sx-btn--dark:hover { transform: translateY(-2px); background: #000; }
.sx-btn--wa { background: #25d366; color: #0b3d1f !important; }
.sx-btn--wa:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(37, 211, 102, .9); }
.sx-btn:focus-visible, .sx-chip:focus-visible, .sx-faq summary:focus-visible { outline: 3px solid var(--sx-orange-2); outline-offset: 3px; }

/* ---------- 3D tilt card base ---------- */
[data-tilt] {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
  will-change: transform;
}
[data-tilt].is-tilting { transition: transform .08s linear, box-shadow .4s ease; }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255, 255, 255, .16), transparent 45%);
  opacity: 0; transition: opacity .3s ease;
}
[data-tilt].is-tilting::after { opacity: 1; }
.sx-pop { transform: translateZ(40px); }

/* ---------- Reveal on scroll ---------- */
.sx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.sx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sx-reveal { opacity: 1; transform: none; transition: none; }
  [data-tilt] { transform: none !important; }
}

/* =========================================================
   HERO (homepage + MVP page)
   ========================================================= */
.sx-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  background:
    radial-gradient(900px 600px at 78% 40%, rgba(229, 65, 15, .22), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(123, 92, 255, .18), transparent 60%),
    var(--sx-ink);
  color: var(--sx-text);
  display: flex; align-items: center;
  padding: 160px 0 90px;
}
.sx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 45%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at 60% 45%, #000 20%, transparent 70%);
}
.sx-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 24px; width: 100%; }
.sx-hero__copy { position: relative; z-index: 2; }
.sx-hero h1 {
  font-size: clamp(40px, 5.4vw, 76px); line-height: 1.03; font-weight: 800; letter-spacing: -0.035em !important;
  color: #fff; margin: 20px 0 22px !important;
}
.sx-hero h1 .sx-line { display: block; }
.sx-hero__sub { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; color: var(--sx-dim); max-width: 560px; }
.sx-hero__sub strong { color: #fff; font-weight: 600; }
.sx-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.sx-hero__trust { display: flex; align-items: center; gap: 14px; margin-top: 34px; color: var(--sx-dim); font-size: 14px; }
.sx-hero__trust .sx-avatars { display: flex; }
.sx-hero__trust .sx-avatars img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sx-ink); margin-left: -10px; }
.sx-hero__trust .sx-avatars img:first-child { margin-left: 0; }
.sx-hero__trust b { color: #fff; font-weight: 600; }

.sx-hero__scene { position: relative; height: min(76vh, 680px); min-height: 420px; }
.sx-hero__scene canvas { position: absolute; inset: -10% -14% -10% -8%; width: 122%; height: 120%; display: block; opacity: 0; transition: opacity 1.2s ease; touch-action: pan-y; }
.sx-hero__scene canvas.is-ready { opacity: 1; }
.sx-hero__scene canvas.is-dragging { cursor: grabbing !important; }
.sx-hero__scene canvas.is-fallback { display: none; }
.sx-hero__hint {
  position: absolute; right: 6%; bottom: 4%; z-index: 2;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
  display: inline-flex; gap: 8px; align-items: center; pointer-events: none;
}
.sx-hero__hint i { width: 18px; height: 28px; border: 1.5px solid currentColor; border-radius: 10px; position: relative; }
.sx-hero__hint i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: sx-wheel 1.6s infinite; }
@keyframes sx-wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }

.sx-hero--compact { min-height: 92vh; }
.sx-hero--compact h1 { font-size: clamp(40px, 4.9vw, 70px); }

@media (max-width: 991px) {
  .sx-hero { padding: 104px 0 56px; align-items: flex-start; min-height: 0; }
  .sx-hero__grid { grid-template-columns: 1fr; gap: 0; }
  .sx-hero__scene { order: -1; height: 42vh; min-height: 300px; margin: -10px -16px 0; }
  .sx-hero__scene canvas { inset: 0; width: 100%; height: 100%; }
  .sx-hero__hint { display: none; }
  .sx-hero h1 { margin-top: 14px !important; }
}
@media (max-width: 480px) {
  .sx-hero__ctas .sx-btn { width: 100%; }
}

/* ---------- Industry strip ---------- */
.sx-strip { background: var(--sx-ink-2); border-top: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line); color: var(--sx-dim); overflow: hidden; }
.sx-strip__inner { display: flex; align-items: center; gap: 28px; padding: 22px 24px; max-width: 1240px; margin: 0 auto; }
.sx-strip__label { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.sx-strip__list { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; margin: 0; padding: 0; }
.sx-strip__list li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--sx-line); color: #fff; font-size: 15px; font-weight: 500;
  transition: background .25s, border-color .25s, transform .25s;
}
.sx-strip__list li:hover { background: rgba(229, 65, 15, .14); border-color: rgba(255, 122, 61, .5); transform: translateY(-2px); }
.sx-strip__list li svg { width: 16px; height: 16px; color: var(--sx-orange-2); }
@media (max-width: 767px) {
  .sx-strip__inner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 16px; }
  .sx-strip__list li { font-size: 14px; padding: 7px 13px; }
}

/* =========================================================
   MVP PAGE
   ========================================================= */
body.sx-page { background: #fff; margin: 0; overflow-x: hidden; }
.sx-page .brand-header { position: absolute; z-index: 50; }
.sx-section { padding: 120px 0; position: relative; }
.sx-section--cream { background: var(--sx-cream); }
.sx-section--dark { background: var(--sx-ink); color: var(--sx-text); }
@media (max-width: 991px) { .sx-section { padding: 76px 0; } }

/* Offer banner (Huddle) */
.sx-offer {
  display: none; margin-top: 26px; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 122, 61, .6); border-radius: 18px; padding: 14px 18px; max-width: 560px;
}
.sx-offer.is-on { display: flex; }
.sx-offer b { color: #fff; }
.sx-offer span { color: var(--sx-dim); font-size: 15px; line-height: 1.5; }
.sx-offer .sx-offer__tag { background: var(--sx-grad); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; }

.sx-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.sx-stat { padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--sx-line); min-width: 150px; }
.sx-stat b { display: block; font-size: 24px; font-weight: 700; color: #fff; }
.sx-stat span { font-size: 13px; color: var(--sx-dim); }

/* Who it's for */
.sx-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sx-who__card { position: relative; background: #fff; border-radius: var(--sx-radius); padding: 36px 30px; border: 1px solid #ece8e2; }
.sx-who__card:hover { box-shadow: var(--sx-shadow); }
.sx-icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--sx-grad); color: #fff; margin-bottom: 24px; box-shadow: 0 14px 30px -14px rgba(229, 65, 15, .9); }
.sx-icon svg { width: 28px; height: 28px; }
.sx-icon--violet { background: linear-gradient(135deg, #8b6cff, #b9a6ff); box-shadow: 0 14px 30px -14px rgba(123, 92, 255, .9); }
.sx-icon--ink { background: linear-gradient(135deg, #1b1b28, #3a3a52); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); }
.sx-who__card h3 { font-size: 22px; font-weight: 700; color: var(--sx-body); line-height: 1.3; }
.sx-who__card p { margin-top: 12px !important; font-size: 15.5px; line-height: 1.65; color: var(--sx-muted); }
@media (max-width: 991px) { .sx-who { grid-template-columns: 1fr; gap: 16px; } }

/* Packages */
.sx-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.sx-pack {
  position: relative; display: flex; flex-direction: column; border-radius: 28px; padding: 36px 32px;
  background: var(--sx-ink-2); border: 1px solid var(--sx-line); color: var(--sx-text);
}
.sx-pack--featured { background: linear-gradient(160deg, #2a1610 0%, #15131c 60%); border-color: rgba(255, 122, 61, .55); box-shadow: 0 40px 80px -40px rgba(229, 65, 15, .8); }
.sx-pack__badge { position: absolute; top: -14px; right: 28px; background: var(--sx-grad); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; }
.sx-pack__name { font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-orange-2); }
.sx-pack h3 { font-size: 30px; font-weight: 700; color: #fff; margin-top: 10px !important; line-height: 1.15; }
.sx-pack__time { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: #fff; background: rgba(255, 255, 255, .07); padding: 8px 14px; border-radius: 999px; align-self: flex-start; }
.sx-pack__time svg { width: 16px; height: 16px; color: var(--sx-orange-2); }
.sx-pack ul { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 13px; }
.sx-pack li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.5; color: var(--sx-dim); }
.sx-pack li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 122, 61, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a3d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.sx-pack__price { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--sx-line); }
.sx-pack__price small { display: block; font-size: 13px; color: var(--sx-dim); text-transform: uppercase; letter-spacing: .1em; }
.sx-pack__price b { display: block; font-size: 26px; font-weight: 700; color: #fff; margin: 6px 0 18px; }
.sx-pack .sx-btn { width: 100%; }
@media (max-width: 991px) { .sx-packs { grid-template-columns: 1fr; gap: 28px; } }

/* Process */
.sx-steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.sx-steps__line { position: absolute; left: 4%; right: 4%; top: 34px; height: 3px; background: #ebe6df; border-radius: 3px; overflow: hidden; }
.sx-steps__line i { position: absolute; inset: 0; background: var(--sx-grad); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
.sx-step { position: relative; text-align: left; }
.sx-step__dot {
  position: relative; z-index: 1; width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center;
  background: #fff; border: 1.5px solid #ebe6df; color: var(--sx-body); font-size: 22px; font-weight: 800; margin-bottom: 22px;
  transition: background .4s, color .4s, border-color .4s, transform .4s;
}
.sx-step.is-lit .sx-step__dot { background: var(--sx-ink); border-color: var(--sx-ink); color: #fff; transform: translateY(-4px) rotate(-4deg); }
.sx-step small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sx-orange); margin-bottom: 6px; }
.sx-step h3 { font-size: 18px; font-weight: 700; color: var(--sx-body); line-height: 1.3; }
.sx-step p { font-size: 14.5px; line-height: 1.6; color: var(--sx-muted); margin-top: 8px !important; }
@media (max-width: 991px) {
  .sx-steps { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .sx-steps__line { left: 34px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .sx-steps__line i { transform-origin: top; transform: scaleY(var(--p, 0)); }
  .sx-step { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding-bottom: 30px; }
  .sx-step__dot { margin-bottom: 0; }
}

/* What you get */
.sx-get { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.sx-get__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sx-get__item { position: relative; background: #fff; border: 1px solid #ece8e2; border-radius: 20px; padding: 24px; }
.sx-get__item svg { width: 26px; height: 26px; color: var(--sx-orange); margin-bottom: 14px; }
.sx-get__item h4 { font-size: 17px; font-weight: 700; color: var(--sx-body); }
.sx-get__item p { font-size: 14.5px; color: var(--sx-muted); line-height: 1.55; margin-top: 6px !important; }
.sx-handover { position: sticky; top: 30px; background: var(--sx-ink); color: var(--sx-text); border-radius: 28px; padding: 36px 34px; overflow: hidden; }
.sx-handover::before { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(229, 65, 15, .45), transparent 70%); }
.sx-handover h3 { font-size: 24px; font-weight: 700; color: #fff; position: relative; }
.sx-handover > p { color: var(--sx-dim); font-size: 15px; margin-top: 8px !important; line-height: 1.6; position: relative; }
.sx-handover ol { list-style: none; margin: 26px 0 0; padding: 0; position: relative; }
.sx-handover li { position: relative; padding: 0 0 22px 34px; border-left: 2px solid rgba(255, 255, 255, .12); margin-left: 8px; }
.sx-handover li:last-child { padding-bottom: 0; border-color: transparent; }
.sx-handover li::before { content: ""; position: absolute; left: -9px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sx-ink); border: 3px solid var(--sx-orange-2); }
.sx-handover li b { display: block; color: #fff; font-size: 15px; }
.sx-handover li span { display: block; color: var(--sx-dim); font-size: 14px; line-height: 1.55; margin-top: 4px; }
.sx-handover__note { margin-top: 26px !important; font-size: 13px !important; color: rgba(255, 255, 255, .55) !important; border-top: 1px solid var(--sx-line); padding-top: 18px; }
@media (max-width: 991px) {
  .sx-get { grid-template-columns: 1fr; gap: 34px; }
  .sx-handover { position: relative; top: 0; }
}
@media (max-width: 520px) { .sx-get__list { grid-template-columns: 1fr; } }

/* Case studies */
.sx-cases { display: grid; gap: 26px; }
.sx-case {
  position: relative; display: grid; grid-template-columns: 0.95fr 1.05fr; border-radius: 30px; overflow: hidden;
  background: var(--sx-ink-2); border: 1px solid var(--sx-line); color: var(--sx-text);
}
.sx-case:nth-child(even) { grid-template-columns: 1.05fr 0.95fr; }
.sx-case:nth-child(even) .sx-case__media { order: 2; }
.sx-case__media { position: relative; min-height: 340px; overflow: hidden; }
.sx-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.sx-case:hover .sx-case__media img { transform: scale(1.05); }
.sx-case__body { padding: 44px 44px 40px; display: flex; flex-direction: column; }
.sx-case__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sx-case__meta span { font-size: 12px; font-weight: 500; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--sx-dim); }
.sx-case h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; color: #fff; line-height: 1.15; }
.sx-pbr { display: grid; gap: 16px; margin: 24px 0 26px; }
.sx-pbr div { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; }
.sx-pbr dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sx-orange-2); }
.sx-pbr dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--sx-dim); }
.sx-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.sx-kpi { background: rgba(255, 255, 255, .05); border: 1px solid var(--sx-line); border-radius: 14px; padding: 10px 14px; }
.sx-kpi b { display: block; font-size: 18px; color: #fff; }
.sx-kpi span { font-size: 12.5px; color: var(--sx-dim); }
.sx-case .sx-link { color: var(--sx-orange-2) !important; margin-top: auto; align-self: flex-start; }
.sx-consumer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.sx-consumer a { display: block; position: relative; border-radius: 18px; overflow: hidden; background: #000; color: #fff !important; }
.sx-consumer img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .85; transition: transform .6s, opacity .4s; }
.sx-consumer a:hover img { transform: scale(1.06); opacity: 1; }
.sx-consumer span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; font-weight: 600; font-size: 15px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
@media (max-width: 991px) {
  .sx-case, .sx-case:nth-child(even) { grid-template-columns: 1fr; }
  .sx-case:nth-child(even) .sx-case__media { order: 0; }
  .sx-case__media { min-height: 230px; }
  .sx-case__body { padding: 28px 22px 30px; }
  .sx-pbr div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 600px) { .sx-consumer { grid-template-columns: 1fr; } }

/* Tech stack */
.sx-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sx-stack__group { position: relative; border-radius: 22px; padding: 26px; background: #fff; border: 1px solid #ece8e2; }
.sx-stack__group h4 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sx-muted); margin-bottom: 16px; }
.sx-stack__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sx-stack__group li { padding: 9px 14px; border-radius: 12px; background: var(--sx-cream); font-weight: 600; font-size: 15px; color: var(--sx-body); }
.sx-stack__group--sec { background: var(--sx-ink); border-color: var(--sx-ink); }
.sx-stack__group--sec h4 { color: var(--sx-orange-2); }
.sx-stack__group--sec li { background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 991px) { .sx-stack { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sx-stack { grid-template-columns: 1fr; } }

/* FAQ */
.sx-faqwrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: start; }
.sx-faq { border-bottom: 1px solid #e7e2db; }
.sx-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 26px 0; font-size: 19px; font-weight: 600; color: var(--sx-body);
}
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sx-cream); position: relative; transition: background .3s, transform .4s; }
.sx-faq summary i::before, .sx-faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--sx-body); border-radius: 2px; transition: transform .3s, background .3s; }
.sx-faq summary i::after { transform: rotate(90deg); }
.sx-faq[open] summary i { background: var(--sx-orange); transform: rotate(180deg); }
.sx-faq[open] summary i::before, .sx-faq[open] summary i::after { background: #fff; }
.sx-faq[open] summary i::after { transform: rotate(0); }
.sx-faq__a { padding: 0 60px 26px 0; font-size: 16px; line-height: 1.75; color: var(--sx-muted); }
@media (max-width: 991px) { .sx-faqwrap { grid-template-columns: 1fr; gap: 20px; } .sx-faq summary { font-size: 17px; } .sx-faq__a { padding-right: 0; } }

/* Final CTA + form */
.sx-final { background: var(--sx-ink); color: var(--sx-text); padding: 120px 0; position: relative; overflow: hidden; }
.sx-final::before { content: ""; position: absolute; width: 900px; height: 900px; left: -300px; bottom: -500px; border-radius: 50%; background: radial-gradient(circle, rgba(229, 65, 15, .35), transparent 65%); }
.sx-final__grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.sx-final h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; font-weight: 800; color: #fff; letter-spacing: -0.03em !important; }
.sx-final__points { list-style: none; padding: 0; margin: 30px 0 34px; display: grid; gap: 12px; }
.sx-final__points li { display: flex; gap: 12px; align-items: center; color: var(--sx-dim); font-size: 16px; }
.sx-final__points svg { width: 22px; height: 22px; color: var(--sx-orange-2); flex: none; }
.sx-form { position: relative; background: #fff; color: var(--sx-body); border-radius: 30px; padding: 40px; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8); }
.sx-form h3 { font-size: 22px; font-weight: 700; color: var(--sx-body); margin-bottom: 22px !important; }
.sx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sx-field { display: flex; flex-direction: column; gap: 7px; }
.sx-field--full { grid-column: 1 / -1; }
.sx-field label { font-size: 13px; font-weight: 600; color: var(--sx-body); }
.sx-field input, .sx-field select, .sx-field textarea {
  width: 100%; border: 1.5px solid #e4e1dc; border-radius: 14px; background: #faf9f7; padding: 14px 15px;
  font: 400 15px/1.4 var(--sx-font); color: var(--sx-body); transition: border-color .2s, background .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.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='%231d1d27' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 40px; }
.sx-field textarea { min-height: 110px; resize: vertical; }
.sx-field input:focus, .sx-field select:focus, .sx-field textarea:focus { outline: none; border-color: var(--sx-orange); background: #fff; box-shadow: 0 0 0 4px rgba(229, 65, 15, .12); }
.sx-field .sx-err { display: none; font-size: 12.5px; color: #c0310a; }
.sx-field.is-invalid input, .sx-field.is-invalid select, .sx-field.is-invalid textarea { border-color: #c0310a; }
.sx-field.is-invalid .sx-err { display: block; }
.sx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-pills input { position: absolute; opacity: 0; pointer-events: none; }
.sx-pills label { padding: 10px 14px; border-radius: 12px; border: 1.5px solid #e4e1dc; background: #faf9f7; font-weight: 500; font-size: 14px; cursor: pointer; transition: all .2s; }
.sx-pills input:checked + label { background: var(--sx-ink); border-color: var(--sx-ink); color: #fff; }
.sx-pills input:focus-visible + label { outline: 3px solid var(--sx-orange-2); outline-offset: 2px; }
.sx-form__captcha { margin-top: 18px; min-height: 10px; }
.sx-form__captcha .error-message { color: #c0310a; font-size: 13px; margin-top: 6px; }
.sx-form__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.sx-form__actions .sx-btn--primary { flex: 1 1 auto; }
.sx-form__fine { margin-top: 16px !important; font-size: 13px; color: var(--sx-muted); }
.sx-form__done { display: none; text-align: center; padding: 40px 10px; }
.sx-form.is-done .sx-form__done { display: block; }
.sx-form.is-done form { display: none; }
.sx-form__done .sx-icon { margin: 0 auto 20px; }
.sx-form__done h3 { text-align: center; }
.sx-form__done p { text-align: center; color: var(--sx-muted); }
.sx-btn.is-loading { pointer-events: none; opacity: .75; }
@media (max-width: 991px) {
  .sx-final { padding: 80px 0; }
  .sx-final__grid { grid-template-columns: 1fr; gap: 40px; }
  .sx-form { padding: 28px 20px; border-radius: 24px; }
}
@media (max-width: 560px) { .sx-fields { grid-template-columns: 1fr; } }

/* Sticky mobile CTA bar on the MVP page */
.sx-mobilebar { display: none; }
@media (max-width: 767px) {
  .sx-mobilebar {
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px;
    padding: 8px; border-radius: 999px; background: rgba(11, 11, 18, .88); backdrop-filter: blur(10px);
    transform: translateY(140%); transition: transform .4s ease; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .6);
  }
  .sx-mobilebar.is-on { transform: none; }
  .sx-mobilebar .sx-btn { flex: 1; min-height: 46px; font-size: 14px; padding: 0 14px; }
  .sx-page .float, .sx-page .tel { display: none; }
}

/* Footer tweaks inside the MVP page */
.sx-page .footer-block { margin-top: 0; }

/* =========================================================
   HOMEPAGE — MVP banner (first slide in #home_slider)
   Real photo graded in WebGL (2026js/depth-hero.js), thin squared
   display type, mono metadata. One accent colour: --mvx-accent.
   ========================================================= */
.mvx {
  /* red accent palette */
  --mvx-accent: #E0303C;
  --mvx-accent-2: #F4DBC2;
  --mvx-glow: 224, 48, 60;
  --sx-grad: linear-gradient(120deg, #C42E1B 0%, #E0303C 45%, #ff6b00 100%);   /* red → violet, no orange */
  --mvx-line: rgba(255, 255, 255, .14);
  --mvx-dim: rgba(255, 255, 255, .62);
  --mvx-x: 140px;
  /* same type as the other banners: Playfair Display headlines, Poppins for everything else */
  --mvx-display: "Playfair Display", Georgia, serif;
  --mvx-mono: "Poppins", system-ui, sans-serif;
  position: relative; height: 100vh; min-height: 640px; overflow: hidden; isolation: isolate;
  background: #050505; color: #fff; font-family: var(--sx-font);
}
.mvx__canvas, .mvx__photo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.mvx__canvas { z-index: 1; opacity: 0; transition: opacity .6s ease; }
.mvx__canvas.is-ready { opacity: 1; }
/* the <img> is the texture source and the no-WebGL fallback */
.mvx__photo { object-fit: cover; object-position: 30% 40%; filter: brightness(.55) contrast(1.1) saturate(1.05); z-index: 0; }
.mvx__canvas.is-ready ~ .mvx__photo { visibility: hidden; }

/* film letterbox: shut until the slide goes live, then opens */
.mvx__bars i { position: absolute; left: 0; right: 0; z-index: 4; height: 0; background: #000; pointer-events: none; }
.mvx__bars i:first-child { top: 0; } .mvx__bars i:last-child { bottom: 0; }
.mvx.is-armed .mvx__bars i { height: 50%; }
.mvx.is-live .mvx__bars i { height: 0; transition: height 1.6s cubic-bezier(.7, 0, .2, 1) .1s; }
@media (prefers-reduced-motion: reduce) { .mvx__bars { display: none; } }

/* grain shared with the founder-voice section */
.cine-voice__grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .09; 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); }
}

/* ---- headline block ---- */
.mvx__left { position: absolute; z-index: 3; left: var(--mvx-x); top: 150px; max-width: 640px; }
.mvx__title {
  margin: 0 !important; font-family: var(--mvx-display); font-weight: 900; text-align: left;
  font-size: clamp(34px, 4.6vw, 72px); line-height: 1.05; letter-spacing: 0 !important; color: #fff;
}
.mvx__line { display: block; overflow: hidden; }
.mvx__line > span { display: inline-block; white-space: nowrap; }
.mvx__title em { font-style: normal; background: var(--sx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mvx__lead { margin: 24px 0 0 !important; max-width: 460px; font-size: 16px; line-height: 1.7; color: var(--mvx-dim); text-align: left; }
.mvx__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.mvx__btn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 999px;
  font: 600 14px/1 var(--mvx-mono); letter-spacing: .02em; text-decoration: none !important;
  color: #fff !important; border: 1px solid rgba(255, 255, 255, .28); background: rgba(10, 10, 10, .35); backdrop-filter: blur(8px);
  transition: background .3s, border-color .3s, color .3s;
}
.mvx__btn:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.mvx__btn--solid { background: #fff; color: #0a0a0a !important; border-color: #fff; }
.mvx__btn--solid:hover { background: var(--mvx-accent); border-color: var(--mvx-accent); color: #fff !important; }
.mvx__btn span { transition: transform .3s; }
.mvx__btn:hover span { transform: translateX(3px); }

/* ---- top right: counter + spec sheet ---- */
.mvx__top { position: absolute; z-index: 3; right: 64px; top: 150px; width: 330px; font-family: var(--mvx-mono); font-size: 12px; }
.mvx__count { display: flex; align-items: center; gap: 14px; justify-content: flex-end; color: var(--mvx-dim); letter-spacing: .12em; }
.mvx__count i { width: 70px; height: 1px; background: var(--mvx-line); position: relative; overflow: hidden; }
.mvx__count i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.mvx.is-live .mvx__count i::after { animation: mvx-timer 10s linear forwards; }  /* matches autoplayTimeout in gsap-main.js */
@keyframes mvx-timer { to { transform: scaleX(1); } }
.mvx__next { background: none; border: 0; padding: 0; color: #fff; font: inherit; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.mvx__next:hover { color: var(--mvx-accent-2); }
.mvx__specs { margin-top: 30px; padding: 16px 18px 6px; border-radius: 14px; background: rgba(6, 6, 8, .55); border: 1px solid var(--mvx-line); backdrop-filter: blur(14px); }
.mvx__specs-h { color: var(--mvx-accent-2); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; display: flex; justify-content: space-between; padding-bottom: 10px; }
.mvx__specs-h b { color: #fff; font-weight: 500; }
.mvx__specs dl { margin: 0; }
.mvx__specs dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1px solid var(--mvx-line); position: relative; }
.mvx__specs dt { color: rgba(255, 255, 255, .45); font-weight: 400; }
.mvx__specs dd { margin: 0; color: #fff; text-align: right; white-space: nowrap; font-weight: 500; }

/* ---- bottom left: case card ---- */
.mvx__card {
  position: absolute; z-index: 3; left: calc(var(--mvx-x) - 40px); bottom: 48px; display: flex; align-items: center; gap: 18px;
  padding: 16px 22px 16px 18px; border-radius: 14px; background: rgba(12, 12, 12, .55); border: 1px solid var(--mvx-line);
  backdrop-filter: blur(12px); text-decoration: none !important; color: #fff !important; transition: border-color .3s, background .3s;
}
.mvx__card:hover { border-color: rgba(var(--mvx-glow), .6); background: rgba(40, 10, 8, .65); }
.mvx__ring { position: relative; width: 52px; height: 52px; flex: none; }
.mvx__ring b { position: absolute; inset: 10px; border-radius: 50%; border: 2px solid var(--mvx-accent); box-shadow: 0 0 14px rgba(var(--mvx-glow), .7), inset 0 0 10px rgba(var(--mvx-glow), .5); }
.mvx__ring i { position: absolute; left: -6px; right: -6px; top: 50%; height: 14px; margin-top: -7px; border-radius: 50%; border: 1.5px solid #9B6BFF; transform: rotate(-14deg); animation: mvx-ring 9s linear infinite; }
@keyframes mvx-ring { 50% { transform: rotate(-14deg) scaleY(.55); } }
.mvx__card-txt { display: flex; flex-direction: column; gap: 5px; }
.mvx__card-txt small { font: 400 11px/1 var(--mvx-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mvx-dim); }
.mvx__card-txt > span { font-size: 14px; color: #fff; }
.mvx__card-txt em {
  align-self: flex-start; margin-top: 4px; font: 500 10px/1 var(--mvx-mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--mvx-line);
}

/* ---- bottom right: package pills ---- */
.mvx__pills {
  position: absolute; z-index: 3; right: 64px; bottom: 56px; display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(12, 12, 12, .55); border: 1px solid var(--mvx-line); backdrop-filter: blur(12px);
}
.mvx__pill {
  height: 34px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; cursor: pointer;
  font: 500 12px/34px var(--mvx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mvx-dim) !important;
  text-decoration: none !important; transition: background .3s, color .3s;
}
.mvx__pill:hover { color: #fff !important; }
.mvx__pill[aria-pressed="true"] { background: #fff; color: #0a0a0a !important; }
.mvx__btn:focus-visible, .mvx__pill:focus-visible, .mvx__next:focus-visible, .mvx__card:focus-visible { outline: 2px solid var(--mvx-accent-2); outline-offset: 3px; }

/* ---- entrance, replayed each time the slide comes round (JS adds .is-armed / .is-live) ---- */
.mvx.is-armed .mvx__line > span { transform: translateY(105%); }
.mvx.is-armed .mvx__lead, .mvx.is-armed .mvx__ctas, .mvx.is-armed .mvx__top, .mvx.is-armed .mvx__card, .mvx.is-armed .mvx__pills { opacity: 0; }
.mvx.is-armed .mvx__specs dl > div::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; }
.mvx.is-live .mvx__line > span { transform: none; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.mvx.is-live .mvx__line:nth-child(1) > span { transition-delay: .5s; }
.mvx.is-live .mvx__line:nth-child(2) > span { transition-delay: .62s; }
.mvx.is-live .mvx__line:nth-child(3) > span { transition-delay: .74s; }
.mvx.is-live .mvx__lead { opacity: 1; transition: opacity 1s ease 1.2s; }
.mvx.is-live .mvx__ctas { opacity: 1; transition: opacity 1s ease 1.35s; }
.mvx.is-live .mvx__top { opacity: 1; transition: opacity 1s ease .9s; }
.mvx.is-live .mvx__specs dl > div::before { animation: mvx-rule 1.1s cubic-bezier(.16, 1, .3, 1) forwards; }
.mvx.is-live .mvx__specs dl > div:nth-child(2)::before { animation-delay: .1s; }
.mvx.is-live .mvx__specs dl > div:nth-child(3)::before { animation-delay: .2s; }
.mvx.is-live .mvx__specs dl > div:nth-child(4)::before { animation-delay: .3s; }
@keyframes mvx-rule { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.mvx.is-live .mvx__card { opacity: 1; transition: opacity 1s ease 1.6s; }
.mvx.is-live .mvx__pills { opacity: 1; transition: opacity 1s ease 1.75s; }

@media (max-width: 1199px) {
  .mvx { --mvx-x: 56px; }
  .mvx__top { right: 32px; width: 290px; }
  .mvx__pills { right: 32px; }
}
@media (max-width: 991px) {
  .mvx__top .mvx__specs { display: none; }
  .mvx__pills { left: var(--mvx-x); right: auto; bottom: 40px; }
  .mvx__card { display: none; }
}
@media (max-width: 767px) {
  .mvx { --mvx-x: 20px; height: 90vh; min-height: 620px; }
  .mvx__left { top: auto; bottom: 136px; right: 20px; }
  .mvx__title { font-size: clamp(32px, 10vw, 42px); }
  .mvx__lead { margin-top: 16px !important; font-size: 14px; }
  .mvx__ctas { margin-top: 20px; }
  .mvx__btn { flex: 1 1 auto; justify-content: center; }
  .mvx__top { top: 118px; right: 20px; width: auto; }
  .mvx__pills { bottom: 72px; left: 20px; right: 20px; justify-content: space-between; }
  .mvx__pill { padding: 0 10px; font-size: 10px; letter-spacing: .1em; }
  .mvx__pill--link { display: none; }
  body.mvx-active .h-socialnavs { opacity: 0; pointer-events: none; transition: opacity .4s; }
}
@media (prefers-reduced-motion: reduce) {
  .mvx.is-armed .mvx__line > span { transform: none; }
  .mvx.is-armed .mvx__lead, .mvx.is-armed .mvx__ctas, .mvx.is-armed .mvx__top, .mvx.is-armed .mvx__card, .mvx.is-armed .mvx__pills { opacity: 1; }
  .mvx__ring i, .cine-voice__grain { animation: none; }
}

/* =========================================================
   HOMEPAGE — founder voice, cinematic
   ========================================================= */
.cine-voice { position: relative; overflow: hidden; isolation: isolate; background: #07070c; color: #fff; padding: 170px 0 160px; font-family: var(--sx-font); }
.cine-voice__bars i { position: absolute; left: 0; right: 0; z-index: 4; height: 50%; background: #000; transition: height 1.6s cubic-bezier(.7, 0, .2, 1); }
.cine-voice__bars i:first-child { top: 0; }
.cine-voice__bars i:last-child { bottom: 0; }
.cine-voice.is-in .cine-voice__bars i { height: 56px; }
.cine-voice__light { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cine-voice__light::before, .cine-voice__light::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: cine-drift 18s ease-in-out infinite alternate;
}
.cine-voice__light::before { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; right: -18vw; top: -25vw; background: radial-gradient(circle, rgba(229, 65, 15, .75), transparent 65%); }
.cine-voice__light::after { width: 45vw; height: 45vw; max-width: 700px; max-height: 700px; left: -15vw; bottom: -25vw; background: radial-gradient(circle, rgba(123, 92, 255, .55), transparent 65%); animation-duration: 23s; }
@keyframes cine-drift { to { transform: translate(-6vw, 5vw) scale(1.1); } }
.cine-voice__grain { z-index: 1; }
.cine-voice__inner { position: relative; z-index: 3; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.cine-voice__meta {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.cine-voice__scene { color: var(--sx-orange-2); }
.cine-voice__mark {
  position: absolute; left: -14px; top: -120px; font: 800 240px/1 Georgia, serif; pointer-events: none;
  background: var(--sx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .22;
}
.cine-voice__quote { margin: 0; position: relative; }
.cine-voice__big { font-size: clamp(32px, 4.7vw, 70px); line-height: 1.08; font-weight: 700; letter-spacing: -0.035em !important; color: #fff; text-align: left; margin: 0 !important; }
.cine-voice__big em { font-style: normal; background: var(--sx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cine-voice__big .w { display: inline-block; opacity: .1; filter: blur(6px); transform: translateY(12px); transition: opacity .5s ease, filter .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.cine-voice.is-in .cine-voice__slide.is-active .cine-voice__big .w { opacity: 1; filter: none; transform: none; transition: opacity .7s ease, filter .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 60ms + var(--d, .9s)); }
.cine-voice__big .w:hover { color: var(--sx-orange-2); -webkit-text-fill-color: var(--sx-orange-2); transform: translateY(-4px) !important; transition-delay: 0s !important; }
.cine-voice__big em .w { -webkit-text-fill-color: transparent; background: var(--sx-grad); -webkit-background-clip: text; background-clip: text; }
.cine-voice__full { max-width: 720px; margin: 34px 0 0 !important; font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, .62); text-align: left; opacity: 0; transition: opacity .4s ease; }
.cine-voice.is-in .cine-voice__slide.is-active .cine-voice__full { opacity: 1; transition: opacity 1.1s ease calc(var(--d, .9s) + 1s); }
.cine-voice__credit { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 22px; margin-top: 54px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s ease; }
.cine-voice.is-in .cine-voice__slide.is-active .cine-voice__credit { opacity: 1; transform: none; transition: opacity 1s ease calc(var(--d, .9s) + 1.3s), transform 1s ease calc(var(--d, .9s) + 1.3s); }
.cine-voice__credit img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.1); box-shadow: 0 0 0 2px #07070c, 0 0 0 4px var(--sx-orange); }
.cine-voice__credit strong { display: block; font-size: 15px; letter-spacing: .28em; text-transform: uppercase; color: #fff; }
.cine-voice__credit span { display: block; margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .55); }
.cine-voice__cta { white-space: nowrap; margin-left: auto; color: var(--sx-orange-2) !important; font-weight: 600; text-decoration: none !important; border-bottom: 1.5px solid rgba(255, 122, 61, .35); padding-bottom: 3px; transition: border-color .3s; }
.cine-voice__cta:hover { border-color: var(--sx-orange-2); }
.cine-voice__cta { display: inline-flex; align-items: center; gap: 8px; transform: translate(var(--tx, 0), var(--ty, 0)); transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
/* interactive layer: spotlight, tilt, tabs, slides, nav */
.cine-voice { --mx: 70%; --my: 30%; --rx: 0deg; --ry: 0deg; cursor: grab; }
.cine-voice.is-dragging { cursor: grabbing; }
.cine-voice a, .cine-voice button { cursor: pointer; }
.cine-voice__spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 122, 61, .16), rgba(255, 122, 61, .05) 35%, transparent 65%);
}
.cine-voice:hover .cine-voice__spot { opacity: 1; }
.cine-voice__stage { position: relative; perspective: 1400px; }
.cine-voice__slide { transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.cine-voice__slide[hidden] { display: none; }
.cine-voice__slide.is-leaving { display: block; position: absolute; inset: 0 0 auto 0; pointer-events: none; }
.cine-voice__slide.is-leaving .w { opacity: 0 !important; filter: blur(10px) !important; transform: translateY(-14px) !important; transition: opacity .35s ease, filter .35s ease, transform .45s ease !important; transition-delay: calc(var(--i) * 18ms) !important; }
.cine-voice__slide.is-leaving .cine-voice__full, .cine-voice__slide.is-leaving .cine-voice__credit { opacity: 0 !important; transition: opacity .25s ease !important; }
.cine-voice__big { transform: translateZ(40px); }
.cine-voice__mark { transform: translate(calc((var(--mx) - 50%) * -0.04), calc((var(--my) - 50%) * -0.04)); transition: transform .4s ease-out; }

.cine-voice__meta { align-items: center; }
.cine-voice__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cine-voice__tabs button {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03);
  font: 500 11px/1 var(--sx-font); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); transition: color .3s, border-color .3s, background .3s;
}
.cine-voice__tabs button b { color: var(--sx-orange-2); font-weight: 600; }
.cine-voice__tabs button:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.cine-voice__tabs button[aria-selected="true"] { color: #fff; border-color: rgba(255, 122, 61, .6); background: rgba(229, 65, 15, .12); }
.cine-voice__tabs i { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cine-voice__tabs s { position: absolute; inset: 0; background: var(--sx-grad); transform-origin: left; transform: scaleX(0); text-decoration: none; }
.cine-voice__tabs button[aria-selected="true"] s { animation: cv-progress var(--cv-dur, 9s) linear forwards; }
.cine-voice.is-paused .cine-voice__tabs s { animation-play-state: paused; }
@keyframes cv-progress { to { transform: scaleX(1); } }

.cine-voice__nav { display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.cine-voice__arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04);
  color: #fff; font-size: 18px; transition: background .3s, border-color .3s, transform .3s;
}
.cine-voice__arrow:hover { background: var(--sx-orange); border-color: var(--sx-orange); transform: scale(1.06); }
.cine-voice__hint { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.cine-voice__tabs button:focus-visible, .cine-voice__arrow:focus-visible, .cine-voice__cta:focus-visible { outline: 2px solid var(--sx-orange-2); outline-offset: 3px; }
.cine-voice__credit img { transition: filter .5s, transform .5s; }
.cine-voice__slide.is-active .cine-voice__credit:hover img { filter: none; transform: scale(1.08); }

@media (max-width: 767px) {
  .cine-voice__tabs button { padding: 0 10px; letter-spacing: .08em; }
  .cine-voice__tabs button span { display: none; }
  .cine-voice__hint { display: none; }
  .cine-voice { padding: 40px 0; }
  .cine-voice.is-in .cine-voice__bars i { height: 28px; }
  .cine-voice__meta { margin-bottom: 40px; letter-spacing: .16em; }
  .cine-voice__mark { font-size: 150px; top: -80px; left: -6px; }
  .cine-voice__full { font-size: 16px; }
  .cine-voice__cta { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-voice__bars i { height: 0 !important; transition: none; }
  .cine-voice__big .w, .cine-voice__full, .cine-voice__credit { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
}

/* Testimonials keep one height: all three slides share one grid cell, so the section is always as tall
   as the longest quote. Before, only the active slide took up space and the section grew or shrank
   by 30–60px on every change, nudging everything below it up and down. */
.cine-voice__stage { display: grid; }
.cine-voice__stage > .cine-voice__slide { grid-area: 1 / 1; }
.cine-voice__slide[hidden] { display: block !important; visibility: hidden; pointer-events: none; }   /* beats Bootstrap's [hidden] { display: none !important } */
.cine-voice__slide.is-leaving { position: relative; inset: auto; visibility: visible; }

/* ---------- Testimonials: banner red + a fast, readable reveal ----------
   Same red as the astronaut banner (accent #E0303C, gradient #C42E1B → #E0303C → #ff6b00) instead
   of orange. The quote is fully readable within ~1s of the section arriving: words flip up into
   place in quick succession, a red light sweeps the line once, then the full quote and credit. */
.cine-voice {
  --sx-orange: #E0303C;
  --sx-orange-2: #ff4a55;
  --sx-grad: linear-gradient(120deg, #C42E1B 0%, #E0303C 45%, #ff6b00 100%);
}
.cine-voice__light::before { background: radial-gradient(circle, rgba(224, 48, 60, .7), transparent 65%); }
.cine-voice__spot { background: radial-gradient(520px circle at var(--mx) var(--my), rgba(224, 48, 60, .16), rgba(224, 48, 60, .05) 35%, transparent 65%); }
.cine-voice__tabs button[aria-selected="true"] { border-color: rgba(224, 48, 60, .6); background: rgba(224, 48, 60, .14); }
.cine-voice__cta { border-bottom-color: rgba(224, 48, 60, .4); }

.cine-voice__big { position: relative; perspective: 900px; }
.cine-voice__big .w {
  opacity: 0; filter: blur(3px); transform: translateY(.42em) rotateX(-55deg); transform-origin: 50% 100%;
  transition: opacity .25s ease, filter .25s ease, transform .3s ease;
}
.cine-voice.is-in .cine-voice__slide.is-active .cine-voice__big .w {
  opacity: 1; filter: none; transform: none;
  transition: opacity .45s ease, filter .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * 22ms + var(--d, .1s));
}
.cine-voice__big::after {
  content: ""; position: absolute; inset: -6% -4%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 30%, rgba(224, 48, 60, .35) 48%, rgba(255, 255, 255, .25) 50%, rgba(224, 48, 60, .35) 52%, transparent 70%);
  background-size: 250% 100%; background-position: 120% 0;
}
.cine-voice.is-in .cine-voice__slide.is-active .cine-voice__big::after { animation: cv-sweep 1.1s cubic-bezier(.4, 0, .2, 1) calc(var(--d, .1s) + .25s) 1 both; }
@keyframes cv-sweep { 0% { opacity: 0; background-position: 120% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } }
.cine-voice.is-in .cine-voice__slide.is-active .cine-voice__full { transition: opacity .6s ease calc(var(--d, .1s) + .35s); }
.cine-voice.is-in .cine-voice__slide.is-active .cine-voice__credit { transition: opacity .6s ease calc(var(--d, .1s) + .5s), transform .6s ease calc(var(--d, .1s) + .5s); }
@media (prefers-reduced-motion: reduce) {
  .cine-voice__big::after { display: none; }
}

/* ---------- Banner on phones: readable text ----------
   The headline, paragraph and buttons sit over the busiest part of the astronaut (helmet ring, suit).
   A soft dark backing rises behind the text block only — the helmet above stays untouched — and the
   paragraph is brighter, with a faint shadow, so every line reads cleanly. */
@media (max-width: 767px) {
  .mvx__left::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: -20px; right: -20px; top: -110px; bottom: -160px;
    background: linear-gradient(180deg, rgba(5, 5, 9, 0) 0%, rgba(5, 5, 9, .55) 22%, rgba(5, 5, 9, .82) 45%, rgba(5, 5, 9, .9) 100%);
  }
  .mvx__title { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
  .mvx__lead { color: rgba(255, 255, 255, .88) !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
  .mvx__btn:not(.mvx__btn--solid) { background: rgba(10, 10, 14, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* Home MVP banner (desktop): the "01/06 — Next" counter stays top right, the Build specs card sits at
   the bottom right, just above the package pills. */
@media (min-width: 992px) {
  .mvx__top { bottom: 124px; display: flex; flex-direction: column; }
  .mvx__top .mvx__specs { margin-top: auto; }
}