/* DutyMate Cinematic V4
   Single visual system loaded after marketing-v2.css.
   No dependency on Premium V1 / Luxury V2 / Cinematic V3 styles. */

:root {
  --v4-navy-1000: #020c18;
  --v4-navy-950: #041426;
  --v4-navy-900: #071c31;
  --v4-navy-850: #0a2945;
  --v4-navy-800: #0d385c;
  --v4-cyan: #5bdcff;
  --v4-aqua: #63e9df;
  --v4-blue: #4e7cff;
  --v4-violet: #7467f7;
  --v4-paper: #f6fbfe;
  --v4-paper-2: #edf6fb;
  --v4-ink: #0e2b43;
  --v4-muted: #6c8293;
  --v4-line: rgba(29, 86, 128, .11);
  --v4-card: rgba(255,255,255,.88);
  --v4-shadow: 0 28px 80px rgba(5, 38, 63, .09);
  --v4-shadow-strong: 0 48px 130px rgba(0, 19, 39, .28);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  background: var(--v4-navy-1000);
}

body.cinematic-v4 {
  margin: 0;
  overflow-x: clip;
  color: var(--v4-ink);
  background:
    radial-gradient(circle at 10% 7%, rgba(91,220,255,.06), transparent 28rem),
    linear-gradient(180deg, #f8fcff 0%, #f5faff 100%);
}

/* ---------- Header ---------- */

body.cinematic-v4 .site-header {
  position: fixed;
  inset: 14px 0 auto;
  z-index: 100;
  min-height: 0;
  color: var(--v4-ink);
  border: 0;
  background: transparent;
  pointer-events: none;
}

body.cinematic-v4 .nav-wrap {
  width: min(1180px, calc(100% - 28px));
  min-height: 64px;
  margin: 0 auto;
  padding: 7px 8px 7px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 1px solid rgba(54, 120, 169, .12);
  border-radius: 20px;
  background: rgba(250, 253, 255, .89);
  box-shadow:
    0 18px 46px rgba(2, 20, 35, .13),
    inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  pointer-events: auto;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

body.cinematic-v4 .site-header.v4-scrolled .nav-wrap {
  background: rgba(250,253,255,.97);
  box-shadow:
    0 14px 40px rgba(2,20,35,.17),
    inset 0 1px 0 #fff;
}

body.cinematic-v4 .brand {
  gap: 10px;
  color: #12334e;
  font-size: 1rem;
  font-weight: 900;
}

body.cinematic-v4 .brand img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 9px 20px rgba(8, 54, 87, .16);
}

body.cinematic-v4 .main-nav {
  gap: 4px;
  color: #476277;
  font-size: .86rem;
}

body.cinematic-v4 .main-nav a {
  padding: 9px 10px;
  border-radius: 11px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

body.cinematic-v4 .main-nav a:hover {
  color: #0b2a43;
  background: rgba(47, 125, 180, .07);
  transform: translateY(-1px);
}

body.cinematic-v4 .main-nav .nav-cta {
  color: #fff !important;
  padding-inline: 15px;
  background: linear-gradient(135deg, #118bdc, #4b79ff 55%, #715ff4);
  box-shadow: 0 10px 26px rgba(51, 104, 222, .27);
}

/* ---------- Hero ---------- */

body.cinematic-v4 .dm-hero {
  position: relative;
  isolation: isolate;
  min-height: 920px;
  padding: 132px 0 72px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 22%, rgba(75, 211, 255, .16), transparent 26rem),
    radial-gradient(circle at 71% 72%, rgba(91, 232, 222, .09), transparent 31rem),
    radial-gradient(circle at 8% 82%, rgba(79, 117, 255, .10), transparent 27rem),
    linear-gradient(147deg, #03101f 0%, #061a30 48%, #082b49 100%);
}

body.cinematic-v4 .dm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: .75;
  background:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.84) 68%, transparent 100%);
}

body.cinematic-v4 .dm-hero::after {
  content: "";
  position: absolute;
  z-index: -3;
  width: 66rem;
  height: 66rem;
  right: -25rem;
  top: -30rem;
  border: 1px solid rgba(90, 216, 255, .14);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgba(79,215,255,.018),
    0 0 0 11rem rgba(79,125,255,.015),
    0 0 0 18rem rgba(99,233,223,.012);
  pointer-events: none;
}

body.cinematic-v4 .v3-hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

body.cinematic-v4 .v3-beam {
  position: absolute;
  width: 42rem;
  height: 7rem;
  border-radius: 999px;
  filter: blur(18px);
  opacity: .24;
  transform: rotate(-24deg);
}
body.cinematic-v4 .v3-beam-a {
  top: 11%;
  right: -16rem;
  background: linear-gradient(90deg, transparent, rgba(85,220,255,.46), transparent);
  animation: v4Beam 13s ease-in-out infinite;
}
body.cinematic-v4 .v3-beam-b {
  bottom: 12%;
  left: -19rem;
  background: linear-gradient(90deg, transparent, rgba(83,123,255,.30), transparent);
  animation: v4Beam 16s ease-in-out infinite reverse;
}

body.cinematic-v4 .v3-orbit {
  position: absolute;
  border: 1px solid rgba(112, 224, 246, .11);
  border-radius: 50%;
}
body.cinematic-v4 .v3-orbit-a {
  width: 46rem;
  height: 46rem;
  right: -11rem;
  top: 5rem;
  box-shadow: 0 0 0 54px rgba(80,213,231,.014), 0 0 0 112px rgba(75,143,255,.012);
  animation: v4Orbit 32s linear infinite;
}
body.cinematic-v4 .v3-orbit-b {
  width: 23rem;
  height: 23rem;
  right: 9rem;
  top: 14rem;
  border-style: dashed;
  opacity: .5;
  animation: v4Orbit 22s linear infinite reverse;
}
body.cinematic-v4 .v3-starfield {
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image:
    radial-gradient(circle at 15% 22%, rgba(255,255,255,.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 71% 17%, rgba(122,231,244,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 38% 69%, rgba(255,255,255,.65) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 78%, rgba(108,196,255,.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 54% 41%, rgba(255,255,255,.55) 0 1px, transparent 1.6px);
  background-size: 310px 270px, 370px 330px, 420px 390px, 470px 410px, 530px 480px;
  animation: v4Stars 25s linear infinite;
}

body.cinematic-v4 .dm-shell {
  width: min(1180px, calc(100% - 40px));
}

body.cinematic-v4 .dm-hero-grid {
  min-height: 700px;
  padding: 20px 0 48px;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(400px, 1.04fr);
  align-items: center;
  gap: clamp(46px, 7vw, 94px);
}

body.cinematic-v4 .dm-hero-grid > div:first-child {
  position: relative;
  z-index: 4;
  min-width: 0;
}

body.cinematic-v4 .dm-hero-badge {
  padding: 9px 13px;
  color: #dff8ff;
  border: 1px solid rgba(125, 222, 255, .15);
  background: rgba(255,255,255,.052);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.09);
}

body.cinematic-v4 .dm-hero-badge span {
  background: linear-gradient(135deg, var(--v4-cyan), var(--v4-aqua));
  box-shadow: 0 0 0 6px rgba(91,220,255,.09), 0 0 20px rgba(91,220,255,.52);
}

body.cinematic-v4 .dm-hero h1 {
  max-width: 680px;
  margin: 24px 0 22px;
  color: #f5fbff;
  font-size: clamp(3.35rem, 5.8vw, 6.25rem);
  line-height: .94;
  letter-spacing: -.064em;
  text-wrap: balance;
  text-shadow: 0 14px 42px rgba(0,0,0,.17);
}

body.cinematic-v4 .dm-hero h1::after {
  content: "";
  display: inline-block;
  width: .38em;
  height: .38em;
  margin-left: .10em;
  border-radius: .13em;
  background: linear-gradient(135deg, var(--v4-cyan), var(--v4-aqua));
  box-shadow: 0 0 30px rgba(91,220,255,.35);
  transform: rotate(12deg) translateY(-.1em);
}

body.cinematic-v4 .dm-hero-lead {
  max-width: 630px;
  color: #b6cada;
  font-size: clamp(1.02rem, 1.45vw, 1.19rem);
  line-height: 1.72;
}

body.cinematic-v4 .dm-actions {
  gap: 11px;
  margin-top: 30px;
}

body.cinematic-v4 .dm-button {
  min-height: 54px;
  border-radius: 15px;
}

body.cinematic-v4 .dm-button-primary {
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, #1199e6 0%, #4b7cff 52%, #735ff5 100%);
  box-shadow: 0 18px 42px rgba(43,105,224,.34), inset 0 1px 0 rgba(255,255,255,.21);
}

body.cinematic-v4 .dm-button-secondary {
  color: #edf9ff;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
}

body.cinematic-v4 .dm-trust {
  gap: 7px;
  margin-top: 25px;
}

body.cinematic-v4 .dm-trust span {
  padding: 7px 10px;
  color: #9db9cc;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.026);
  font-size: .73rem;
}

/* Approved original app preview */
body.cinematic-v4 .dm-device-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
  min-height: 620px;
  display: grid;
  place-items: center;
  perspective: 1500px;
  transform-style: preserve-3d;
}

body.cinematic-v4 .dm-device-wrap::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(570px, 94%);
  aspect-ratio: 1;
  border: 1px solid rgba(80,211,233,.15);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(60,175,215,.10), rgba(75,143,255,.04) 42%, transparent 68%);
  box-shadow:
    0 0 0 45px rgba(79,215,232,.015),
    0 0 0 98px rgba(75,143,255,.012),
    inset 0 0 80px rgba(79,215,232,.035);
  animation: v4Halo 7.5s ease-in-out infinite;
}

body.cinematic-v4 .dm-device-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(470px, 80%);
  height: 125px;
  bottom: 15px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.49), transparent 68%);
  filter: blur(16px);
  opacity: .78;
}

body.cinematic-v4 .phone-card {
  position: relative;
  z-index: 2;
  width: min(430px, 92%);
  padding: 10px;
  border: 1px solid rgba(170,233,246,.18);
  border-radius: 40px;
  background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.042));
  box-shadow:
    0 58px 125px rgba(0,0,0,.40),
    0 17px 50px rgba(33,132,192,.17),
    0 0 80px rgba(64,192,224,.055),
    inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter: blur(18px);
  transform-style: preserve-3d;
  animation: v4Phone 7.2s ease-in-out infinite;
}

body.cinematic-v4 .phone-card::before,
body.cinematic-v4 .phone-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(104, 219, 244, .16);
  border-radius: 22px;
  backdrop-filter: blur(12px);
}
body.cinematic-v4 .phone-card::before {
  width: 155px;
  height: 88px;
  left: -72px;
  top: 16%;
  background: linear-gradient(145deg, rgba(83,218,235,.14), rgba(255,255,255,.04));
  transform: translateZ(-55px) rotate(-7deg);
}
body.cinematic-v4 .phone-card::after {
  width: 145px;
  height: 108px;
  right: -68px;
  bottom: 16%;
  background: linear-gradient(145deg, rgba(75,143,255,.15), rgba(96,222,226,.05));
  transform: translateZ(-48px) rotate(7deg);
}

body.cinematic-v4 .dm-phone {
  overflow: hidden;
  border-radius: 30px;
  box-shadow: inset 0 0 0 1px rgba(10,44,70,.08), 0 1px 0 rgba(255,255,255,.55);
}

body.cinematic-v4 .dm-phone-bar {
  background: linear-gradient(135deg, #071c31, #0b3e62);
}

body.cinematic-v4 .dm-today {
  background:
    radial-gradient(circle at 92% 10%, rgba(82,216,221,.16), transparent 31%),
    linear-gradient(135deg, #09233d, #0d456f);
}

.v4-float-chip {
  position: absolute;
  z-index: 5;
  min-width: 140px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e8f8ff;
  border: 1px solid rgba(126,214,249,.15);
  border-radius: 15px;
  background: rgba(5, 29, 50, .68);
  box-shadow: 0 18px 42px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(15px);
  pointer-events: none;
  animation: v4Chip 6.5s ease-in-out infinite;
}
.v4-float-chip i {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--v4-cyan), var(--v4-aqua));
  box-shadow: 0 0 14px rgba(91,220,255,.52);
}
.v4-float-chip strong,
.v4-float-chip small {
  display: block;
}
.v4-float-chip strong {
  font-size: .77rem;
}
.v4-float-chip small {
  margin-top: 1px;
  color: #8eacc1;
  font-size: .63rem;
}
.v4-chip-a { left: -2px; top: 20%; }
.v4-chip-b { right: -6px; top: 44%; animation-delay: -2.2s; }
.v4-chip-c { left: 6%; bottom: 10%; animation-delay: -4.1s; }

/* ---------- Marquee ---------- */

body.cinematic-v4 .v3-shift-marquee {
  position: relative;
  z-index: 6;
  overflow: hidden;
  padding: 13px 0;
  border-top: 1px solid rgba(97,190,230,.12);
  border-bottom: 1px solid rgba(97,190,230,.10);
  background: linear-gradient(90deg, #051528, #08243c 50%, #06192d);
}

body.cinematic-v4 .v3-shift-marquee::before,
body.cinematic-v4 .v3-shift-marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 90px;
  pointer-events: none;
}
body.cinematic-v4 .v3-shift-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #051528, transparent);
}
body.cinematic-v4 .v3-shift-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, #06192d, transparent);
}

body.cinematic-v4 .lux-marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #99b9ce;
  font-size: .70rem;
  font-weight: 700;
  white-space: nowrap;
  animation: v4Marquee 32s linear infinite;
}
body.cinematic-v4 .lux-marquee-track i {
  color: #5de6da;
  font-style: normal;
  opacity: .72;
}

/* ---------- Global section rhythm ---------- */

body.cinematic-v4 .dm-section {
  position: relative;
  padding: 108px 0;
  overflow: hidden;
}

body.cinematic-v4 .dm-section-soft {
  background:
    radial-gradient(circle at 87% 12%, rgba(86,207,255,.09), transparent 22rem),
    radial-gradient(circle at 8% 86%, rgba(80,117,255,.045), transparent 24rem),
    linear-gradient(180deg, #eef7fc 0%, #f8fbfe 100%);
}

body.cinematic-v4 .dm-heading {
  max-width: 790px;
}

body.cinematic-v4 .dm-heading h2 {
  color: #10304a;
  font-size: clamp(2.45rem, 4.8vw, 4.85rem);
  line-height: 1;
  letter-spacing: -.058em;
  text-wrap: balance;
}

body.cinematic-v4 .dm-heading p {
  color: var(--v4-muted);
  font-size: 1.02rem;
  line-height: 1.72;
}

body.cinematic-v4 .dm-kicker {
  color: #2d7faf;
  font-size: .70rem;
  letter-spacing: .12em;
}

body.cinematic-v4 .dm-kicker::before {
  box-shadow: 0 0 0 6px rgba(49,144,198,.10);
}

/* Cards */
body.cinematic-v4 .dm-feature-card,
body.cinematic-v4 .dm-copy-item,
body.cinematic-v4 .dm-step,
body.cinematic-v4 .dm-source,
body.cinematic-v4 .dm-setting-card,
body.cinematic-v4 .dm-work-card,
body.cinematic-v4 .dm-report-detail,
body.cinematic-v4 .dm-free-plan,
body.cinematic-v4 .dm-plan,
body.cinematic-v4 .dm-faq-grid details,
body.cinematic-v4 .dm-app-frame {
  border-color: var(--v4-line);
  background: rgba(255,255,255,.88);
  box-shadow: var(--v4-shadow);
  backdrop-filter: blur(12px);
}

body.cinematic-v4 .dm-feature-card,
body.cinematic-v4 .dm-copy-item,
body.cinematic-v4 .dm-step,
body.cinematic-v4 .dm-source,
body.cinematic-v4 .dm-setting-card,
body.cinematic-v4 .dm-work-card,
body.cinematic-v4 .dm-plan,
body.cinematic-v4 .dm-faq-grid details {
  position: relative;
  overflow: hidden;
}

body.cinematic-v4 .dm-feature-card::after,
body.cinematic-v4 .dm-step::after,
body.cinematic-v4 .dm-source::after,
body.cinematic-v4 .dm-setting-card::after,
body.cinematic-v4 .dm-plan::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -88px;
  bottom: -95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(86,205,252,.11), transparent 69%);
  pointer-events: none;
}

body.cinematic-v4 .dm-feature-icon,
body.cinematic-v4 .dm-copy-item-icon,
body.cinematic-v4 .dm-source-badge,
body.cinematic-v4 .dm-step-number {
  color: #2679aa;
  border: 1px solid rgba(48,126,178,.10);
  background: linear-gradient(145deg, #eef9ff, #e4f2fb);
  box-shadow: inset 0 1px 0 #fff;
}

body.cinematic-v4 .dm-feature-card h3,
body.cinematic-v4 .dm-copy-item strong,
body.cinematic-v4 .dm-step h3,
body.cinematic-v4 .dm-source strong,
body.cinematic-v4 .dm-setting-card strong,
body.cinematic-v4 .dm-work-card h3,
body.cinematic-v4 .dm-plan h3,
body.cinematic-v4 .dm-free-plan h3 {
  color: #173d59;
}

body.cinematic-v4 .dm-feature-card p,
body.cinematic-v4 .dm-copy-item span,
body.cinematic-v4 .dm-step p,
body.cinematic-v4 .dm-source span:last-child,
body.cinematic-v4 .dm-setting-card p,
body.cinematic-v4 .dm-work-card p,
body.cinematic-v4 .dm-plan p,
body.cinematic-v4 .dm-plan li,
body.cinematic-v4 .dm-free-plan p {
  color: #718594;
}

/* Feature grid */
body.cinematic-v4 .dm-feature-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-top: 44px;
}
body.cinematic-v4 .dm-feature-card {
  min-height: 245px;
  padding: 26px;
  border-radius: 22px;
}

/* ---------- Personal section ---------- */

body.cinematic-v4 #personal {
  background:
    radial-gradient(circle at 88% 24%, rgba(89,213,255,.075), transparent 24rem),
    linear-gradient(180deg, #f8fcff 0%, #f3f9fd 100%);
}

body.cinematic-v4 .dm-split {
  display: grid;
  grid-template-columns: minmax(0,.90fr) minmax(0,1.10fr);
  gap: clamp(46px, 6vw, 78px);
  align-items: center;
}

body.cinematic-v4 .dm-split > * {
  min-width: 0;
}

body.cinematic-v4 .dm-copy-list {
  gap: 11px;
}

body.cinematic-v4 .dm-copy-item {
  grid-template-columns: 42px minmax(0,1fr);
  border-radius: 16px;
}

body.cinematic-v4 .dm-app-frame {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 8%, rgba(86,205,252,.13), transparent 18rem),
    linear-gradient(145deg, #f7fbff, #edf5fa);
  box-shadow: 0 40px 105px rgba(8,43,69,.13);
}

body.cinematic-v4 .dm-app-window {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 21px;
  box-shadow: 0 18px 46px rgba(10,42,67,.10);
}

body.cinematic-v4 .dm-app-titlebar {
  color: #fff;
  background: linear-gradient(135deg, #071d34, #0c4269);
  border-bottom-color: rgba(255,255,255,.06);
}

body.cinematic-v4 .dm-calendar-week,
body.cinematic-v4 .dm-calendar-grid {
  width: 100%;
  min-width: 0;
}

/* ---------- Professional ---------- */

body.cinematic-v4 .dm-section-dark {
  color: #fff;
  background:
    radial-gradient(circle at 8% 3%, rgba(74,198,255,.13), transparent 24rem),
    radial-gradient(circle at 88% 92%, rgba(91,112,255,.11), transparent 30rem),
    linear-gradient(148deg, #03111f 0%, #061c31 50%, #082843 100%);
}

body.cinematic-v4 .dm-section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 30px 30px;
  pointer-events: none;
}

body.cinematic-v4 .dm-section-dark .dm-heading h2 {
  color: #f3faff;
}
body.cinematic-v4 .dm-section-dark .dm-heading p {
  color: #a9c1d4;
}
body.cinematic-v4 .dm-section-dark .dm-kicker {
  color: #68d9ff;
}

body.cinematic-v4 .professional-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 15px;
}

body.cinematic-v4 .dm-pro-card {
  min-height: 190px;
  border: 1px solid rgba(118,211,255,.11);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(255,255,255,.072), rgba(255,255,255,.026));
  box-shadow: 0 28px 78px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

body.cinematic-v4 .dm-pro-card h3 {
  color: #f2f9ff;
}
body.cinematic-v4 .dm-pro-card p {
  color: #a9c1d3;
}
body.cinematic-v4 .dm-pro-card .dm-feature-icon {
  color: #86e3ff;
  border-color: rgba(111,217,255,.11);
  background: rgba(77,181,231,.075);
}

body.cinematic-v4 .dm-pro-demo {
  margin-top: 20px;
  padding: 17px;
  border: 1px solid rgba(118,211,255,.10);
  border-radius: 25px;
  background: rgba(255,255,255,.045);
  box-shadow: 0 40px 100px rgba(0,0,0,.22);
}

/* ---------- Workspace / source / orbit ---------- */

body.cinematic-v4 .dm-workspace-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

body.cinematic-v4 .dm-work-card.dm-accent {
  color: #fff;
  border-color: rgba(94,205,245,.13);
  background:
    radial-gradient(circle at 90% 10%, rgba(98,232,221,.15), transparent 18rem),
    linear-gradient(145deg, #08233b, #0b4a70);
  box-shadow: 0 34px 92px rgba(5,35,58,.20);
}
body.cinematic-v4 .dm-work-card.dm-accent h3 {
  color: #fff;
}
body.cinematic-v4 .dm-work-card.dm-accent ul {
  color: #bed0df;
}
body.cinematic-v4 .dm-work-card.dm-accent .dm-card-label {
  color: #74defd;
}

body.cinematic-v4 .lux-orbit {
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 1.72 / 1;
  margin: 28px auto 56px;
  perspective: 1200px;
}
body.cinematic-v4 .lux-orbit-rings,
body.cinematic-v4 .lux-orbit-rings i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
body.cinematic-v4 .lux-orbit-rings {
  left: 50%;
  top: 50%;
  width: 68%;
  height: 74%;
  transform: translate(-50%,-50%) rotateX(68deg);
}
body.cinematic-v4 .lux-orbit-rings i {
  border: 1px solid rgba(50,145,193,.13);
}
body.cinematic-v4 .lux-orbit-rings i:nth-child(2) { inset: 14%; }
body.cinematic-v4 .lux-orbit-rings i:nth-child(3) { inset: 30%; }

body.cinematic-v4 .lux-orbit-core {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 145px;
  height: 145px;
  display: grid;
  place-items: center;
  align-content: center;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(48,126,176,.10);
  border-radius: 36px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(234,246,253,.96));
  box-shadow: 0 34px 82px rgba(8,45,72,.13), inset 0 1px 0 #fff;
}
body.cinematic-v4 .lux-orbit-core img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
body.cinematic-v4 .lux-orbit-core strong,
body.cinematic-v4 .lux-orbit-core small {
  display: block;
}
body.cinematic-v4 .lux-orbit-core strong {
  margin-top: 7px;
  color: #184563;
}
body.cinematic-v4 .lux-orbit-core small {
  margin-top: 2px;
  color: #8399a9;
  font-size: .61rem;
}

body.cinematic-v4 .lux-orbit-node {
  position: absolute;
  z-index: 4;
  min-width: 98px;
  padding: 10px 11px;
  text-align: center;
  border: 1px solid rgba(41,110,160,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 17px 44px rgba(8,44,70,.09), inset 0 1px 0 #fff;
  backdrop-filter: blur(12px);
  animation: v4Node 7s ease-in-out infinite;
}
body.cinematic-v4 .lux-orbit-node b,
body.cinematic-v4 .lux-orbit-node span {
  display: block;
}
body.cinematic-v4 .lux-orbit-node b {
  color: #2879aa;
  font-size: .71rem;
}
body.cinematic-v4 .lux-orbit-node span {
  margin-top: 2px;
  color: #8498a7;
  font-size: .56rem;
}
body.cinematic-v4 .lux-orbit-node.n1 { left: 4%; top: 16%; }
body.cinematic-v4 .lux-orbit-node.n2 { right: 5%; top: 15%; animation-delay: -1s; }
body.cinematic-v4 .lux-orbit-node.n3 { left: 7%; bottom: 12%; animation-delay: -2s; }
body.cinematic-v4 .lux-orbit-node.n4 { right: 8%; bottom: 11%; animation-delay: -3s; }
body.cinematic-v4 .lux-orbit-node.n5 { left: 50%; top: 3%; transform: translateX(-50%); animation-delay: -4s; }
body.cinematic-v4 .lux-orbit-node.n6 { left: 50%; bottom: 1%; transform: translateX(-50%); animation-delay: -5s; }

/* ---------- Reports ---------- */

body.cinematic-v4 .dm-report-layout {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 26px;
}

body.cinematic-v4 .dm-report-summary {
  border: 1px solid rgba(99,205,247,.13);
  background:
    radial-gradient(circle at 84% 7%, rgba(89,224,217,.14), transparent 18rem),
    linear-gradient(145deg, #071e34, #0b4a70);
  box-shadow: 0 32px 92px rgba(5,35,58,.21);
}

body.cinematic-v4 .dm-report-details {
  min-width: 0;
}

/* ---------- Plans ---------- */

body.cinematic-v4 .dm-free-plan {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  border-radius: 24px;
}

body.cinematic-v4 .dm-premium-grid {
  gap: 15px;
}

body.cinematic-v4 .dm-plan {
  border-radius: 24px;
}

body.cinematic-v4 .dm-plan-complete {
  color: #fff;
  border-color: rgba(99,208,249,.14);
  background:
    radial-gradient(circle at 89% 8%, rgba(89,224,217,.15), transparent 18rem),
    linear-gradient(145deg, #071d33, #0b4569);
  box-shadow: 0 38px 100px rgba(5,36,59,.20);
}
body.cinematic-v4 .dm-plan-complete h3 {
  color: #fff;
}
body.cinematic-v4 .dm-plan-complete p,
body.cinematic-v4 .dm-plan-complete li,
body.cinematic-v4 .dm-plan-complete .dm-plan-restriction,
body.cinematic-v4 .dm-plan-complete .dm-price-option em {
  color: #b7cede;
}
body.cinematic-v4 .dm-best-value {
  color: #08243b;
  background: linear-gradient(135deg, #80ebdf, #78dafa);
}

/* ---------- FAQ + download ---------- */

body.cinematic-v4 .dm-faq-grid details {
  border-radius: 18px;
}

body.cinematic-v4 .dm-download {
  min-height: 275px;
  border: 1px solid rgba(89,203,246,.12);
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 20%, rgba(91,229,219,.16), transparent 21rem),
    radial-gradient(circle at 18% 86%, rgba(87,124,255,.10), transparent 22rem),
    linear-gradient(145deg, #06192c, #0a4165);
  box-shadow: 0 34px 96px rgba(4,30,50,.20);
}
body.cinematic-v4 .dm-download h2 {
  color: #f7fbff;
}
body.cinematic-v4 .dm-download p {
  color: #b3cada;
}
body.cinematic-v4 .dm-download .dm-kicker {
  color: #70dcff;
}

/* ---------- Footer: compact cinematic ending ---------- */

body.cinematic-v4 .v3-footer {
  position: relative;
  isolation: isolate;
  min-height: auto;
  padding: 0 0 22px;
  overflow: hidden;
  color: #dceaf4;
  background:
    radial-gradient(circle at 82% 18%, rgba(73,190,240,.12), transparent 25rem),
    radial-gradient(circle at 12% 86%, rgba(81,111,255,.09), transparent 25rem),
    linear-gradient(153deg, #020d18 0%, #041728 48%, #06243b 100%);
}

body.cinematic-v4 .v3-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .5;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.6) 72%, transparent);
}

body.cinematic-v4 .v3-footer-glow {
  position: absolute;
  z-index: -2;
  width: 38rem;
  height: 38rem;
  right: -14rem;
  top: -18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78,204,249,.16), transparent 68%);
  filter: blur(4px);
}

body.cinematic-v4 .v3-footer-cta {
  width: min(1180px, calc(100% - 40px));
  min-height: 230px;
  margin: 0 auto;
  padding: 64px 0 54px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 32px;
}

body.cinematic-v4 .v3-footer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6edcff;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.cinematic-v4 .v3-footer-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #63ead0;
  box-shadow: 0 0 0 5px rgba(99,234,208,.08), 0 0 14px rgba(99,234,208,.28);
}

body.cinematic-v4 .v3-footer-cta h2 {
  max-width: 760px;
  margin: 11px 0 10px;
  color: #f4fbff;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: .96;
  letter-spacing: -.06em;
}
body.cinematic-v4 .v3-footer-cta p {
  max-width: 640px;
  margin: 0;
  color: #a4bfd1;
  font-size: .96rem;
}

body.cinematic-v4 .v3-footer-divider {
  width: min(1180px, calc(100% - 40px));
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(119,203,237,.12), transparent);
}

body.cinematic-v4 .v3-footer-grid {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 30px;
  display: grid;
  grid-template-columns: minmax(0,1.4fr) .7fr .7fr .9fr;
  gap: 34px;
  align-items: start;
}

body.cinematic-v4 .v3-footer-brand img {
  width: 180px;
  filter: brightness(0) invert(1);
  opacity: .96;
}
body.cinematic-v4 .v3-footer-brand p {
  max-width: 430px;
  margin: 14px 0 0;
  color: #8eaabd;
  font-size: .84rem;
  line-height: 1.65;
}
body.cinematic-v4 .v3-footer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
body.cinematic-v4 .v3-footer-chips span {
  padding: 7px 9px;
  color: #9fbdd0;
  border: 1px solid rgba(121,204,239,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.028);
  font-size: .62rem;
}

body.cinematic-v4 .v3-footer-column > strong {
  display: block;
  margin-bottom: 13px;
  color: #dff3ff;
  font-size: .70rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.cinematic-v4 .v3-footer-column .footer-links {
  gap: 8px;
}
body.cinematic-v4 .v3-footer-column a {
  color: #89a7ba;
  font-size: .76rem;
}
body.cinematic-v4 .v3-footer-column a:hover {
  color: #e8f8ff;
}

body.cinematic-v4 .v3-developer-mark {
  justify-self: stretch;
  text-align: left;
  padding: 15px;
  border: 1px solid rgba(126,207,240,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}
body.cinematic-v4 .v3-developer-mark span {
  color: #7193a9;
  font-size: .60rem;
}
body.cinematic-v4 .v3-developer-mark img {
  width: 135px;
  margin: 9px 0 0;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
}
body.cinematic-v4 .v3-developer-mark small {
  display: block;
  margin-top: 9px;
  color: #718ca0;
  font-size: .61rem;
  line-height: 1.45;
}

body.cinematic-v4 .v3-footer-wordmark {
  width: min(1180px, calc(100% - 40px));
  margin: 6px auto -2.5vw;
  color: rgba(212,239,255,.035);
  font-size: clamp(7rem, 18vw, 17rem);
  line-height: .72;
  font-weight: 900;
  letter-spacing: -.09em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

body.cinematic-v4 .footer-bottom {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(118,203,237,.07);
  color: #6f8da1;
  font-size: .69rem;
}

body.cinematic-v4 .v3-footer-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
body.cinematic-v4 .v3-footer-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #63ead0;
  box-shadow: 0 0 0 5px rgba(99,234,208,.08), 0 0 14px rgba(99,234,208,.24);
}

/* ---------- Motion utility ---------- */

.v4-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.99);
  transition:
    opacity .68s cubic-bezier(.2,.65,.2,1),
    transform .68s cubic-bezier(.2,.65,.2,1);
}
.v4-reveal.v4-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

.v4-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.v4-progress {
  position: fixed;
  z-index: 120;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--v4-cyan), var(--v4-blue), var(--v4-aqua));
  box-shadow: 0 0 14px rgba(91,220,255,.46);
  pointer-events: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  body.cinematic-v4 .dm-hero-grid {
    grid-template-columns: minmax(0,.95fr) minmax(360px,1.05fr);
    gap: 34px;
  }
  body.cinematic-v4 .dm-feature-grid,
  body.cinematic-v4 .professional-grid,
  body.cinematic-v4 .dm-workspace-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  body.cinematic-v4 .v3-footer-grid {
    grid-template-columns: 1.35fr .75fr .75fr;
  }
  body.cinematic-v4 .v3-developer-mark {
    grid-column: 1 / -1;
    max-width: 360px;
  }
}

@media (max-width: 900px) {
  body.cinematic-v4 .site-header {
    inset: 9px 0 auto;
  }

  body.cinematic-v4 .nav-wrap {
    width: calc(100% - 20px);
    min-height: 58px;
    padding: 6px 8px 6px 12px;
    border-radius: 16px;
  }

  body.cinematic-v4 .brand {
    font-size: .92rem;
  }
  body.cinematic-v4 .brand img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  body.cinematic-v4 .menu-button {
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid rgba(44,101,145,.09);
    border-radius: 12px;
    display: grid;
    align-content: center;
    gap: 5px;
    background: #edf6fb;
  }
  body.cinematic-v4 .menu-button span {
    height: 2px;
    border-radius: 2px;
    background: #2e5f7e;
  }

  body.cinematic-v4 .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    padding: 9px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    border: 1px solid rgba(45,102,146,.10);
    border-radius: 16px;
    background: rgba(249,253,255,.98);
    box-shadow: 0 20px 50px rgba(3,28,48,.16);
    backdrop-filter: blur(20px);
  }
  body.cinematic-v4 .main-nav.open {
    display: flex;
  }
  body.cinematic-v4 .main-nav a {
    padding: 11px 12px;
    color: #36566c !important;
  }
  body.cinematic-v4 .main-nav .nav-cta {
    color: #fff !important;
  }

  body.cinematic-v4 .dm-hero {
    min-height: auto;
    padding: 100px 0 58px;
  }

  body.cinematic-v4 .dm-hero-grid {
    min-height: auto;
    padding: 18px 0 12px;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  body.cinematic-v4 .dm-hero-grid > div:first-child {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
  }

  body.cinematic-v4 .dm-hero-lead {
    margin-inline: auto;
  }
  body.cinematic-v4 .dm-actions,
  body.cinematic-v4 .dm-trust {
    justify-content: center;
  }

  body.cinematic-v4 .dm-device-wrap {
    width: min(100%, 470px);
    min-height: 560px;
    margin: 0 auto;
  }

  body.cinematic-v4 .phone-card {
    width: min(390px, 88vw);
    animation: v4PhoneMobile 6.5s ease-in-out infinite;
  }

  body.cinematic-v4 .phone-card::before,
  body.cinematic-v4 .phone-card::after {
    display: none;
  }

  .v4-float-chip {
    min-width: 125px;
    transform: scale(.88);
  }
  .v4-chip-a { left: -4px; top: 19%; }
  .v4-chip-b { right: -6px; top: 45%; }
  .v4-chip-c { left: 4%; bottom: 9%; }

  body.cinematic-v4 .dm-section {
    padding: 88px 0;
  }

  body.cinematic-v4 .dm-split,
  body.cinematic-v4 .dm-report-layout,
  body.cinematic-v4 .dm-free-plan {
    grid-template-columns: 1fr;
  }

  body.cinematic-v4 .dm-split {
    gap: 40px;
  }

  body.cinematic-v4 .dm-app-frame {
    width: min(100%, 720px);
    margin: 0 auto;
  }

  body.cinematic-v4 .dm-pro-demo-grid,
  body.cinematic-v4 .dm-workspace-bottom {
    grid-template-columns: 1fr;
  }

  body.cinematic-v4 .dm-source-grid,
  body.cinematic-v4 .dm-settings-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  body.cinematic-v4 .lux-orbit {
    width: min(680px, 100%);
  }

  body.cinematic-v4 .v3-footer-cta {
    padding: 54px 0 44px;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  body.cinematic-v4 .v3-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.cinematic-v4 .v3-footer-brand {
    grid-column: 1 / -1;
  }

  body.cinematic-v4 .v3-developer-mark {
    grid-column: 1 / -1;
    max-width: 320px;
  }
}

@media (max-width: 640px) {
  body.cinematic-v4 .dm-shell {
    width: min(100% - 24px, 1180px);
  }

  body.cinematic-v4 .dm-hero {
    padding: 90px 0 38px;
  }

  body.cinematic-v4 .dm-hero-grid {
    gap: 30px;
  }

  body.cinematic-v4 .dm-hero-grid > div:first-child {
    text-align: left;
  }

  body.cinematic-v4 .dm-hero-badge {
    padding: 8px 10px;
    font-size: .64rem;
  }

  body.cinematic-v4 .dm-hero h1 {
    margin: 18px 0 16px;
    font-size: clamp(2.65rem, 12.2vw, 4.1rem);
    line-height: .94;
  }

  body.cinematic-v4 .dm-hero-lead {
    margin: 0;
    font-size: .92rem;
    line-height: 1.62;
  }

  body.cinematic-v4 .dm-actions {
    justify-content: flex-start;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 22px;
  }

  body.cinematic-v4 .dm-button {
    width: 100%;
    min-height: 48px;
    padding-inline: 12px;
    font-size: .78rem;
  }

  body.cinematic-v4 .dm-trust {
    justify-content: flex-start;
    gap: 6px;
    margin-top: 17px;
  }
  body.cinematic-v4 .dm-trust span {
    padding: 6px 8px;
    font-size: .63rem;
  }

  body.cinematic-v4 .dm-device-wrap {
    width: 100%;
    min-height: 430px;
    margin-top: 0;
  }

  body.cinematic-v4 .dm-device-wrap::before {
    width: min(390px, 108vw);
  }

  body.cinematic-v4 .dm-device-wrap::after {
    width: 82%;
    height: 90px;
    bottom: -2px;
  }

  body.cinematic-v4 .phone-card {
    width: min(320px, 88vw);
    padding: 7px;
    border-radius: 28px;
  }

  body.cinematic-v4 .dm-phone {
    border-radius: 22px;
  }

  body.cinematic-v4 .dm-phone-bar {
    min-height: 52px;
    padding: 0 13px;
  }
  body.cinematic-v4 .dm-mini-brand img {
    width: 28px;
    height: 28px;
  }
  body.cinematic-v4 .dm-mini-brand strong {
    font-size: .89rem;
  }
  body.cinematic-v4 .dm-sync {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  body.cinematic-v4 .dm-phone-body {
    padding: 11px;
  }

  body.cinematic-v4 .dm-profile {
    padding: 10px 11px;
    border-radius: 14px;
  }
  body.cinematic-v4 .dm-avatar-icon {
    width: 36px;
    height: 36px;
  }
  body.cinematic-v4 .dm-profile strong {
    font-size: .78rem;
  }

  body.cinematic-v4 .dm-today {
    margin-top: 9px;
    padding: 14px;
    border-radius: 17px;
  }
  body.cinematic-v4 .dm-shift-code {
    font-size: 2rem;
  }
  body.cinematic-v4 .dm-clock {
    width: 44px;
    height: 44px;
  }

  body.cinematic-v4 .dm-info-row {
    gap: 7px;
    margin-top: 7px;
  }
  body.cinematic-v4 .dm-info-card {
    min-height: 64px;
    padding: 9px;
    border-radius: 12px;
  }
  body.cinematic-v4 .dm-info-card small {
    font-size: .61rem;
  }
  body.cinematic-v4 .dm-info-card strong {
    font-size: .68rem;
  }

  body.cinematic-v4 .dm-phone-title {
    margin: 11px 0 7px;
    font-size: .70rem;
  }
  body.cinematic-v4 .dm-shift-chip {
    padding: 5px 7px;
    font-size: .57rem;
  }
  body.cinematic-v4 .dm-quick-grid {
    gap: 6px;
  }
  body.cinematic-v4 .dm-quick-card {
    min-height: 72px;
    padding: 9px;
    border-radius: 12px;
  }
  body.cinematic-v4 .dm-icon-box {
    width: 28px;
    height: 28px;
  }
  body.cinematic-v4 .dm-quick-card strong {
    margin-top: 6px;
    font-size: .67rem;
  }
  body.cinematic-v4 .dm-quick-card small {
    font-size: .55rem;
  }

  .v4-float-chip {
    min-width: 108px;
    padding: 7px 8px;
    border-radius: 12px;
  }
  .v4-float-chip strong { font-size: .65rem; }
  .v4-float-chip small { font-size: .52rem; }
  .v4-chip-a { left: -5px; top: 17%; }
  .v4-chip-b { right: -8px; top: 47%; }
  .v4-chip-c { left: 0; bottom: 4%; }

  body.cinematic-v4 .v3-shift-marquee {
    padding: 10px 0;
  }
  body.cinematic-v4 .lux-marquee-track {
    gap: 15px;
    font-size: .62rem;
    animation-duration: 28s;
  }

  body.cinematic-v4 .dm-section {
    padding: 72px 0;
  }

  body.cinematic-v4 .dm-heading {
    max-width: none;
  }
  body.cinematic-v4 .dm-heading h2 {
    font-size: clamp(2.2rem, 10.8vw, 3.35rem);
    line-height: 1.01;
  }
  body.cinematic-v4 .dm-heading p {
    font-size: .92rem;
    line-height: 1.68;
  }

  body.cinematic-v4 .dm-feature-grid,
  body.cinematic-v4 .professional-grid,
  body.cinematic-v4 .dm-workspace-grid,
  body.cinematic-v4 .dm-source-grid,
  body.cinematic-v4 .dm-settings-grid,
  body.cinematic-v4 .dm-premium-grid,
  body.cinematic-v4 .dm-faq-grid {
    grid-template-columns: 1fr;
  }

  body.cinematic-v4 .dm-feature-card,
  body.cinematic-v4 .dm-pro-card,
  body.cinematic-v4 .dm-step,
  body.cinematic-v4 .dm-source,
  body.cinematic-v4 .dm-setting-card,
  body.cinematic-v4 .dm-plan,
  body.cinematic-v4 .dm-free-plan {
    min-height: auto;
    padding: 21px;
    border-radius: 19px;
  }

  /* Critical mobile fix: app preview must never be a side column */
  body.cinematic-v4 .dm-split {
    display: block;
  }

  body.cinematic-v4 .dm-split > div:first-child {
    width: 100%;
    min-width: 0;
  }

  body.cinematic-v4 .dm-app-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 34px 0 0;
    padding: 8px;
    border-radius: 20px;
    transform: none !important;
  }

  body.cinematic-v4 .dm-app-window {
    width: 100%;
    min-width: 0;
    border-radius: 16px;
    transform: none !important;
  }

  body.cinematic-v4 .dm-app-titlebar {
    padding: 13px 14px;
    font-size: .88rem;
  }

  body.cinematic-v4 .dm-calendar-head {
    grid-template-columns: 28px minmax(0,1fr) 28px;
    padding: 13px 10px 5px;
    font-size: .78rem;
  }

  body.cinematic-v4 .dm-calendar-week,
  body.cinematic-v4 .dm-calendar-grid {
    gap: 3px;
    padding-inline: 6px;
  }

  body.cinematic-v4 .dm-calendar-week {
    font-size: .53rem;
  }

  body.cinematic-v4 .dm-day {
    min-width: 0;
    min-height: 45px;
    padding: 4px 2px;
    border-radius: 8px;
    font-size: .54rem;
  }

  body.cinematic-v4 .dm-day-tag {
    width: 23px;
    height: 21px;
    border-radius: 6px;
    font-size: .53rem;
  }

  body.cinematic-v4 .dm-export-bar {
    margin: 0 8px 10px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: .68rem;
  }

  body.cinematic-v4 .dm-mini-metrics {
    gap: 6px;
    padding: 0 8px 10px;
  }

  body.cinematic-v4 .dm-mini-metric {
    padding: 9px;
    border-radius: 10px;
  }

  body.cinematic-v4 .dm-pro-demo {
    padding: 8px;
    border-radius: 18px;
  }
  body.cinematic-v4 .dm-roster-card,
  body.cinematic-v4 .dm-glance-card {
    border-radius: 14px;
  }

  body.cinematic-v4 .dm-report-layout {
    display: block;
  }
  body.cinematic-v4 .dm-report-summary {
    margin-bottom: 12px;
  }
  body.cinematic-v4 .dm-report-details {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  body.cinematic-v4 .dm-report-detail {
    padding: 14px;
  }
  body.cinematic-v4 .dm-export-callout {
    align-items: flex-start;
    flex-direction: column;
  }

  body.cinematic-v4 .lux-orbit {
    aspect-ratio: 1 / 1;
    margin: 10px auto 34px;
  }
  body.cinematic-v4 .lux-orbit-core {
    width: 108px;
    height: 108px;
    border-radius: 27px;
  }
  body.cinematic-v4 .lux-orbit-core img {
    width: 38px;
    height: 38px;
  }
  body.cinematic-v4 .lux-orbit-node {
    min-width: 72px;
    padding: 8px;
  }
  body.cinematic-v4 .lux-orbit-node.n1 { left: 0; top: 17%; }
  body.cinematic-v4 .lux-orbit-node.n2 { right: 0; top: 17%; }
  body.cinematic-v4 .lux-orbit-node.n3 { left: 0; bottom: 15%; }
  body.cinematic-v4 .lux-orbit-node.n4 { right: 0; bottom: 15%; }
  body.cinematic-v4 .lux-orbit-node.n5 { top: 1%; }
  body.cinematic-v4 .lux-orbit-node.n6 { bottom: 1%; }

  body.cinematic-v4 .dm-download {
    min-height: auto;
    padding: 24px 20px;
    grid-template-columns: 1fr;
    gap: 18px;
    border-radius: 22px;
  }
  body.cinematic-v4 .dm-download-copy {
    flex-direction: row;
    align-items: center;
  }
  body.cinematic-v4 .dm-download-copy img {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
  }
  body.cinematic-v4 .dm-download h2 {
    font-size: 1.8rem;
  }

  /* Footer becomes compact and intentional on mobile */
  body.cinematic-v4 .v3-footer-cta {
    width: min(100% - 24px, 1180px);
    padding: 46px 0 34px;
    gap: 20px;
    justify-items: stretch;
  }
  body.cinematic-v4 .v3-footer-cta h2 {
    font-size: clamp(2.45rem, 11.5vw, 3.7rem);
  }
  body.cinematic-v4 .v3-footer-cta p {
    font-size: .86rem;
  }
  body.cinematic-v4 .v3-footer-button {
    width: min(100%, 230px);
  }

  body.cinematic-v4 .v3-footer-divider,
  body.cinematic-v4 .v3-footer-grid,
  body.cinematic-v4 .v3-footer-wordmark,
  body.cinematic-v4 .footer-bottom {
    width: min(100% - 24px, 1180px);
  }

  body.cinematic-v4 .v3-footer-grid {
    padding: 30px 0 20px;
    grid-template-columns: 1fr 1fr;
    gap: 28px 22px;
  }

  body.cinematic-v4 .v3-footer-brand {
    grid-column: 1 / -1;
  }
  body.cinematic-v4 .v3-footer-brand img {
    width: 150px;
  }
  body.cinematic-v4 .v3-footer-brand p {
    max-width: 100%;
    font-size: .78rem;
  }

  body.cinematic-v4 .v3-developer-mark {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px;
  }
  body.cinematic-v4 .v3-developer-mark span,
  body.cinematic-v4 .v3-developer-mark small {
    grid-column: 2;
  }
  body.cinematic-v4 .v3-developer-mark img {
    grid-row: 1 / 3;
    width: 115px;
    margin: 0;
  }
  body.cinematic-v4 .v3-developer-mark small {
    margin: -4px 0 0;
  }

  body.cinematic-v4 .v3-footer-wordmark {
    margin: 28px auto -1vw;
    font-size: clamp(5.8rem, 25vw, 9rem);
    line-height: .76;
  }

  body.cinematic-v4 .footer-bottom {
    margin-top: 0;
    padding-top: 14px;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
    font-size: .62rem;
  }
}

@media (max-width: 400px) {
  body.cinematic-v4 .dm-actions {
    grid-template-columns: 1fr;
  }

  body.cinematic-v4 .dm-report-details {
    grid-template-columns: 1fr;
  }

  body.cinematic-v4 .v3-footer-grid {
    grid-template-columns: 1fr;
  }
  body.cinematic-v4 .v3-footer-brand,
  body.cinematic-v4 .v3-developer-mark {
    grid-column: auto;
  }
}

/* ---------- Animations ---------- */

@keyframes v4Beam {
  0%,100% { transform: translate3d(0,0,0) rotate(-24deg); opacity: .16; }
  50% { transform: translate3d(-36px,24px,0) rotate(-20deg); opacity: .29; }
}
@keyframes v4Orbit {
  to { transform: rotate(360deg); }
}
@keyframes v4Stars {
  to { background-position: 30px 20px, -20px 40px, 40px -30px, -35px 25px, 28px -35px; }
}
@keyframes v4Halo {
  0%,100% { transform: scale(.985); opacity: .82; }
  50% { transform: scale(1.025); opacity: 1; }
}
@keyframes v4Phone {
  0%,100% { transform: rotateY(-8deg) rotateX(3.5deg) translate3d(0,0,0); }
  50% { transform: rotateY(-5deg) rotateX(2deg) translate3d(0,-12px,6px); }
}
@keyframes v4PhoneMobile {
  0%,100% { transform: translate3d(0,0,0) rotate(-.8deg); }
  50% { transform: translate3d(0,-7px,0) rotate(.8deg); }
}
@keyframes v4Chip {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-7px,0); }
}
@keyframes v4Marquee {
  to { transform: translateX(-50%); }
}
@keyframes v4Node {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .v4-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .v4-tilt {
    transform: none !important;
  }
}


/* =========================================================
   V4.1 Mobile Cinematic Corrections
   - Tablet/mobile hero switches at the same 1024px breakpoint as navigation
   - Text always precedes product preview
   - More visible mobile lighting and footer motion
   ========================================================= */

.v5-section-aura {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s ease;
}

.v5-section-aura::before,
.v5-section-aura::after {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  filter: blur(10px);
  will-change: transform;
}

.v5-section-aura::before {
  left: -11rem;
  top: 12%;
  background: radial-gradient(circle, rgba(72,192,244,.12), rgba(72,192,244,.025) 48%, transparent 72%);
  animation: v5AuraA 11s ease-in-out infinite;
}

.v5-section-aura::after {
  right: -12rem;
  bottom: 8%;
  background: radial-gradient(circle, rgba(94,111,255,.10), rgba(92,232,221,.025) 48%, transparent 72%);
  animation: v5AuraB 13s ease-in-out infinite;
}

.dm-section.v5-section-active > .v5-section-aura {
  opacity: 1;
}

body.cinematic-v4 .dm-section > .dm-shell,
body.cinematic-v4 .dm-section > .v3-footer-cta,
body.cinematic-v4 .dm-section > .v3-footer-grid {
  position: relative;
  z-index: 1;
}

.v5-card-sheen {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.v5-card-sheen::before {
  content: "";
  position: absolute;
  width: 36%;
  height: 180%;
  left: -60%;
  top: -40%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(100,214,255,.11), transparent);
  animation: v5Sheen 7.5s ease-in-out infinite;
}

.dm-feature-card > *,
.dm-pro-card > *,
.dm-step > *,
.dm-source > *,
.dm-setting-card > *,
.dm-plan > *,
.dm-report-detail > * {
  position: relative;
  z-index: 1;
}

/* Footer motion stage */
body.cinematic-v4 .v5-footer-stage {
  position: relative;
  width: min(1180px, calc(100% - 40px));
  min-height: 250px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(105,202,238,.07);
  border-bottom: 1px solid rgba(105,202,238,.07);
}

body.cinematic-v4 .v5-footer-stage::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(75,200,243,.12), transparent 34%),
    conic-gradient(from 0deg, transparent 0 12%, rgba(93,230,221,.07) 12% 18%, transparent 18% 42%, rgba(78,126,255,.065) 42% 49%, transparent 49% 100%);
  filter: blur(2px);
  animation: v5FooterGlow 14s linear infinite;
}

.v5-footer-radar {
  position: relative;
  width: min(460px, 78vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 900px;
  transform: scale(.72);
  margin: -54px 0;
}

.v5-ring {
  position: absolute;
  border: 1px solid rgba(100,211,247,.16);
  border-radius: 50%;
  box-shadow: inset 0 0 36px rgba(83,197,238,.025);
}

.v5-ring-1 {
  inset: 29%;
  animation: v5Ring 10s linear infinite;
}

.v5-ring-2 {
  inset: 16%;
  border-style: dashed;
  border-color: rgba(105,129,255,.13);
  animation: v5RingReverse 16s linear infinite;
}

.v5-ring-3 {
  inset: 3%;
  border-color: rgba(94,231,219,.09);
  animation: v5Ring 24s linear infinite;
}

.v5-footer-core {
  position: relative;
  z-index: 5;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(118,218,249,.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.15), transparent 40%),
    linear-gradient(145deg, rgba(7,37,61,.95), rgba(10,68,101,.90));
  box-shadow:
    0 24px 52px rgba(0,0,0,.34),
    0 0 60px rgba(76,196,237,.12),
    inset 0 1px 0 rgba(255,255,255,.10);
  animation: v5Core 5.5s ease-in-out infinite;
}

.v5-footer-core img {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.32));
}

.v5-orbit-dot {
  position: absolute;
  z-index: 4;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #65e6dd;
  box-shadow: 0 0 0 6px rgba(101,230,221,.06), 0 0 18px rgba(101,230,221,.52);
}

.v5-dot-1 {
  top: 18%;
  left: 50%;
  animation: v5Dot1 9s linear infinite;
}
.v5-dot-2 {
  right: 16%;
  top: 50%;
  background: #6fcfff;
  box-shadow: 0 0 0 6px rgba(111,207,255,.06), 0 0 18px rgba(111,207,255,.48);
  animation: v5Dot2 13s linear infinite;
}
.v5-dot-3 {
  bottom: 13%;
  left: 34%;
  background: #7784ff;
  box-shadow: 0 0 0 6px rgba(119,132,255,.06), 0 0 18px rgba(119,132,255,.42);
  animation: v5Dot3 17s linear infinite;
}

.v5-signal {
  position: absolute;
  z-index: 6;
  min-width: 130px;
  padding: 9px 11px;
  color: #dff5ff;
  border: 1px solid rgba(115,208,244,.12);
  border-radius: 13px;
  background: rgba(5,27,46,.70);
  box-shadow: 0 16px 36px rgba(0,0,0,.21), inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
  animation: v5Signal 6.5s ease-in-out infinite;
}

.v5-signal b,
.v5-signal small {
  display: block;
}

.v5-signal b {
  font-size: .68rem;
}

.v5-signal small {
  margin-top: 2px;
  color: #809fb3;
  font-size: .55rem;
}

.v5-signal-a { left: 3%; top: 25%; }
.v5-signal-b { right: 2%; top: 39%; animation-delay: -2.2s; }
.v5-signal-c { left: 9%; bottom: 21%; animation-delay: -4.1s; }

.v5-footer-line {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 18px;
  height: 40px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  opacity: .46;
}

.v5-footer-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100,218,247,.32), transparent);
}

.v5-footer-line i {
  width: 1px;
  height: var(--h, 20px);
  background: linear-gradient(to top, rgba(98,229,221,.10), rgba(102,213,249,.52));
  box-shadow: 0 0 10px rgba(96,212,247,.17);
  animation: v5Line 3.8s ease-in-out infinite;
}
.v5-footer-line i:nth-child(1) { --h: 13px; animation-delay: -.7s; }
.v5-footer-line i:nth-child(2) { --h: 24px; animation-delay: -1.6s; }
.v5-footer-line i:nth-child(3) { --h: 35px; animation-delay: -2.4s; }
.v5-footer-line i:nth-child(4) { --h: 20px; animation-delay: -1.1s; }
.v5-footer-line i:nth-child(5) { --h: 28px; animation-delay: -3.0s; }

/* The footer wordmark now behaves like a lit architectural sign instead of empty text. */
body.cinematic-v4 .v3-footer-wordmark {
  position: relative;
  background: linear-gradient(90deg,
    rgba(113,199,238,.05) 0%,
    rgba(131,231,244,.15) 35%,
    rgba(121,139,255,.13) 52%,
    rgba(93,229,219,.12) 70%,
    rgba(113,199,238,.05) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(127,211,242,.05);
  filter: drop-shadow(0 0 28px rgba(83,198,234,.045));
  animation: v5Wordmark 9s ease-in-out infinite;
}

/* Stronger but controlled effects on touch/mobile */
@media (max-width: 1024px) {
  body.cinematic-v4 .dm-hero {
    min-height: auto !important;
    padding: 98px 0 34px !important;
  }

  body.cinematic-v4 .dm-hero-grid {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
    padding: 16px 0 0 !important;
  }

  body.cinematic-v4 .dm-hero-grid > div:first-child {
    order: 1 !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 8 !important;
    transform: none !important;
    translate: none !important;
  }

  body.cinematic-v4 .dm-device-wrap {
    order: 2 !important;
    position: relative !important;
    z-index: 3 !important;
    width: min(100%, 430px) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 6px 0 2px !important;
    transform: none !important;
    translate: none !important;
  }

  body.cinematic-v4 .phone-card {
    position: relative !important;
    width: min(350px, 84vw) !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  body.cinematic-v4 .dm-device-wrap::before {
    width: min(390px, 92vw) !important;
  }

  body.cinematic-v4 .dm-device-wrap::after {
    bottom: -8px !important;
  }

  body.cinematic-v4 .v3-orbit-a {
    width: 34rem;
    height: 34rem;
    right: -17rem;
    top: 7rem;
    opacity: .78;
  }

  body.cinematic-v4 .v3-orbit-b {
    right: -2rem;
    top: 17rem;
    opacity: .42;
  }

  body.cinematic-v4 .v3-beam {
    opacity: .31;
  }

  body.cinematic-v4 .dm-section {
    isolation: isolate;
  }

  body.cinematic-v4 .dm-feature-card,
  body.cinematic-v4 .dm-copy-item,
  body.cinematic-v4 .dm-step,
  body.cinematic-v4 .dm-source,
  body.cinematic-v4 .dm-setting-card,
  body.cinematic-v4 .dm-plan,
  body.cinematic-v4 .dm-report-detail {
    box-shadow:
      0 22px 58px rgba(8,43,69,.10),
      0 0 0 1px rgba(82,173,224,.025),
      inset 0 1px 0 rgba(255,255,255,.96);
  }
}

@media (max-width: 640px) {
  body.cinematic-v4 .dm-hero {
    padding: 84px 0 24px !important;
  }

  body.cinematic-v4 .dm-hero-grid {
    gap: 22px !important;
  }

  body.cinematic-v4 .dm-hero-grid > div:first-child {
    text-align: left !important;
  }

  body.cinematic-v4 .dm-hero h1 {
    font-size: clamp(2.45rem, 11.4vw, 3.55rem) !important;
  }

  body.cinematic-v4 .dm-device-wrap {
    width: min(100%, 350px) !important;
  }

  body.cinematic-v4 .phone-card {
    width: min(286px, 82vw) !important;
    animation-duration: 5.8s !important;
  }

  body.cinematic-v4 .dm-device-wrap::before {
    width: min(330px, 94vw) !important;
    opacity: .88;
  }

  .v4-chip-c {
    display: none;
  }

  .v4-float-chip {
    background: rgba(4,27,47,.78);
    border-color: rgba(111,217,251,.18);
    box-shadow: 0 14px 34px rgba(0,0,0,.25), 0 0 22px rgba(81,193,236,.055);
  }

  .v4-chip-a {
    left: -1px !important;
    top: 19% !important;
  }

  .v4-chip-b {
    right: -4px !important;
    top: 53% !important;
  }

  .v5-section-aura::before,
  .v5-section-aura::after {
    width: 18rem;
    height: 18rem;
    opacity: .95;
  }

  .v5-card-sheen::before {
    width: 44%;
    background: linear-gradient(90deg, transparent, rgba(78,190,239,.12), transparent);
    animation-duration: 6.5s;
  }

  body.cinematic-v4 .v5-footer-stage {
    width: min(100% - 24px, 1180px);
    min-height: 225px;
  }

  .v5-footer-radar {
    width: min(330px, 88vw);
    transform: scale(.76);
    margin: -55px 0;
  }

  .v5-footer-core {
    width: 82px;
    height: 82px;
    border-radius: 24px;
    box-shadow:
      0 20px 44px rgba(0,0,0,.34),
      0 0 50px rgba(74,197,239,.17),
      inset 0 1px 0 rgba(255,255,255,.10);
  }

  .v5-footer-core img {
    width: 52px;
    height: 52px;
  }

  .v5-signal {
    min-width: 104px;
    padding: 7px 8px;
  }

  .v5-signal b { font-size: .60rem; }
  .v5-signal small { font-size: .49rem; }

  .v5-signal-a { left: 0; top: 27%; }
  .v5-signal-b { right: 0; top: 42%; }
  .v5-signal-c { left: 8%; bottom: 23%; }

  body.cinematic-v4 .v3-footer-wordmark {
    margin-top: 20px !important;
    margin-bottom: -2vw !important;
    font-size: clamp(6rem, 28vw, 8.8rem) !important;
    -webkit-text-stroke-color: rgba(127,211,242,.075);
  }
}

@media (max-width: 420px) {
  body.cinematic-v4 .dm-actions {
    grid-template-columns: 1fr !important;
  }

  body.cinematic-v4 .dm-hero h1 {
    font-size: clamp(2.35rem, 11.2vw, 3.25rem) !important;
  }

  body.cinematic-v4 .phone-card {
    width: min(272px, 80vw) !important;
  }

  .v5-footer-radar {
    transform: scale(.70);
  }

  .v5-signal-c {
    display: none;
  }
}

@keyframes v5AuraA {
  0%,100% { transform: translate3d(0,0,0) scale(.95); }
  50% { transform: translate3d(38px,24px,0) scale(1.06); }
}

@keyframes v5AuraB {
  0%,100% { transform: translate3d(0,0,0) scale(1.02); }
  50% { transform: translate3d(-34px,-28px,0) scale(.94); }
}

@keyframes v5Sheen {
  0%,58%,100% { left: -60%; opacity: 0; }
  66% { opacity: .65; }
  82% { left: 125%; opacity: 0; }
}

@keyframes v5FooterGlow {
  to { transform: rotate(360deg); }
}

@keyframes v5Ring {
  to { transform: rotate(360deg) rotateX(65deg); }
}

@keyframes v5RingReverse {
  to { transform: rotate(-360deg) rotateX(70deg); }
}

@keyframes v5Core {
  0%,100% { transform: translateY(0) rotateY(-5deg) rotateX(3deg); }
  50% { transform: translateY(-9px) rotateY(6deg) rotateX(-3deg); }
}

@keyframes v5Dot1 {
  to { transform: rotate(360deg) translateX(78px) rotate(-360deg); }
}
@keyframes v5Dot2 {
  to { transform: rotate(-360deg) translateX(112px) rotate(360deg); }
}
@keyframes v5Dot3 {
  to { transform: rotate(360deg) translateX(145px) rotate(-360deg); }
}

@keyframes v5Signal {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes v5Line {
  0%,100% { transform: scaleY(.55); opacity: .38; }
  50% { transform: scaleY(1.15); opacity: .82; }
}

@keyframes v5Wordmark {
  0%,100% { background-position: 0% 50%; opacity: .72; }
  50% { background-position: 100% 50%; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .v5-section-aura::before,
  .v5-section-aura::after,
  .v5-card-sheen::before,
  .v5-footer-stage::before,
  .v5-ring,
  .v5-footer-core,
  .v5-orbit-dot,
  .v5-signal,
  .v5-footer-line i,
  body.cinematic-v4 .v3-footer-wordmark {
    animation: none !important;
  }
}


/* =========================================================
   V4.2 Compact Split Hero + Cinematic Wordmark
   Senior mobile composition pass
   ========================================================= */

/* Restore the original full-color DutyMate footer logo.
   It sits on a neutral glass plate so its production colors remain readable. */
body.cinematic-v4 .v3-footer-brand img {
  width: 184px !important;
  height: auto !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Large-screen footer wordmark becomes a layered luminous object. */
body.cinematic-v4 .v3-footer-wordmark {
  position: relative !important;
  isolation: isolate;
  width: min(1180px, calc(100% - 40px)) !important;
  min-height: clamp(120px, 15vw, 220px);
  margin: 18px auto -14px !important;
  display: grid;
  place-items: center;
  overflow: visible;
  color: transparent !important;
  perspective: 800px;
  transform-style: preserve-3d;
  user-select: none;
  pointer-events: none;
}

body.cinematic-v4 .v3-footer-wordmark span,
body.cinematic-v4 .v3-footer-wordmark::before,
body.cinematic-v4 .v3-footer-wordmark::after {
  grid-area: 1 / 1;
  font-size: clamp(6.4rem, 17vw, 15.5rem);
  line-height: .76;
  font-weight: 900;
  letter-spacing: -.095em;
  white-space: nowrap;
}

body.cinematic-v4 .v3-footer-wordmark span {
  position: relative;
  z-index: 3;
  display: block;
  background:
    linear-gradient(
      105deg,
      rgba(95,205,247,.12) 0%,
      rgba(119,236,236,.42) 24%,
      rgba(129,148,255,.40) 48%,
      rgba(100,233,220,.44) 70%,
      rgba(88,196,241,.12) 100%
    );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(132,222,248,.13);
  text-shadow:
    0 1px 0 rgba(116,216,245,.08),
    0 10px 34px rgba(64,184,226,.08),
    0 22px 70px rgba(72,108,255,.055);
  transform: rotateX(9deg) translateZ(24px);
  animation: v42WordGlow 7.8s ease-in-out infinite;
}

body.cinematic-v4 .v3-footer-wordmark::before {
  content: attr(data-text);
  z-index: 1;
  color: rgba(36,103,137,.20);
  -webkit-text-stroke: 1px rgba(84,184,220,.08);
  transform: translateY(12px) rotateX(9deg) translateZ(-18px);
  filter: blur(.4px);
  text-shadow:
    0 8px 0 rgba(7,41,67,.28),
    0 16px 0 rgba(6,34,57,.18),
    0 30px 44px rgba(0,0,0,.28);
}

body.cinematic-v4 .v3-footer-wordmark::after {
  content: attr(data-text);
  z-index: 4;
  color: transparent;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 38%,
      rgba(221,251,255,.76) 48%,
      rgba(126,227,255,.30) 54%,
      transparent 64%,
      transparent 100%
    );
  background-size: 260% 100%;
  background-position: -140% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(115,225,255,.15));
  transform: rotateX(9deg) translateZ(34px);
  animation: v42WordSweep 5.8s ease-in-out infinite;
}

/* A floor reflection grounds the wordmark instead of leaving it floating. */
body.cinematic-v4 .v3-footer-wordmark span::after {
  content: "DutyMate";
  position: absolute;
  left: 50%;
  top: 76%;
  transform: translateX(-50%) scaleY(-.52) skewX(-2deg);
  transform-origin: center top;
  color: rgba(96,198,231,.055);
  -webkit-text-stroke: 1px rgba(110,213,241,.025);
  filter: blur(2.2px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 75%);
  opacity: .75;
}

/* The hero uses a side-by-side product composition all the way down to phones.
   No stacked giant phone, no text/product overlap. */
@media (max-width: 1024px) {
  body.cinematic-v4 .dm-hero {
    min-height: auto !important;
    padding: 92px 0 28px !important;
  }

  body.cinematic-v4 .dm-hero-grid {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr) !important;
    align-items: center !important;
    gap: clamp(14px, 3vw, 28px) !important;
    padding: 14px 0 10px !important;
  }

  body.cinematic-v4 .dm-hero-grid > div:first-child {
    order: initial !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    z-index: 8 !important;
    transform: none !important;
    translate: none !important;
  }

  body.cinematic-v4 .dm-device-wrap {
    order: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 455px !important;
    height: 455px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    translate: none !important;
  }

  body.cinematic-v4 .phone-card {
    position: absolute !important;
    left: 50% !important;
    top: 4px !important;
    width: 340px !important;
    margin: 0 !important;
    transform-origin: 50% 0 !important;
    transform: translateX(-50%) scale(.74) !important;
    animation: none !important;
  }

  body.cinematic-v4 .dm-device-wrap::before {
    width: min(405px, 46vw) !important;
    max-width: 405px !important;
  }

  body.cinematic-v4 .dm-device-wrap::after {
    width: 78% !important;
    height: 78px !important;
    bottom: 26px !important;
  }

  .v4-float-chip {
    transform: scale(.80) !important;
    transform-origin: center !important;
  }

  .v4-chip-a {
    left: -8px !important;
    top: 24% !important;
  }

  .v4-chip-b {
    right: -8px !important;
    top: 48% !important;
  }

  .v4-chip-c {
    left: 8% !important;
    bottom: 16% !important;
  }
}

@media (max-width: 700px) {
  body.cinematic-v4 .dm-hero {
    padding: 82px 0 18px !important;
  }

  body.cinematic-v4 .dm-hero-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(132px, .82fr) !important;
    gap: 4px !important;
    align-items: center !important;
  }

  body.cinematic-v4 .dm-hero-grid > div:first-child {
    padding-right: 2px;
  }

  body.cinematic-v4 .dm-hero-badge {
    width: max-content;
    max-width: 100%;
    padding: 7px 8px !important;
    font-size: .56rem !important;
    letter-spacing: .035em;
  }

  body.cinematic-v4 .dm-hero h1 {
    margin: 14px 0 11px !important;
    max-width: 230px;
    font-size: clamp(2rem, 7.9vw, 2.72rem) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
  }

  body.cinematic-v4 .dm-hero h1::after {
    width: .31em;
    height: .31em;
  }

  body.cinematic-v4 .dm-hero-lead {
    max-width: 238px;
    margin: 0 !important;
    font-size: .77rem !important;
    line-height: 1.54 !important;
    color: #aec5d5 !important;
  }

  body.cinematic-v4 .dm-actions {
    width: min(225px, 100%);
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-top: 15px !important;
  }

  body.cinematic-v4 .dm-button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: .68rem !important;
  }

  body.cinematic-v4 .dm-play-copy small {
    font-size: .47rem !important;
  }

  body.cinematic-v4 .dm-trust {
    width: min(235px, 100%);
    margin-top: 12px !important;
    gap: 5px !important;
  }

  body.cinematic-v4 .dm-trust span {
    padding: 5px 7px !important;
    font-size: .54rem !important;
  }

  body.cinematic-v4 .dm-trust span:nth-child(n+4) {
    display: none;
  }

  body.cinematic-v4 .dm-device-wrap {
    min-height: 350px !important;
    height: 350px !important;
  }

  body.cinematic-v4 .phone-card {
    top: 7px !important;
    width: 315px !important;
    transform: translateX(-50%) scale(.56) !important;
  }

  body.cinematic-v4 .dm-device-wrap::before {
    width: min(310px, 88vw) !important;
  }

  body.cinematic-v4 .dm-device-wrap::after {
    width: 90% !important;
    height: 64px !important;
    bottom: 15px !important;
  }

  .v4-float-chip {
    min-width: 96px !important;
    padding: 6px 7px !important;
    border-radius: 11px !important;
    transform: scale(.70) !important;
  }

  .v4-float-chip strong {
    font-size: .58rem !important;
  }

  .v4-float-chip small {
    font-size: .45rem !important;
  }

  .v4-chip-a {
    left: -14px !important;
    top: 26% !important;
  }

  .v4-chip-b {
    right: -18px !important;
    top: 51% !important;
  }

  .v4-chip-c {
    display: none !important;
  }

  body.cinematic-v4 .v3-orbit-a {
    width: 28rem !important;
    height: 28rem !important;
    right: -18rem !important;
    top: 5rem !important;
    opacity: .74 !important;
  }

  body.cinematic-v4 .v3-orbit-b {
    width: 15rem !important;
    height: 15rem !important;
    right: -5rem !important;
    top: 16rem !important;
    opacity: .46 !important;
  }

  body.cinematic-v4 .v3-beam {
    opacity: .34 !important;
  }

  body.cinematic-v4 .v3-footer-brand img {
    width: 154px !important;
    padding: 8px 9px !important;
    border-radius: 13px !important;
  }

  body.cinematic-v4 .v3-footer-wordmark {
    width: min(100% - 24px, 1180px) !important;
    min-height: 112px;
    margin: 20px auto -4px !important;
    overflow: visible !important;
  }

  body.cinematic-v4 .v3-footer-wordmark span,
  body.cinematic-v4 .v3-footer-wordmark::before,
  body.cinematic-v4 .v3-footer-wordmark::after {
    font-size: clamp(4.7rem, 19.5vw, 6.2rem) !important;
    letter-spacing: -.085em !important;
  }

  body.cinematic-v4 .v3-footer-wordmark span {
    transform: rotateX(7deg) translateZ(18px);
  }

  body.cinematic-v4 .v3-footer-wordmark::before {
    transform: translateY(9px) rotateX(7deg) translateZ(-14px);
  }

  body.cinematic-v4 .v3-footer-wordmark::after {
    transform: rotateX(7deg) translateZ(26px);
  }
}

@media (max-width: 430px) {
  body.cinematic-v4 .dm-shell {
    width: min(100% - 20px, 1180px) !important;
  }

  body.cinematic-v4 .dm-hero {
    padding: 80px 0 15px !important;
  }

  body.cinematic-v4 .dm-hero-grid {
    grid-template-columns: minmax(0, 1.22fr) minmax(118px, .78fr) !important;
    gap: 0 !important;
  }

  body.cinematic-v4 .dm-hero h1 {
    max-width: 210px;
    font-size: clamp(1.92rem, 8vw, 2.35rem) !important;
  }

  body.cinematic-v4 .dm-hero-lead {
    max-width: 215px;
    font-size: .72rem !important;
  }

  body.cinematic-v4 .dm-actions {
    width: min(205px, 100%);
  }

  body.cinematic-v4 .dm-button {
    min-height: 39px !important;
    font-size: .64rem !important;
  }

  body.cinematic-v4 .dm-device-wrap {
    min-height: 326px !important;
    height: 326px !important;
  }

  body.cinematic-v4 .phone-card {
    width: 305px !important;
    transform: translateX(-50%) scale(.50) !important;
  }

  body.cinematic-v4 .dm-device-wrap::before {
    width: min(285px, 86vw) !important;
  }

  .v4-chip-a {
    left: -17px !important;
  }

  .v4-chip-b {
    right: -24px !important;
  }

  body.cinematic-v4 .v3-footer-wordmark span,
  body.cinematic-v4 .v3-footer-wordmark::before,
  body.cinematic-v4 .v3-footer-wordmark::after {
    font-size: clamp(4.25rem, 18vw, 5.4rem) !important;
  }
}

@keyframes v42WordGlow {
  0%,100% {
    background-position: 0% 50%;
    filter: brightness(.90) saturate(.95);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.28) saturate(1.15);
  }
}

@keyframes v42WordSweep {
  0%,28% { background-position: -140% 50%; opacity: .15; }
  48% { opacity: .85; }
  68%,100% { background-position: 160% 50%; opacity: .12; }
}

@media (prefers-reduced-motion: reduce) {
  body.cinematic-v4 .v3-footer-wordmark span,
  body.cinematic-v4 .v3-footer-wordmark::after {
    animation: none !important;
  }
}


/* =========================================================
   V4.3 Footer logo transparency + Complete Premium cleanup
   ========================================================= */

/* The production DutyMate logo already has a transparent PNG background.
   Keep that transparency and use only a soft edge glow for readability. */
body.cinematic-v4 .v3-footer-brand img {
  width: 184px !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 1px rgba(225,249,255,.78))
    drop-shadow(0 10px 24px rgba(52,171,226,.18)) !important;
  opacity: 1 !important;
}

/* Keep the transparent counters / negative spaces visually crisp on dark footer. */
body.cinematic-v4 .v3-footer-brand {
  position: relative;
  isolation: isolate;
}

body.cinematic-v4 .v3-footer-brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 215px;
  height: 150px;
  left: -16px;
  top: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76,198,241,.085), transparent 69%);
  filter: blur(8px);
  pointer-events: none;
}

/* Complete Premium is the visual anchor of the plans area. */
body.cinematic-v4 .dm-complete-head {
  width: 100%;
  min-width: 0;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body.cinematic-v4 .dm-plan-complete .dm-plan-label {
  color: #7edfff !important;
  line-height: 1.2;
}

body.cinematic-v4 .dm-plan-complete .dm-best-value {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 7px 11px !important;
  color: #082a3f !important;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 999px;
  background: linear-gradient(135deg, #86eee2, #72d8fb) !important;
  box-shadow:
    0 8px 20px rgba(69,197,225,.18),
    inset 0 1px 0 rgba(255,255,255,.52);
  font-size: .66rem !important;
  font-weight: 950;
  letter-spacing: .065em;
  text-transform: uppercase;
}

body.cinematic-v4 .dm-plan-complete h3 {
  margin: 0 0 9px !important;
  max-width: 760px;
  color: #fff !important;
  font-size: clamp(1.65rem, 3vw, 2.45rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em;
  min-height: 0 !important;
  text-wrap: balance;
}

body.cinematic-v4 .dm-plan-complete > p {
  max-width: 720px;
  min-height: 0 !important;
  color: #b7cede !important;
  line-height: 1.58;
}

body.cinematic-v4 .dm-plan-complete .dm-price-options {
  width: 100%;
  margin-top: 24px !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 12px !important;
}

body.cinematic-v4 .dm-plan-complete .dm-price-option {
  min-width: 0;
  min-height: 148px;
  padding: 18px !important;
  display: block;
  border: 1px solid rgba(135,187,222,.26) !important;
  border-radius: 18px !important;
  background: rgba(248,252,255,.96) !important;
  box-shadow:
    0 12px 30px rgba(0,21,39,.12),
    inset 0 1px 0 #fff;
}

body.cinematic-v4 .dm-plan-complete .dm-price-option-yearly {
  background: linear-gradient(145deg, #eff6ff, #e6f1ff) !important;
}

body.cinematic-v4 .dm-plan-complete .dm-price-option > span {
  color: #60758b !important;
}

body.cinematic-v4 .dm-plan-complete .dm-price-option strong {
  max-width: 100%;
  color: #15263d !important;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important;
  line-height: 1.05;
  white-space: normal;
}

body.cinematic-v4 .dm-plan-complete .dm-price-option small {
  color: #4c6075 !important;
}

body.cinematic-v4 .dm-plan-complete .dm-price-option em {
  min-height: 0 !important;
  color: #71869a !important;
}

body.cinematic-v4 .dm-plan-complete .dm-price-option b {
  color: #405f87 !important;
  background: #dce8ff !important;
}

body.cinematic-v4 .dm-plan-complete .dm-plan-features {
  width: 100%;
  margin: 24px 0 18px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 30px !important;
}

body.cinematic-v4 .dm-plan-complete .dm-plan-features li {
  min-width: 0;
  color: #c2d5e3 !important;
  line-height: 1.42;
}

body.cinematic-v4 .dm-plan-complete .dm-plan-features li::before {
  border-color: #6fbfe4 !important;
  color: #76d9f7 !important;
  background: rgba(86,190,229,.045);
}

body.cinematic-v4 .dm-plan-complete .dm-plan-restriction {
  min-height: 0 !important;
  margin: 0 0 18px !important;
  color: #90adbf !important;
}

body.cinematic-v4 .dm-plan-complete > a {
  min-height: 50px !important;
  border: 1px solid rgba(132,217,247,.20);
  background: linear-gradient(135deg, #3c79c7, #507bdb 55%, #6472e5) !important;
  box-shadow: 0 14px 30px rgba(25,73,139,.24);
}

/* Desktop: two focused plans on top, Complete Premium as a wide featured card. */
@media (min-width: 901px) {
  body.cinematic-v4 .dm-premium-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    align-items: stretch;
  }

  body.cinematic-v4 .dm-premium-grid .dm-plan-complete {
    grid-column: 1 / -1 !important;
    padding: 32px 34px !important;
    border: 1.5px solid rgba(103,206,243,.34) !important;
    background:
      radial-gradient(circle at 88% 9%, rgba(89,224,217,.16), transparent 19rem),
      radial-gradient(circle at 12% 94%, rgba(84,116,255,.09), transparent 20rem),
      linear-gradient(145deg, #061d32, #0a4b70) !important;
    box-shadow:
      0 34px 84px rgba(5,35,58,.18),
      inset 0 1px 0 rgba(255,255,255,.055) !important;
  }
}

/* Tablet/mobile: one clean card with no badge overlap or squeezed prices. */
@media (max-width: 900px) {
  body.cinematic-v4 .dm-premium-grid {
    grid-template-columns: 1fr !important;
  }

  body.cinematic-v4 .dm-premium-grid .dm-plan-complete {
    grid-column: auto !important;
  }

  body.cinematic-v4 .dm-plan-complete {
    padding: 25px 22px !important;
  }

  body.cinematic-v4 .dm-plan-complete .dm-price-options {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  body.cinematic-v4 .dm-plan-complete .dm-price-option {
    min-height: 0 !important;
    padding: 17px !important;
  }

  body.cinematic-v4 .dm-plan-complete .dm-plan-features {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.cinematic-v4 .dm-plan-complete h3 {
    font-size: clamp(1.65rem, 6vw, 2.15rem) !important;
  }
}

@media (max-width: 520px) {
  body.cinematic-v4 .dm-complete-head {
    margin-bottom: 12px;
    align-items: center;
  }

  body.cinematic-v4 .dm-plan-complete .dm-plan-label {
    font-size: .64rem !important;
    letter-spacing: .10em;
  }

  body.cinematic-v4 .dm-plan-complete .dm-best-value {
    padding: 6px 9px !important;
    font-size: .59rem !important;
  }

  body.cinematic-v4 .dm-plan-complete {
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }

  body.cinematic-v4 .dm-plan-complete .dm-price-option strong {
    font-size: 1.35rem !important;
  }

  body.cinematic-v4 .v3-footer-brand img {
    width: 162px !important;
  }

  body.cinematic-v4 .v3-footer-brand::before {
    width: 185px;
    height: 128px;
    left: -12px;
    top: -14px;
  }
}


/* =========================================================
   V4.4 Global 3D Motion System
   Scroll-visible on touch/mobile, pointer-enhanced on desktop.
   IMPORTANT: .v3-footer-wordmark is intentionally not touched here.
   ========================================================= */

body.cinematic-v4 {
  --v44-ease: cubic-bezier(.2,.72,.2,1);
  --v44-spring: cubic-bezier(.16,1,.3,1);
}

/* Each major section gets a moving cinematic light field. */
body.cinematic-v4 .dm-section.v44-motion-section {
  isolation: isolate;
}

body.cinematic-v4 .v44-section-scan {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s ease;
}

body.cinematic-v4 .v44-section-scan::before {
  content: "";
  position: absolute;
  width: 54%;
  height: 180%;
  left: -62%;
  top: -40%;
  transform: rotate(17deg);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(91,220,255,.015) 28%,
      rgba(91,220,255,.12) 48%,
      rgba(99,233,223,.055) 58%,
      transparent 78%
    );
  filter: blur(8px);
  animation: v44SectionSweep 8.8s ease-in-out infinite;
}

body.cinematic-v4 .v44-section-scan::after {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  right: -9rem;
  top: 14%;
  border-radius: 50%;
  border: 1px solid rgba(74,170,220,.10);
  box-shadow:
    0 0 0 38px rgba(78,135,255,.014),
    0 0 0 84px rgba(92,228,219,.010);
  animation: v44OrbitDrift 15s linear infinite;
}

body.cinematic-v4 .dm-section.v44-section-active > .v44-section-scan {
  opacity: 1;
}

/* Keep actual section content above the animated field. */
body.cinematic-v4 .dm-section.v44-motion-section > .dm-shell {
  position: relative;
  z-index: 2;
}

/* Headings enter with obvious depth instead of a flat fade. */
body.cinematic-v4 .v44-heading {
  opacity: 0;
  transform:
    perspective(1100px)
    translate3d(0, 34px, 0)
    rotateX(8deg)
    scale(.975);
  transform-origin: 50% 100%;
  filter: blur(7px);
  transition:
    opacity .72s var(--v44-ease) var(--v44-delay, 0ms),
    transform .86s var(--v44-spring) var(--v44-delay, 0ms),
    filter .72s ease var(--v44-delay, 0ms);
  will-change: transform, opacity;
}

body.cinematic-v4 .v44-heading.v44-in {
  opacity: 1;
  transform:
    perspective(1100px)
    translate3d(0, var(--v44-scroll-y, 0px), 0)
    rotateX(var(--v44-scroll-rx, 0deg))
    scale(1);
  filter: blur(0);
}

body.cinematic-v4 .v44-heading h2 {
  position: relative;
}

body.cinematic-v4 .v44-heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.13em;
  width: min(140px, 32%);
  height: 2px;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: .0;
  background: linear-gradient(90deg, var(--v4-cyan), var(--v4-blue), transparent);
  box-shadow: 0 0 18px rgba(91,220,255,.25);
  transition:
    transform .8s var(--v44-spring) calc(var(--v44-delay, 0ms) + 160ms),
    opacity .5s ease calc(var(--v44-delay, 0ms) + 120ms);
}

body.cinematic-v4 .v44-heading.v44-in h2::after {
  transform: scaleX(1);
  opacity: .8;
}

/* Reusable 3D entrance for cards / panels / plan blocks. */
body.cinematic-v4 .v44-motion-card {
  --v44-card-y: 34px;
  --v44-card-rx: 7deg;
  --v44-card-ry: 0deg;
  opacity: 0;
  transform:
    perspective(1100px)
    translate3d(0, calc(var(--v44-card-y) + var(--v44-scroll-y, 0px)), 0)
    rotateX(calc(var(--v44-card-rx) + var(--v44-scroll-rx, 0deg)))
    rotateY(calc(var(--v44-card-ry) + var(--v44-scroll-ry, 0deg)))
    scale(.965);
  transform-origin: 50% 65%;
  filter: blur(5px) saturate(.92);
  transition:
    opacity .66s ease var(--v44-delay, 0ms),
    transform .82s var(--v44-spring) var(--v44-delay, 0ms),
    filter .66s ease var(--v44-delay, 0ms),
    box-shadow .28s ease,
    border-color .28s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

body.cinematic-v4 .v44-motion-card.v44-in {
  --v44-card-y: 0px;
  --v44-card-rx: 0deg;
  opacity: 1;
  filter: blur(0) saturate(1);
}

/* Alternate entry direction for neighboring cards. */
body.cinematic-v4 .v44-motion-card.v44-from-left {
  --v44-card-ry: -5deg;
}
body.cinematic-v4 .v44-motion-card.v44-from-right {
  --v44-card-ry: 5deg;
}
body.cinematic-v4 .v44-motion-card.v44-in.v44-from-left,
body.cinematic-v4 .v44-motion-card.v44-in.v44-from-right {
  --v44-card-ry: 0deg;
}

/* Animated light follows cards on desktop, auto-sweeps on mobile. */
body.cinematic-v4 .v44-motion-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 210px;
  height: 210px;
  left: var(--v44-light-x, 50%);
  top: var(--v44-light-y, 50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: var(--v44-light-opacity, 0);
  background: radial-gradient(circle, rgba(89,211,255,.18), rgba(80,130,255,.055) 38%, transparent 68%);
  filter: blur(4px);
  transition: opacity .24s ease;
  pointer-events: none;
}

body.cinematic-v4 .v44-motion-card > * {
  position: relative;
  z-index: 1;
}

/* App/product stages float continuously after entering. */
body.cinematic-v4 .v44-motion-stage {
  opacity: 0;
  transform:
    perspective(1200px)
    translate3d(0, 42px, 0)
    rotateX(6deg)
    scale(.96);
  filter: blur(6px);
  transition:
    opacity .72s ease var(--v44-delay, 0ms),
    transform .92s var(--v44-spring) var(--v44-delay, 0ms),
    filter .72s ease var(--v44-delay, 0ms);
  will-change: transform, opacity;
}

body.cinematic-v4 .v44-motion-stage.v44-in {
  opacity: 1;
  filter: blur(0);
  transform:
    perspective(1200px)
    translate3d(0, var(--v44-scroll-y, 0px), 0)
    rotateX(var(--v44-scroll-rx, 0deg))
    rotateY(var(--v44-scroll-ry, 0deg))
    scale(1);
}

/* Icons and metrics visibly come alive on entry. */
body.cinematic-v4 .v44-icon-pop {
  transform-origin: center;
}

body.cinematic-v4 .v44-icon-pop.v44-in {
  animation: v44IconPop .86s var(--v44-spring) both;
  animation-delay: var(--v44-delay, 0ms);
}

body.cinematic-v4 .v44-stat-pop {
  opacity: 0;
  transform: translateY(14px) scale(.88);
  transition:
    opacity .5s ease var(--v44-delay, 0ms),
    transform .72s var(--v44-spring) var(--v44-delay, 0ms);
}

body.cinematic-v4 .v44-stat-pop.v44-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Small chips / pills get a visible stagger. */
body.cinematic-v4 .v44-chip-pop {
  opacity: 0;
  transform: translateY(10px) scale(.9);
  transition:
    opacity .42s ease var(--v44-delay, 0ms),
    transform .64s var(--v44-spring) var(--v44-delay, 0ms);
}
body.cinematic-v4 .v44-chip-pop.v44-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Dark cards and Complete Premium get a stronger breathing edge glow. */
body.cinematic-v4 .dm-pro-card.v44-in,
body.cinematic-v4 .dm-report-summary.v44-in,
body.cinematic-v4 .dm-plan-complete.v44-in,
body.cinematic-v4 .dm-download.v44-in {
  animation: v44EdgeBreath 5.8s ease-in-out infinite;
}

/* Reports have a moving scan line. */
body.cinematic-v4 .dm-report-summary.v44-motion-card,
body.cinematic-v4 .dm-download.v44-motion-card {
  overflow: hidden;
}
body.cinematic-v4 .dm-report-summary.v44-motion-card::after,
body.cinematic-v4 .dm-download.v44-motion-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -30%;
  top: -35%;
  width: 30%;
  height: 170%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(193,245,255,.13), transparent);
  animation: v44PanelSweep 6.8s ease-in-out infinite;
  pointer-events: none;
}

/* FAQ rows feel interactive before opening. */
body.cinematic-v4 .dm-faq-grid details.v44-motion-card {
  transform-origin: 50% 50%;
}
body.cinematic-v4 .dm-faq-grid details.v44-motion-card[open] {
  border-color: rgba(80,166,220,.23) !important;
  box-shadow:
    0 22px 58px rgba(8,43,69,.12),
    0 0 34px rgba(79,194,236,.055) !important;
}

/* Footer content enters in depth, but bottom DutyMate wordmark is excluded. */
body.cinematic-v4 .v3-footer-cta.v44-motion-stage,
body.cinematic-v4 .v5-footer-stage.v44-motion-stage,
body.cinematic-v4 .v3-footer-grid.v44-motion-stage {
  transform-origin: 50% 100%;
}

/* Desktop interaction: stronger but controlled card depth. */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  body.cinematic-v4 .v44-motion-card.v44-in:hover {
    box-shadow:
      0 34px 86px rgba(8,43,69,.15),
      0 0 42px rgba(78,190,235,.07),
      inset 0 1px 0 rgba(255,255,255,.94);
  }

  body.cinematic-v4 .dm-pro-card.v44-motion-card.v44-in:hover,
  body.cinematic-v4 .dm-plan-complete.v44-motion-card.v44-in:hover,
  body.cinematic-v4 .dm-report-summary.v44-motion-card.v44-in:hover {
    box-shadow:
      0 38px 94px rgba(0,18,36,.28),
      0 0 54px rgba(80,201,242,.10),
      inset 0 1px 0 rgba(255,255,255,.07) !important;
  }
}

/* Touch/mobile animation must remain visible without hover. */
@media (max-width: 1024px) {
  body.cinematic-v4 .v44-section-scan {
    opacity: .34;
  }

  body.cinematic-v4 .dm-section.v44-section-active > .v44-section-scan {
    opacity: .72;
  }

  body.cinematic-v4 .v44-section-scan::before {
    width: 70%;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(78,190,239,.025) 26%,
        rgba(78,190,239,.15) 48%,
        rgba(91,228,221,.07) 58%,
        transparent 80%
      );
    animation-duration: 7.2s;
  }

  body.cinematic-v4 .v44-motion-card.v44-in {
    --v44-light-opacity: .22;
  }

  body.cinematic-v4 .v44-motion-card::before {
    width: 170px;
    height: 170px;
    left: 82%;
    top: 10%;
    animation: v44MobileGlow 5.5s ease-in-out infinite;
  }

  body.cinematic-v4 .v44-heading.v44-in {
    transform:
      perspective(900px)
      translate3d(0, var(--v44-scroll-y, 0px), 0)
      rotateX(var(--v44-scroll-rx, 0deg))
      scale(1);
  }

  body.cinematic-v4 .v44-motion-card.v44-in,
  body.cinematic-v4 .v44-motion-stage.v44-in {
    transition-duration: .74s, .86s, .62s;
  }

  body.cinematic-v4 .dm-feature-icon.v44-icon-pop.v44-in,
  body.cinematic-v4 .dm-copy-item-icon.v44-icon-pop.v44-in,
  body.cinematic-v4 .dm-source-badge.v44-icon-pop.v44-in,
  body.cinematic-v4 .dm-step-number.v44-icon-pop.v44-in {
    animation:
      v44IconPop .82s var(--v44-spring) both,
      v44IconFloat 4.8s ease-in-out 1.1s infinite;
    animation-delay: var(--v44-delay, 0ms), calc(var(--v44-delay, 0ms) + 900ms);
  }
}

@media (max-width: 640px) {
  body.cinematic-v4 .v44-motion-card {
    --v44-card-y: 26px;
    --v44-card-rx: 5deg;
  }

  body.cinematic-v4 .v44-heading {
    transform:
      perspective(800px)
      translate3d(0, 26px, 0)
      rotateX(6deg)
      scale(.98);
  }

  body.cinematic-v4 .v44-section-scan::after {
    width: 16rem;
    height: 16rem;
    right: -9rem;
  }

  body.cinematic-v4 .dm-pro-card.v44-in,
  body.cinematic-v4 .dm-report-summary.v44-in,
  body.cinematic-v4 .dm-plan-complete.v44-in,
  body.cinematic-v4 .dm-download.v44-in {
    animation-duration: 4.8s;
  }
}

@keyframes v44SectionSweep {
  0%, 12% { left: -70%; opacity: 0; }
  32% { opacity: .72; }
  68% { opacity: .58; }
  88%, 100% { left: 125%; opacity: 0; }
}

@keyframes v44OrbitDrift {
  from { transform: rotate(0deg) scale(.96); }
  50% { transform: rotate(180deg) scale(1.05); }
  to { transform: rotate(360deg) scale(.96); }
}

@keyframes v44IconPop {
  0% { transform: translateY(12px) rotateY(-28deg) scale(.72); opacity: 0; }
  60% { transform: translateY(-4px) rotateY(8deg) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) rotateY(0) scale(1); opacity: 1; }
}

@keyframes v44IconFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes v44EdgeBreath {
  0%,100% {
    box-shadow:
      0 26px 72px rgba(5,38,63,.11),
      0 0 0 rgba(80,196,237,0);
  }
  50% {
    box-shadow:
      0 32px 82px rgba(5,38,63,.15),
      0 0 42px rgba(80,196,237,.10);
  }
}

@keyframes v44PanelSweep {
  0%, 15% { left: -35%; opacity: 0; }
  34% { opacity: .72; }
  72% { opacity: .38; }
  88%,100% { left: 125%; opacity: 0; }
}

@keyframes v44MobileGlow {
  0%,100% { transform: translate(-50%,-50%) scale(.82); opacity: .10; }
  50% { transform: translate(-62%,-34%) scale(1.15); opacity: .34; }
}

/* Preserve accessibility and battery life for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  body.cinematic-v4 .v44-section-scan,
  body.cinematic-v4 .v44-section-scan::before,
  body.cinematic-v4 .v44-section-scan::after,
  body.cinematic-v4 .v44-motion-card,
  body.cinematic-v4 .v44-motion-card::before,
  body.cinematic-v4 .v44-motion-card::after,
  body.cinematic-v4 .v44-motion-stage,
  body.cinematic-v4 .v44-heading,
  body.cinematic-v4 .v44-heading h2::after,
  body.cinematic-v4 .v44-icon-pop,
  body.cinematic-v4 .v44-stat-pop,
  body.cinematic-v4 .v44-chip-pop {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}


/* V4.4 hero and navigation choreography */
body.cinematic-v4 .nav-wrap {
  animation: v44NavDrop .82s var(--v44-spring) both;
}

body.cinematic-v4 .v44-hero-piece {
  opacity: 0;
  filter: blur(5px);
  transform:
    perspective(1000px)
    translate3d(-24px, 22px, 0)
    rotateY(-5deg)
    scale(.98);
  transition:
    opacity .66s ease var(--v44-delay, 0ms),
    transform .86s var(--v44-spring) var(--v44-delay, 0ms),
    filter .66s ease var(--v44-delay, 0ms);
  will-change: transform, opacity;
}

body.cinematic-v4 .dm-device-wrap.v44-hero-piece {
  transform:
    perspective(1200px)
    translate3d(26px, 24px, 0)
    rotateY(6deg)
    scale(.97);
}

body.cinematic-v4 .v44-hero-piece.v44-in {
  opacity: 1;
  filter: blur(0);
  transform:
    perspective(1000px)
    translate3d(0,0,0)
    rotateX(0)
    rotateY(0)
    scale(1);
}

body.cinematic-v4 .dm-device-wrap.v44-hero-piece.v44-in {
  transform:
    perspective(1200px)
    translate3d(0,0,0)
    rotateX(0)
    rotateY(0)
    scale(1);
}

body.cinematic-v4 .dm-actions.v44-hero-piece.v44-in .dm-button-primary {
  animation: v44CtaPulse 4.6s ease-in-out 1s infinite;
}

body.cinematic-v4 .dm-trust.v44-hero-piece.v44-in span {
  animation: v44TrustFloat 4.8s ease-in-out infinite;
}
body.cinematic-v4 .dm-trust.v44-hero-piece.v44-in span:nth-child(2) { animation-delay: -.7s; }
body.cinematic-v4 .dm-trust.v44-hero-piece.v44-in span:nth-child(3) { animation-delay: -1.4s; }
body.cinematic-v4 .dm-trust.v44-hero-piece.v44-in span:nth-child(4) { animation-delay: -2.1s; }
body.cinematic-v4 .dm-trust.v44-hero-piece.v44-in span:nth-child(5) { animation-delay: -2.8s; }

@media (max-width: 1024px) {
  body.cinematic-v4 .v44-hero-piece {
    transform:
      perspective(800px)
      translate3d(-18px, 18px, 0)
      rotateY(-4deg)
      scale(.985);
  }

  body.cinematic-v4 .dm-device-wrap.v44-hero-piece {
    transform:
      perspective(900px)
      translate3d(18px, 16px, 0)
      rotateY(5deg)
      scale(.97);
  }

  body.cinematic-v4 .v44-hero-piece.v44-in,
  body.cinematic-v4 .dm-device-wrap.v44-hero-piece.v44-in {
    transform: perspective(900px) translate3d(0,0,0) rotateX(0) rotateY(0) scale(1);
  }
}

@keyframes v44NavDrop {
  0% {
    opacity: 0;
    transform: translateY(-22px) scale(.985);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes v44CtaPulse {
  0%,100% {
    box-shadow:
      0 18px 42px rgba(43,105,224,.34),
      inset 0 1px 0 rgba(255,255,255,.21);
  }
  50% {
    box-shadow:
      0 22px 54px rgba(43,105,224,.46),
      0 0 28px rgba(91,220,255,.13),
      inset 0 1px 0 rgba(255,255,255,.28);
  }
}

@keyframes v44TrustFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  body.cinematic-v4 .nav-wrap,
  body.cinematic-v4 .v44-hero-piece,
  body.cinematic-v4 .dm-actions.v44-hero-piece.v44-in .dm-button-primary,
  body.cinematic-v4 .dm-trust.v44-hero-piece.v44-in span {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}


/* =========================================================
   V4.5 App Preview Motion + Footer Logo Clarity
   Continuous motion for all app-style previews on desktop + mobile.
   Bottom cinematic DutyMate wordmark intentionally untouched.
   ========================================================= */

/* App preview stages */
body.cinematic-v4 .v45-app-preview {
  position: relative !important;
  isolation: isolate;
  perspective: 1200px;
  transform-style: preserve-3d;
}

body.cinematic-v4 .v45-app-surface {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
}

body.cinematic-v4 .v45-app-preview.v45-live .v45-app-surface {
  animation: v45PreviewFloat 6.8s ease-in-out infinite;
}

body.cinematic-v4 .v45-preview-sheen,
body.cinematic-v4 .v45-preview-depth {
  position: absolute;
  z-index: 7;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}

body.cinematic-v4 .v45-preview-sheen::before {
  content: "";
  position: absolute;
  width: 27%;
  height: 165%;
  left: -44%;
  top: -32%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(209,248,255,.025) 24%,
    rgba(209,248,255,.25) 49%,
    rgba(106,222,247,.10) 61%,
    transparent 84%
  );
  filter: blur(2px);
}

body.cinematic-v4 .v45-app-preview.v45-live .v45-preview-sheen::before {
  animation: v45PreviewSweep 5.9s ease-in-out infinite;
}

body.cinematic-v4 .v45-preview-depth {
  z-index: 0;
  inset: -8px;
  border: 1px solid rgba(91,220,255,.10);
  box-shadow:
    0 26px 70px rgba(5,43,69,.16),
    0 0 46px rgba(74,195,237,.075);
  opacity: .62;
  animation: none;
}

body.cinematic-v4 .v45-app-preview.v45-live .v45-preview-depth {
  animation: v45DepthBreath 4.9s ease-in-out infinite;
}

/* Hero app screen */
body.cinematic-v4 .phone-card.v45-app-preview .dm-phone {
  transform-origin: 50% 56%;
}

body.cinematic-v4 .phone-card.v45-app-preview.v45-live .dm-phone {
  animation-duration: 6.1s;
}

body.cinematic-v4 .phone-card.v45-app-preview.v45-live .dm-today {
  animation: v45HeroToday 4.8s ease-in-out infinite;
}

body.cinematic-v4 .phone-card.v45-app-preview.v45-live .dm-quick-card {
  animation: v45MicroFloat 5.2s ease-in-out infinite;
}
body.cinematic-v4 .phone-card.v45-app-preview.v45-live .dm-quick-card:nth-child(2) { animation-delay: -.9s; }
body.cinematic-v4 .phone-card.v45-app-preview.v45-live .dm-quick-card:nth-child(3) { animation-delay: -1.8s; }
body.cinematic-v4 .phone-card.v45-app-preview.v45-live .dm-quick-card:nth-child(4) { animation-delay: -2.7s; }

body.cinematic-v4 .phone-card.v45-app-preview.v45-live .dm-clock {
  animation: v45ClockPulse 3.9s ease-in-out infinite;
}

/* Personal calendar preview */
body.cinematic-v4 .dm-app-frame.v45-app-preview {
  overflow: visible !important;
}

body.cinematic-v4 .dm-app-frame.v45-app-preview .dm-app-window {
  transform-origin: 50% 48%;
}

body.cinematic-v4 .dm-app-frame.v45-app-preview.v45-live .dm-app-window {
  animation-duration: 7.4s;
}

body.cinematic-v4 .dm-app-frame.v45-app-preview.v45-live .dm-day.today {
  animation: v45SelectedDay 2.7s ease-in-out infinite;
}

body.cinematic-v4 .dm-app-frame.v45-app-preview.v45-live .dm-export-bar {
  position: relative;
  overflow: hidden;
  animation: v45ExportGlow 5s ease-in-out infinite;
}

body.cinematic-v4 .dm-app-frame.v45-app-preview.v45-live .dm-export-bar::after {
  content: "";
  position: absolute;
  width: 28%;
  height: 180%;
  left: -45%;
  top: -40%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  animation: v45ButtonSweep 4.5s ease-in-out infinite;
}

body.cinematic-v4 .dm-app-frame.v45-app-preview.v45-live .dm-mini-metric {
  animation: v45MetricFloat 5.4s ease-in-out infinite;
}
body.cinematic-v4 .dm-app-frame.v45-app-preview.v45-live .dm-mini-metric:nth-child(2) {
  animation-delay: -2.2s;
}

/* Professional / full roster preview */
body.cinematic-v4 .dm-pro-demo.v45-app-preview {
  overflow: visible !important;
}

body.cinematic-v4 .dm-pro-demo.v45-app-preview .dm-pro-demo-grid {
  transform-origin: 50% 50%;
}

body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-pro-demo-grid {
  animation: v45PreviewFloatDark 7.8s ease-in-out infinite;
}

body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-roster-card {
  animation: v45RosterCard 6.6s ease-in-out infinite;
}

body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-glance-card {
  animation: v45GlanceCard 6.6s ease-in-out infinite -2.3s;
}

body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-table .code {
  animation: v45CodePulse 4.6s ease-in-out infinite;
}
body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-table tbody tr:nth-child(2) .code { animation-delay: -.8s; }
body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-table tbody tr:nth-child(3) .code { animation-delay: -1.6s; }
body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-table tbody tr:nth-child(4) .code { animation-delay: -2.4s; }

body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-glance-pill {
  animation: v45PillFloat 4.9s ease-in-out infinite;
}
body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-glance-pill:nth-child(2) { animation-delay: -.7s; }
body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-glance-pill:nth-child(3) { animation-delay: -1.4s; }
body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-glance-pill:nth-child(4) { animation-delay: -2.1s; }

/* Extra app-like report surface */
body.cinematic-v4 .dm-report-layout.v45-app-preview {
  position: relative;
  perspective: 1200px;
}

body.cinematic-v4 .dm-report-layout.v45-app-preview.v45-live .dm-report-summary {
  animation: v45ReportLeft 7s ease-in-out infinite;
}

body.cinematic-v4 .dm-report-layout.v45-app-preview.v45-live .dm-report-details {
  animation: v45ReportRight 7s ease-in-out infinite -2.4s;
}

/* Footer logo: no box, no broad shadow bleeding into letter counters.
   A soft transparent halo sits behind the PNG so negative spaces stay crisp. */
body.cinematic-v4 .v3-footer-brand img {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    contrast(1.10)
    saturate(1.06)
    brightness(1.10)
    drop-shadow(0 1px 0 rgba(222,248,255,.36)) !important;
  opacity: 1 !important;
}

body.cinematic-v4 .v3-footer-brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 228px;
  height: 132px;
  left: -20px;
  top: -22px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 45% 45%,
      rgba(235,250,255,.15) 0%,
      rgba(115,217,246,.075) 34%,
      rgba(80,174,224,.025) 53%,
      transparent 72%
    ) !important;
  filter: blur(7px) !important;
  opacity: 1 !important;
  pointer-events: none;
}

/* Mobile/touch motion is deliberately visible, not hover-dependent. */
@media (max-width: 1024px) {
  body.cinematic-v4 .v45-app-preview.v45-live .v45-app-surface {
    animation-duration: 5.8s;
  }

  body.cinematic-v4 .v45-preview-depth {
    inset: -5px;
    opacity: .72;
    box-shadow:
      0 18px 48px rgba(5,43,69,.15),
      0 0 34px rgba(74,195,237,.085);
  }

  body.cinematic-v4 .v45-preview-sheen::before {
    width: 36%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(218,251,255,.035) 24%,
      rgba(218,251,255,.30) 50%,
      rgba(105,223,248,.12) 62%,
      transparent 84%
    );
  }

  body.cinematic-v4 .phone-card.v45-app-preview.v45-live .dm-phone {
    animation: v45PreviewFloatMobile 5.4s ease-in-out infinite;
  }

  body.cinematic-v4 .dm-app-frame.v45-app-preview.v45-live .dm-app-window {
    animation: v45PreviewFloatMobile 6.1s ease-in-out infinite -1.1s;
  }

  body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-pro-demo-grid {
    animation: v45PreviewFloatDarkMobile 6.5s ease-in-out infinite -.8s;
  }

  body.cinematic-v4 .dm-report-layout.v45-app-preview.v45-live .dm-report-summary {
    animation: v45ReportLeftMobile 6.2s ease-in-out infinite;
  }

  body.cinematic-v4 .dm-report-layout.v45-app-preview.v45-live .dm-report-details {
    animation: v45ReportRightMobile 6.2s ease-in-out infinite -2.1s;
  }
}

@media (max-width: 640px) {
  body.cinematic-v4 .v45-preview-depth {
    box-shadow:
      0 15px 38px rgba(5,43,69,.14),
      0 0 28px rgba(74,195,237,.09);
  }

  body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-roster-card {
    animation-duration: 5.8s;
  }

  body.cinematic-v4 .dm-pro-demo.v45-app-preview.v45-live .dm-glance-card {
    animation-duration: 5.8s;
  }

  body.cinematic-v4 .v3-footer-brand::before {
    width: 195px;
    height: 112px;
    left: -14px;
    top: -18px;
  }
}

/* Desktop pointer-enhanced depth */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  body.cinematic-v4 .v45-app-preview.v45-live .v45-preview-depth {
    box-shadow:
      0 34px 88px rgba(4,37,62,.19),
      0 0 58px rgba(71,194,238,.10);
  }
}

@keyframes v45PreviewFloat {
  0%,100% {
    transform:
      translate3d(0, var(--v45-y, 0px), 0)
      rotateX(var(--v45-rx, 0deg))
      rotateY(var(--v45-ry, 0deg));
  }
  50% {
    transform:
      translate3d(0, calc(var(--v45-y, 0px) - 8px), 18px)
      rotateX(calc(var(--v45-rx, 0deg) + 1.1deg))
      rotateY(calc(var(--v45-ry, 0deg) - 1.3deg));
  }
}

@keyframes v45PreviewFloatDark {
  0%,100% {
    transform:
      translate3d(0, var(--v45-y, 0px), 0)
      rotateX(var(--v45-rx, 0deg))
      rotateY(var(--v45-ry, 0deg));
  }
  50% {
    transform:
      translate3d(0, calc(var(--v45-y, 0px) - 7px), 16px)
      rotateX(calc(var(--v45-rx, 0deg) + .9deg))
      rotateY(calc(var(--v45-ry, 0deg) + 1.15deg));
  }
}

@keyframes v45PreviewFloatMobile {
  0%,100% {
    transform:
      translate3d(0, var(--v45-y, 0px), 0)
      rotateX(var(--v45-rx, 0deg))
      rotateY(var(--v45-ry, 0deg));
  }
  50% {
    transform:
      translate3d(0, calc(var(--v45-y, 0px) - 6px), 10px)
      rotateX(calc(var(--v45-rx, 0deg) + .75deg))
      rotateY(calc(var(--v45-ry, 0deg) - .9deg));
  }
}

@keyframes v45PreviewFloatDarkMobile {
  0%,100% {
    transform:
      translate3d(0, var(--v45-y, 0px), 0)
      rotateX(var(--v45-rx, 0deg))
      rotateY(var(--v45-ry, 0deg));
  }
  50% {
    transform:
      translate3d(0, calc(var(--v45-y, 0px) - 5px), 9px)
      rotateX(calc(var(--v45-rx, 0deg) + .7deg))
      rotateY(calc(var(--v45-ry, 0deg) + .8deg));
  }
}

@keyframes v45PreviewSweep {
  0%,18% { left: -48%; opacity: 0; }
  36% { opacity: .76; }
  70% { opacity: .48; }
  88%,100% { left: 126%; opacity: 0; }
}

@keyframes v45DepthBreath {
  0%,100% { opacity: .46; transform: scale(.985); }
  50% { opacity: .82; transform: scale(1.01); }
}

@keyframes v45HeroToday {
  0%,100% { box-shadow: 0 0 0 rgba(91,220,255,0); }
  50% { box-shadow: 0 0 28px rgba(91,220,255,.10); }
}

@keyframes v45MicroFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes v45ClockPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(94,229,223,0); }
  50% { transform: scale(1.04); box-shadow: 0 0 24px rgba(94,229,223,.14); }
}

@keyframes v45SelectedDay {
  0%,100% { box-shadow: 0 0 0 0 rgba(73,129,220,.10); }
  50% { box-shadow: 0 0 0 5px rgba(73,129,220,.08), 0 10px 24px rgba(55,112,196,.12); }
}

@keyframes v45ExportGlow {
  0%,100% { box-shadow: 0 12px 28px rgba(42,91,166,.14); }
  50% { box-shadow: 0 16px 38px rgba(42,91,166,.24), 0 0 24px rgba(84,190,241,.10); }
}

@keyframes v45ButtonSweep {
  0%,20% { left: -45%; opacity: 0; }
  43% { opacity: .9; }
  78%,100% { left: 126%; opacity: 0; }
}

@keyframes v45MetricFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes v45RosterCard {
  0%,100% { transform: translate3d(0,0,0) rotateY(0); }
  50% { transform: translate3d(-3px,-5px,10px) rotateY(-.7deg); }
}

@keyframes v45GlanceCard {
  0%,100% { transform: translate3d(0,0,0) rotateY(0); }
  50% { transform: translate3d(3px,-4px,9px) rotateY(.8deg); }
}

@keyframes v45CodePulse {
  0%,100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-2px) scale(1.025); filter: brightness(1.07); }
}

@keyframes v45PillFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes v45ReportLeft {
  0%,100% { transform: translate3d(0,0,0) rotateY(0); }
  50% { transform: translate3d(-4px,-6px,12px) rotateY(-.8deg); }
}

@keyframes v45ReportRight {
  0%,100% { transform: translate3d(0,0,0) rotateY(0); }
  50% { transform: translate3d(4px,-5px,10px) rotateY(.8deg); }
}

@keyframes v45ReportLeftMobile {
  0%,100% { transform: translate3d(0,0,0) rotateX(0); }
  50% { transform: translate3d(0,-4px,6px) rotateX(.45deg); }
}

@keyframes v45ReportRightMobile {
  0%,100% { transform: translate3d(0,0,0) rotateX(0); }
  50% { transform: translate3d(0,-3px,5px) rotateX(-.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.cinematic-v4 .v45-app-preview,
  body.cinematic-v4 .v45-app-surface,
  body.cinematic-v4 .v45-preview-sheen::before,
  body.cinematic-v4 .v45-preview-depth,
  body.cinematic-v4 .phone-card.v45-app-preview .dm-today,
  body.cinematic-v4 .phone-card.v45-app-preview .dm-quick-card,
  body.cinematic-v4 .phone-card.v45-app-preview .dm-clock,
  body.cinematic-v4 .dm-app-frame.v45-app-preview .dm-day.today,
  body.cinematic-v4 .dm-app-frame.v45-app-preview .dm-export-bar,
  body.cinematic-v4 .dm-app-frame.v45-app-preview .dm-export-bar::after,
  body.cinematic-v4 .dm-app-frame.v45-app-preview .dm-mini-metric,
  body.cinematic-v4 .dm-pro-demo.v45-app-preview .dm-pro-demo-grid,
  body.cinematic-v4 .dm-pro-demo.v45-app-preview .dm-roster-card,
  body.cinematic-v4 .dm-pro-demo.v45-app-preview .dm-glance-card,
  body.cinematic-v4 .dm-pro-demo.v45-app-preview .dm-table .code,
  body.cinematic-v4 .dm-pro-demo.v45-app-preview .dm-glance-pill,
  body.cinematic-v4 .dm-report-layout.v45-app-preview .dm-report-summary,
  body.cinematic-v4 .dm-report-layout.v45-app-preview .dm-report-details {
    animation: none !important;
    transform: none !important;
  }
}


/* =========================================================
   V4.6 Mobile Hero Guardrails + Premium Footer Composition
   Desktop hero and bottom cinematic DutyMate wordmark are untouched.
   ========================================================= */

/* ---------- Mobile hero: keep the complete phone inside the viewport ---------- */
@media (max-width: 700px) {
  body.cinematic-v4 .dm-hero {
    overflow: hidden !important;
  }

  body.cinematic-v4 .dm-hero-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(118px, .82fr) !important;
    gap: 0 !important;
    align-items: center !important;
  }

  body.cinematic-v4 .dm-hero-grid > div:first-child {
    min-width: 0 !important;
    padding-right: 4px !important;
  }

  body.cinematic-v4 .dm-device-wrap {
    min-width: 0 !important;
    width: 100% !important;
    height: 326px !important;
    min-height: 326px !important;
    overflow: visible !important;
  }

  body.cinematic-v4 .phone-card {
    left: 42% !important;
    top: 4px !important;
    width: 292px !important;
    transform-origin: 50% 0 !important;
    transform: translateX(-50%) scale(.47) !important;
  }

  body.cinematic-v4 .phone-card.v45-app-preview {
    max-width: none !important;
  }

  body.cinematic-v4 .v4-chip-a {
    left: -8px !important;
    top: 28% !important;
  }

  body.cinematic-v4 .v4-chip-b {
    right: 2px !important;
    top: 50% !important;
  }

  body.cinematic-v4 .dm-device-wrap::before {
    width: 260px !important;
    max-width: 82vw !important;
    left: 42% !important;
    transform: translateX(-50%) !important;
  }

  body.cinematic-v4 .dm-device-wrap::after {
    left: 42% !important;
    width: 82% !important;
    max-width: 230px !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 430px) {
  body.cinematic-v4 .dm-hero {
    padding: 80px 0 13px !important;
  }

  body.cinematic-v4 .dm-hero-grid {
    grid-template-columns: minmax(0, 1.22fr) minmax(112px, .78fr) !important;
  }

  body.cinematic-v4 .dm-hero h1 {
    max-width: 208px !important;
    font-size: clamp(1.9rem, 8.1vw, 2.28rem) !important;
    line-height: .97 !important;
  }

  body.cinematic-v4 .dm-hero-lead {
    max-width: 210px !important;
    font-size: .71rem !important;
  }

  body.cinematic-v4 .dm-actions {
    width: min(202px, 100%) !important;
  }

  body.cinematic-v4 .dm-device-wrap {
    height: 300px !important;
    min-height: 300px !important;
  }

  body.cinematic-v4 .phone-card {
    left: 39% !important;
    top: 8px !important;
    width: 286px !important;
    transform: translateX(-50%) scale(.43) !important;
  }

  body.cinematic-v4 .v4-float-chip {
    min-width: 90px !important;
    transform: scale(.62) !important;
  }

  body.cinematic-v4 .v4-chip-a {
    left: -12px !important;
    top: 29% !important;
  }

  body.cinematic-v4 .v4-chip-b {
    right: 4px !important;
    top: 52% !important;
  }

  body.cinematic-v4 .dm-device-wrap::before,
  body.cinematic-v4 .dm-device-wrap::after {
    left: 39% !important;
  }
}

/* ---------- Footer: one intentional premium composition ---------- */
body.cinematic-v4 .v3-footer {
  padding-bottom: 22px !important;
}

body.cinematic-v4 .v3-footer-grid {
  position: relative;
  width: min(1180px, calc(100% - 40px)) !important;
  margin: 26px auto 0 !important;
  padding: 30px !important;
  grid-template-columns: minmax(0,1.35fr) minmax(150px,.62fr) minmax(150px,.62fr) !important;
  gap: 24px 30px !important;
  border: 1px solid rgba(111,210,245,.10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 10%, rgba(81,198,239,.085), transparent 20rem),
    radial-gradient(circle at 94% 92%, rgba(91,113,255,.055), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.034), rgba(255,255,255,.012));
  box-shadow:
    0 26px 72px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

body.cinematic-v4 .v3-footer-grid::before {
  content: "";
  position: absolute;
  width: 34%;
  height: 220%;
  left: -42%;
  top: -65%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(115,224,255,.06), transparent);
  animation: v46FooterSweep 8.5s ease-in-out infinite;
  pointer-events: none;
}

body.cinematic-v4 .v3-footer-grid > * {
  position: relative;
  z-index: 2;
}

body.cinematic-v4 .v3-footer-brand {
  align-self: stretch;
  padding-right: 14px;
}

body.cinematic-v4 .v3-footer-brand::after {
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(114,202,238,.10), transparent);
}

body.cinematic-v4 .v3-footer-brand img {
  width: 184px !important;
  filter:
    brightness(1.16)
    saturate(1.08)
    contrast(1.08)
    drop-shadow(0 1px 0 rgba(233,249,255,.26)) !important;
}

body.cinematic-v4 .v3-footer-brand p {
  margin-top: 16px !important;
  max-width: 470px !important;
  color: #91afc1 !important;
  font-size: .82rem !important;
}

body.cinematic-v4 .v3-footer-chips span {
  border-color: rgba(116,207,242,.11) !important;
  background: rgba(83,181,222,.035) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

body.cinematic-v4 .v3-footer-column {
  padding-top: 4px;
}

body.cinematic-v4 .v3-footer-column > strong {
  margin-bottom: 15px !important;
  color: #e4f6ff !important;
}

body.cinematic-v4 .v3-footer-column a {
  position: relative;
  display: inline-flex;
  width: fit-content;
  transition: color .25s ease, transform .25s ease;
}

body.cinematic-v4 .v3-footer-column a::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #63e6d8;
  box-shadow: 0 0 10px rgba(99,230,216,.44);
  opacity: 0;
  transform: translate(-4px,-50%);
  transition: opacity .25s ease, transform .25s ease;
}

body.cinematic-v4 .v3-footer-column a:hover {
  transform: translateX(6px);
}

body.cinematic-v4 .v3-footer-column a:hover::before {
  opacity: 1;
  transform: translate(0,-50%);
}

/* AAW co-branding becomes a full-width signature bar instead of a small box. */
body.cinematic-v4 .v3-developer-mark {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 86px;
  margin-top: 5px;
  padding: 14px 18px !important;
  display: grid !important;
  grid-template-columns: auto minmax(210px, 260px) minmax(0,1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  border: 1px solid rgba(114,207,243,.10) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(101,220,248,.075), transparent 16rem),
    rgba(2,18,32,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 14px 34px rgba(0,0,0,.08);
}

body.cinematic-v4 .v3-developer-mark span {
  grid-column: 1 !important;
  margin: 0 !important;
  color: #6f94ab !important;
  font-size: .62rem !important;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.cinematic-v4 .v3-developer-mark img {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 232px !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(168,225,248,.28) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(145deg, rgba(247,252,255,.96), rgba(222,241,251,.92)) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  filter: saturate(1.05) contrast(1.04) !important;
}

body.cinematic-v4 .v3-developer-mark small {
  grid-column: 3 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  max-width: 520px;
  color: #7f9fb4 !important;
  font-size: .67rem !important;
  line-height: 1.55 !important;
}

/* The radar remains cinematic but no longer creates a huge empty footer gap. */
@media (max-width: 1024px) {
  body.cinematic-v4 .v5-footer-stage {
    min-height: 205px !important;
  }

  body.cinematic-v4 .v5-footer-radar {
    transform: scale(.66) !important;
    margin: -72px 0 !important;
  }

  body.cinematic-v4 .v3-footer-grid {
    padding: 26px !important;
    grid-template-columns: minmax(0,1.2fr) minmax(135px,.7fr) minmax(135px,.7fr) !important;
    gap: 22px !important;
  }
}

@media (max-width: 700px) {
  body.cinematic-v4 .v5-footer-stage {
    min-height: 176px !important;
    width: min(100% - 20px, 1180px) !important;
  }

  body.cinematic-v4 .v5-footer-radar {
    transform: scale(.56) !important;
    margin: -94px 0 !important;
  }

  body.cinematic-v4 .v3-footer-grid {
    width: min(100% - 20px, 1180px) !important;
    margin-top: 18px !important;
    padding: 20px !important;
    grid-template-columns: minmax(0,1fr) minmax(112px,.56fr) minmax(112px,.56fr) !important;
    gap: 20px 16px !important;
    border-radius: 24px !important;
  }

  body.cinematic-v4 .v3-footer-brand {
    grid-column: 1 / -1 !important;
    padding-right: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(113,205,240,.08);
  }

  body.cinematic-v4 .v3-footer-brand::after {
    display: none;
  }

  body.cinematic-v4 .v3-footer-brand img {
    width: 160px !important;
  }

  body.cinematic-v4 .v3-footer-brand p {
    max-width: 520px !important;
    margin-top: 12px !important;
    font-size: .76rem !important;
  }

  body.cinematic-v4 .v3-footer-column {
    min-width: 0;
  }

  body.cinematic-v4 .v3-footer-column > strong {
    font-size: .65rem !important;
  }

  body.cinematic-v4 .v3-footer-column a {
    font-size: .70rem !important;
  }

  body.cinematic-v4 .v3-developer-mark {
    grid-column: 1 / -1 !important;
    min-height: 0;
    padding: 13px !important;
    grid-template-columns: minmax(0, 148px) minmax(0,1fr) !important;
    gap: 10px 13px !important;
  }

  body.cinematic-v4 .v3-developer-mark span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end;
    font-size: .56rem !important;
  }

  body.cinematic-v4 .v3-developer-mark img {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 148px !important;
    padding: 9px 10px !important;
    border-radius: 13px !important;
  }

  body.cinematic-v4 .v3-developer-mark small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start;
    font-size: .59rem !important;
  }
}

@media (max-width: 430px) {
  body.cinematic-v4 .v3-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 14px !important;
    padding: 18px !important;
  }

  body.cinematic-v4 .v3-footer-brand,
  body.cinematic-v4 .v3-developer-mark {
    grid-column: 1 / -1 !important;
  }

  body.cinematic-v4 .v3-developer-mark {
    grid-template-columns: 126px minmax(0,1fr) !important;
  }

  body.cinematic-v4 .v3-developer-mark img {
    width: 126px !important;
    padding: 8px !important;
  }
}

@keyframes v46FooterSweep {
  0%,15% { left: -42%; opacity: 0; }
  34% { opacity: .62; }
  72% { opacity: .34; }
  90%,100% { left: 125%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.cinematic-v4 .v3-footer-grid::before {
    animation: none !important;
  }
}


/* =========================================================
   V4.7 Footer Navigation + AAW Alignment
   DutyMate footer brand block removed by design.
   Bottom cinematic DutyMate wordmark intentionally untouched.
   ========================================================= */

body.cinematic-v4 .v47-footer-grid {
  width: min(1180px, calc(100% - 40px)) !important;
  margin: 26px auto 0 !important;
  padding: 30px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr) !important;
  gap: 30px !important;
  align-items: stretch !important;
}

body.cinematic-v4 .v47-footer-nav {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  align-content: center;
  padding: 4px 8px 4px 2px;
}

body.cinematic-v4 .v47-footer-nav .v3-footer-column {
  min-width: 0;
  padding: 0 !important;
}

body.cinematic-v4 .v47-footer-nav .v3-footer-column > strong {
  margin-bottom: 16px !important;
  color: #edf9ff !important;
  font-size: .68rem !important;
  letter-spacing: .12em !important;
}

body.cinematic-v4 .v47-footer-nav .footer-links {
  gap: 10px !important;
}

body.cinematic-v4 .v47-footer-nav .v3-footer-column a {
  color: #8caabd !important;
  font-size: .76rem !important;
  line-height: 1.35;
}

body.cinematic-v4 .v47-footer-nav .v3-footer-column a:hover {
  color: #f1fbff !important;
}

/* AAW becomes the right-side signature panel. */
body.cinematic-v4 .v47-company-panel {
  grid-column: auto !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 11px !important;
  border: 1px solid rgba(125,216,247,.12) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(92,223,229,.10), transparent 13rem),
    radial-gradient(circle at 16% 92%, rgba(88,124,255,.055), transparent 14rem),
    linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.015)) !important;
  box-shadow:
    0 20px 54px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
  overflow: hidden;
}

body.cinematic-v4 .v47-company-panel::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -74px;
  top: -78px;
  border-radius: 50%;
  border: 1px solid rgba(109,220,249,.10);
  box-shadow:
    0 0 0 26px rgba(109,220,249,.018),
    0 0 0 54px rgba(106,130,255,.012);
  pointer-events: none;
}

body.cinematic-v4 .v47-company-panel span {
  grid-column: 1 !important;
  grid-row: auto !important;
  align-self: auto !important;
  margin: 0 !important;
  color: #7698ad !important;
  font-size: .61rem !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
}

body.cinematic-v4 .v47-company-panel img {
  grid-column: 1 !important;
  grid-row: auto !important;
  width: min(285px, 88%) !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(175,229,250,.30) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(145deg, rgba(250,253,255,.98), rgba(225,243,252,.94)) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.16),
    0 0 26px rgba(83,190,235,.055),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  filter: saturate(1.05) contrast(1.05) !important;
}

body.cinematic-v4 .v47-company-panel small {
  grid-column: 1 !important;
  grid-row: auto !important;
  margin: 0 !important;
  max-width: 430px;
  color: #7f9fb4 !important;
  font-size: .66rem !important;
  line-height: 1.6 !important;
}

/* Tablet/mobile: keep navigation left, company branding right. */
@media (max-width: 900px) {
  body.cinematic-v4 .v47-footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .88fr) !important;
    gap: 20px !important;
    padding: 22px !important;
  }

  body.cinematic-v4 .v47-footer-nav {
    grid-template-columns: 1fr !important;
    gap: 23px !important;
    padding: 2px 0 !important;
  }

  body.cinematic-v4 .v47-company-panel {
    min-height: auto !important;
    padding: 18px !important;
  }

  body.cinematic-v4 .v47-company-panel img {
    width: min(230px, 100%) !important;
  }
}

/* Narrow phones: Product + Support remain a left rail, AAW stays right. */
@media (max-width: 560px) {
  body.cinematic-v4 .v47-footer-grid {
    width: min(100% - 20px, 1180px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(138px, .88fr) !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  body.cinematic-v4 .v47-footer-nav {
    gap: 18px !important;
  }

  body.cinematic-v4 .v47-footer-nav .v3-footer-column > strong {
    margin-bottom: 9px !important;
    font-size: .59rem !important;
  }

  body.cinematic-v4 .v47-footer-nav .footer-links {
    gap: 7px !important;
  }

  body.cinematic-v4 .v47-footer-nav .v3-footer-column a {
    font-size: .62rem !important;
  }

  body.cinematic-v4 .v47-company-panel {
    padding: 13px 11px !important;
    border-radius: 17px !important;
    gap: 8px !important;
    align-content: center !important;
  }

  body.cinematic-v4 .v47-company-panel span {
    font-size: .50rem !important;
    letter-spacing: .10em !important;
  }

  body.cinematic-v4 .v47-company-panel img {
    width: 100% !important;
    padding: 8px !important;
    border-radius: 11px !important;
  }

  body.cinematic-v4 .v47-company-panel small {
    font-size: .52rem !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 390px) {
  body.cinematic-v4 .v47-footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(122px, .82fr) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  body.cinematic-v4 .v47-footer-nav .v3-footer-column a {
    font-size: .58rem !important;
  }

  body.cinematic-v4 .v47-company-panel {
    padding: 11px 9px !important;
  }

  body.cinematic-v4 .v47-company-panel small {
    font-size: .48rem !important;
  }
}