:root {
  --p3-navy-950: #04111f;
  --p3-navy-900: #071a2d;
  --p3-navy-850: #0a2239;
  --p3-navy-800: #0d2a45;
  --p3-sky: #69d7ff;
  --p3-blue: #4d8dff;
  --p3-violet: #8b7cff;
  --p3-mint: #7ef4c9;
  --p3-white: #f7fbff;
  --p3-ink: #0d2032;
  --p3-muted: #687b8e;
  --p3-line: rgba(84, 122, 156, 0.16);
  --p3-card: rgba(255,255,255,.82);
  --p3-glass: rgba(255,255,255,.08);
  --p3-shadow: 0 32px 90px rgba(6, 23, 41, .18);
  --p3-shadow-dark: 0 38px 120px rgba(0, 0, 0, .32);
  --p3-radius-xl: 34px;
  --p3-radius-lg: 26px;
  --p3-radius-md: 20px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--p3-navy-950);
}

body.premium-3d {
  margin: 0;
  color: var(--p3-ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(77,141,255,.11), transparent 25rem),
    radial-gradient(circle at 92% 8%, rgba(126,244,201,.10), transparent 24rem),
    #f7fbff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

body.premium-3d::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: .38;
  background-image:
    linear-gradient(rgba(13,42,69,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,42,69,.035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.25) 60%, transparent 100%);
}

.p3-ambient {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}

.p3-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .34;
  will-change: transform;
}

.p3-orb.one {
  width: 26rem;
  height: 26rem;
  top: 3rem;
  right: -9rem;
  background: radial-gradient(circle, rgba(105,215,255,.66), rgba(77,141,255,.06) 66%, transparent 72%);
}

.p3-orb.two {
  width: 22rem;
  height: 22rem;
  top: 48vh;
  left: -10rem;
  background: radial-gradient(circle, rgba(139,124,255,.36), rgba(139,124,255,.04) 68%, transparent 74%);
}

.p3-orb.three {
  width: 19rem;
  height: 19rem;
  bottom: 4rem;
  right: 8vw;
  background: radial-gradient(circle, rgba(126,244,201,.34), rgba(126,244,201,.03) 68%, transparent 74%);
}

.site-header {
  position: fixed !important;
  top: 16px !important;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
}

.nav-wrap {
  width: min(1180px, calc(100% - 28px));
  min-height: 68px;
  margin: 0 auto;
  padding: 8px 10px 8px 18px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 22px !important;
  background: rgba(249,252,255,.72) !important;
  box-shadow: 0 18px 50px rgba(4,17,31,.12), inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  pointer-events: auto;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.site-header.p3-scrolled .nav-wrap {
  background: rgba(247,251,255,.90) !important;
  box-shadow: 0 16px 44px rgba(4,17,31,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

.brand {
  gap: 10px !important;
  font-weight: 800 !important;
  letter-spacing: -.025em;
}

.brand img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px;
  filter: drop-shadow(0 8px 14px rgba(7,26,45,.14));
}

.main-nav {
  gap: 4px !important;
}

.main-nav a {
  color: #17334d !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  padding: 10px 12px !important;
  border-radius: 12px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.main-nav a:hover {
  color: #071a2d !important;
  background: rgba(68,130,193,.08);
  transform: translateY(-1px);
}

.main-nav .nav-cta {
  color: white !important;
  padding-inline: 16px !important;
  background:
    linear-gradient(135deg, #0e7dde, #426cf7 55%, #7a5df7) !important;
  box-shadow: 0 10px 24px rgba(45,101,221,.28);
}

.dm-shell {
  width: min(1180px, calc(100% - 40px)) !important;
}

.dm-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: 142px 0 88px !important;
  display: grid;
  align-items: center;
  color: white !important;
  background:
    radial-gradient(circle at 72% 23%, rgba(105,215,255,.19), transparent 24rem),
    radial-gradient(circle at 87% 78%, rgba(126,244,201,.11), transparent 23rem),
    radial-gradient(circle at 10% 18%, rgba(139,124,255,.12), transparent 22rem),
    linear-gradient(145deg, #03101d 0%, #06192c 46%, #0b2844 100%) !important;
  overflow: hidden;
}

.dm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.8) 55%, transparent 98%);
}

.dm-hero::after {
  content: "";
  position: absolute;
  width: 58rem;
  height: 58rem;
  right: -24rem;
  top: -25rem;
  border-radius: 50%;
  border: 1px solid rgba(105,215,255,.18);
  box-shadow:
    0 0 0 4rem rgba(105,215,255,.025),
    0 0 0 9rem rgba(77,141,255,.025),
    0 0 0 15rem rgba(126,244,201,.018);
  pointer-events: none;
}

.dm-hero-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr) !important;
  gap: clamp(42px, 6vw, 88px) !important;
  align-items: center !important;
}

.dm-hero-grid > div:first-child {
  position: relative;
  z-index: 2;
}

.dm-hero-badge,
.dm-kicker {
  letter-spacing: .08em !important;
  text-transform: uppercase;
  font-weight: 800 !important;
}

.dm-hero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 14px !important;
  color: #dff7ff !important;
  border: 1px solid rgba(156,226,255,.22);
  background: rgba(255,255,255,.06) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

.dm-hero-badge span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  background: var(--p3-mint) !important;
  box-shadow: 0 0 0 7px rgba(126,244,201,.10), 0 0 18px rgba(126,244,201,.7);
}

.dm-hero h1 {
  max-width: 760px;
  margin: 24px 0 22px !important;
  font-size: clamp(3.3rem, 6.1vw, 6.6rem) !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  font-weight: 850 !important;
  text-wrap: balance;
}

.dm-hero h1::after {
  content: "";
  display: inline-block;
  width: .46em;
  height: .46em;
  margin-left: .12em;
  border-radius: .13em;
  background: linear-gradient(135deg, #6cdfff, #7ef4c9);
  box-shadow: 0 0 30px rgba(105,215,255,.34);
  transform: rotate(12deg) translateY(-.12em);
}

.dm-hero-lead {
  max-width: 680px !important;
  color: #bed0e2 !important;
  font-size: clamp(1.08rem, 1.5vw, 1.28rem) !important;
  line-height: 1.72 !important;
}

.dm-actions {
  gap: 12px !important;
  margin-top: 32px !important;
}

.dm-button {
  min-height: 54px;
  border-radius: 16px !important;
  font-weight: 800 !important;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

.dm-button:hover {
  transform: translateY(-3px);
}

.dm-button-primary {
  color: white !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(135deg, #1094e9 0%, #3f78ff 48%, #735df4 100%) !important;
  box-shadow: 0 18px 38px rgba(36,103,227,.34), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.dm-button-primary:hover {
  box-shadow: 0 24px 52px rgba(36,103,227,.42), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.dm-button-secondary {
  color: #e9f7ff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.055) !important;
  backdrop-filter: blur(12px);
}

.dm-trust {
  display: flex !important;
  flex-wrap: wrap;
  gap: 9px !important;
  margin-top: 28px !important;
}

.dm-trust span {
  padding: 8px 11px;
  color: #a9c4dc !important;
  font-size: .82rem;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
  border-radius: 999px;
}

.dm-device-wrap {
  position: relative;
  min-height: 650px;
  perspective: 1500px;
  display: grid;
  place-items: center;
}

.dm-device-wrap::before,
.dm-device-wrap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dm-device-wrap::before {
  width: 560px;
  height: 560px;
  border: 1px solid rgba(105,215,255,.18);
  background: radial-gradient(circle, rgba(105,215,255,.06), transparent 62%);
  box-shadow: 0 0 0 42px rgba(77,141,255,.022), 0 0 0 92px rgba(126,244,201,.018);
  transform: translate3d(6%, -2%, -120px);
}

.dm-device-wrap::after {
  width: 460px;
  height: 150px;
  bottom: 38px;
  background: radial-gradient(ellipse, rgba(0,0,0,.46), transparent 70%);
  filter: blur(14px);
  transform: rotate(-4deg);
}

.phone-card {
  position: relative;
  z-index: 2;
  width: min(430px, 100%);
  padding: 12px !important;
  border-radius: 42px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.055)) !important;
  box-shadow:
    0 58px 120px rgba(0,0,0,.46),
    0 14px 40px rgba(47,128,220,.20),
    inset 0 1px 0 rgba(255,255,255,.27) !important;
  backdrop-filter: blur(20px);
  transform-style: preserve-3d;
  transform: rotateY(-10deg) rotateX(5deg) translateZ(0);
  animation: p3Float 7s ease-in-out infinite;
  will-change: transform;
}

.phone-card::before,
.phone-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 24px;
  filter: blur(1px);
}

.phone-card::before {
  width: 160px;
  height: 92px;
  top: 13%;
  left: -84px;
  background: linear-gradient(145deg, rgba(126,244,201,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(126,244,201,.24);
  box-shadow: 0 22px 44px rgba(0,0,0,.15);
  transform: translateZ(-70px) rotate(-8deg);
}

.phone-card::after {
  width: 145px;
  height: 118px;
  right: -76px;
  bottom: 17%;
  background: linear-gradient(145deg, rgba(105,215,255,.18), rgba(139,124,255,.08));
  border: 1px solid rgba(105,215,255,.24);
  box-shadow: 0 22px 44px rgba(0,0,0,.16);
  transform: translateZ(-60px) rotate(8deg);
}

.dm-phone {
  border-radius: 31px !important;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(11,41,68,.08);
}

.dm-phone-bar {
  background: linear-gradient(135deg, #081d32, #0f3e64) !important;
}

.dm-today {
  background:
    radial-gradient(circle at 90% 12%, rgba(126,244,201,.18), transparent 30%),
    linear-gradient(135deg, #09223a, #0d456f) !important;
  border: 1px solid rgba(105,215,255,.12) !important;
  box-shadow: 0 18px 42px rgba(5,27,46,.18);
}

.dm-quick-card,
.dm-info-card {
  border-color: rgba(17,58,93,.10) !important;
  box-shadow: 0 10px 24px rgba(15,48,76,.05);
}

.dm-section {
  position: relative;
  padding: 116px 0 !important;
  overflow: hidden;
}

.dm-section-soft {
  background:
    radial-gradient(circle at 90% 20%, rgba(105,215,255,.10), transparent 20rem),
    radial-gradient(circle at 10% 86%, rgba(139,124,255,.08), transparent 22rem),
    linear-gradient(180deg, #f2f8fd 0%, #f8fbfe 100%) !important;
}

.dm-section-dark {
  color: white !important;
  background:
    radial-gradient(circle at 8% 6%, rgba(105,215,255,.12), transparent 22rem),
    radial-gradient(circle at 84% 96%, rgba(139,124,255,.13), transparent 28rem),
    linear-gradient(145deg, #03111f, #071c31 55%, #0a2945) !important;
}

.dm-section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .65;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 80%, transparent 100%);
}

.dm-heading {
  max-width: 780px !important;
  margin-bottom: 48px !important;
}

.dm-heading h2 {
  max-width: 820px;
  margin-top: 12px !important;
  font-size: clamp(2.45rem, 4.5vw, 4.65rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
  font-weight: 840 !important;
  text-wrap: balance;
}

.dm-heading p {
  max-width: 720px;
  color: var(--p3-muted) !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
}

.dm-section-dark .dm-heading p,
.dm-section-dark p {
  color: #b3c8da !important;
}

.dm-kicker {
  color: #247bb8 !important;
  font-size: .77rem !important;
}

.dm-section-dark .dm-kicker {
  color: #77dfff !important;
}

.dm-feature-grid,
.professional-grid,
.dm-settings-grid,
.dm-source-grid,
.dm-workspace-grid,
.dm-premium-grid {
  gap: 18px !important;
}

.dm-feature-card,
.dm-pro-card,
.dm-setting-card,
.dm-source,
.dm-step,
.dm-work-card,
.dm-plan,
.dm-free-plan,
.dm-app-frame,
.dm-pro-demo,
.dm-report-summary,
.dm-report-details,
.dm-download,
.dm-faq-grid details {
  position: relative;
  border: 1px solid rgba(39,81,118,.11) !important;
  border-radius: var(--p3-radius-lg) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 24px 68px rgba(6,31,54,.085), inset 0 1px 0 rgba(255,255,255,.94) !important;
  backdrop-filter: blur(18px);
}

.p3-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.p3-tilt:hover {
  border-color: rgba(49,135,210,.23) !important;
  box-shadow: 0 32px 80px rgba(6,31,54,.14), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.dm-feature-card,
.dm-setting-card,
.dm-source,
.dm-step,
.dm-pro-card {
  overflow: hidden;
}

.dm-feature-card::after,
.dm-setting-card::after,
.dm-source::after,
.dm-step::after,
.dm-pro-card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -90px;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105,215,255,.13), transparent 68%);
  pointer-events: none;
}

.dm-feature-icon,
.dm-copy-item-icon,
.dm-source-badge,
.dm-step-number {
  border: 1px solid rgba(61,137,205,.13) !important;
  background: linear-gradient(145deg, #eef8ff, #e5f2fb) !important;
  color: #176fb2 !important;
  box-shadow: inset 0 1px 0 white, 0 8px 18px rgba(49,111,165,.08);
}

.dm-section-dark .dm-pro-card {
  border-color: rgba(132,207,255,.12) !important;
  background: linear-gradient(155deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;
  box-shadow: 0 26px 76px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.dm-section-dark .dm-pro-card .dm-feature-icon {
  color: #9ceaff !important;
  border-color: rgba(126,222,255,.15) !important;
  background: rgba(105,215,255,.08) !important;
  box-shadow: none !important;
}

.dm-split {
  gap: clamp(44px, 7vw, 94px) !important;
  align-items: center !important;
}

.dm-app-frame {
  padding: 14px !important;
  perspective: 1400px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(232,245,255,.72)) !important;
  box-shadow: var(--p3-shadow) !important;
}

.dm-app-window {
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(11,44,73,.12);
  transform: rotateY(5deg) rotateX(1.5deg);
  transform-origin: center;
}

.dm-pro-demo {
  margin-top: 32px !important;
  padding: 20px !important;
  border-color: rgba(119,208,255,.12) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
  box-shadow: var(--p3-shadow-dark) !important;
}

.dm-roster-card,
.dm-glance-card {
  border-radius: 22px !important;
}

.dm-work-card {
  padding: clamp(26px, 4vw, 42px) !important;
}

.dm-work-card.dm-accent {
  color: white !important;
  border-color: rgba(105,215,255,.16) !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(126,244,201,.18), transparent 17rem),
    linear-gradient(145deg, #08243d, #0b4168) !important;
  box-shadow: 0 30px 84px rgba(4,24,43,.24) !important;
}

.dm-work-card.dm-accent .dm-card-label {
  color: #8deaff !important;
}

.dm-source {
  min-height: 150px;
}

.dm-template-strip {
  padding: 18px !important;
  border: 1px solid rgba(39,81,118,.10) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.64) !important;
  box-shadow: 0 16px 46px rgba(10,43,71,.06);
}

.dm-template-strip span {
  border-radius: 999px !important;
  background: rgba(232,244,253,.92) !important;
}

.dm-report-layout {
  gap: 18px !important;
}

.dm-report-summary,
.dm-report-details {
  padding: clamp(28px, 4vw, 42px) !important;
}

.dm-report-summary {
  color: white !important;
  border-color: rgba(105,215,255,.15) !important;
  background:
    radial-gradient(circle at 78% 9%, rgba(105,215,255,.16), transparent 17rem),
    linear-gradient(145deg, #061b30, #0a3d63) !important;
  box-shadow: 0 28px 84px rgba(5,32,55,.24) !important;
}

.dm-report-summary p,
.dm-report-summary small {
  color: #b8cede !important;
}

.dm-report-stat {
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 18px !important;
}

.dm-price-options {
  gap: 10px !important;
}

.dm-price-option {
  border: 1px solid rgba(34,79,117,.10) !important;
  border-radius: 18px !important;
  background: rgba(245,250,254,.9) !important;
}

.dm-plan {
  overflow: hidden;
  padding: 28px !important;
}

.dm-plan::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -120px;
  top: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105,215,255,.15), transparent 68%);
  pointer-events: none;
}

.dm-plan-complete {
  color: white !important;
  border-color: rgba(119,208,255,.18) !important;
  background:
    radial-gradient(circle at 85% 10%, rgba(126,244,201,.17), transparent 18rem),
    linear-gradient(145deg, #061a2e, #0a3658) !important;
  box-shadow: 0 34px 94px rgba(4,24,43,.26) !important;
}

.dm-plan-complete p,
.dm-plan-complete li,
.dm-plan-complete .dm-plan-restriction,
.dm-plan-complete .dm-price-option em {
  color: #bad0df !important;
}

.dm-plan-complete .dm-price-option {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.065) !important;
}

.dm-plan-complete .dm-price-option strong,
.dm-plan-complete .dm-price-option span,
.dm-plan-complete .dm-price-option small {
  color: white !important;
}

.dm-best-value {
  background: linear-gradient(135deg, #7ef4c9, #69d7ff) !important;
  color: #05223a !important;
  box-shadow: 0 12px 28px rgba(92,215,215,.22);
}

.dm-billing-note {
  border: 1px solid rgba(39,81,118,.10) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.68) !important;
  box-shadow: 0 18px 52px rgba(10,43,71,.06);
}

.dm-faq-grid details {
  overflow: hidden;
}

.dm-faq-grid summary {
  padding: 21px 24px !important;
  font-weight: 800 !important;
}

.dm-faq-grid details p {
  padding: 0 24px 22px !important;
  color: var(--p3-muted) !important;
}

.dm-download {
  align-items: center !important;
  padding: clamp(28px, 4vw, 44px) !important;
  color: white !important;
  border-color: rgba(105,215,255,.14) !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(126,244,201,.18), transparent 18rem),
    linear-gradient(145deg, #05192c, #0a3a60) !important;
  box-shadow: 0 32px 90px rgba(5,32,55,.25) !important;
}

.dm-download p {
  color: #b8cede !important;
}

.dm-download .dm-kicker {
  color: #8eeaff !important;
}

.site-footer {
  position: relative;
  background:
    radial-gradient(circle at 10% 10%, rgba(105,215,255,.10), transparent 20rem),
    linear-gradient(150deg, #03101d, #06192a) !important;
}

.footer-grid,
.footer-bottom {
  width: min(1180px, calc(100% - 40px)) !important;
}

.footer-brand p,
.footer-links a,
.footer-bottom,
.developer-mark span {
  color: #9bb5ca !important;
}

.footer-links a:hover,
.footer-bottom a:hover {
  color: #dff7ff !important;
}

.p3-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.985);
  transition:
    opacity .72s cubic-bezier(.2,.65,.2,1),
    transform .72s cubic-bezier(.2,.65,.2,1);
}

.p3-reveal.p3-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

.p3-reveal[data-delay="1"] { transition-delay: .08s; }
.p3-reveal[data-delay="2"] { transition-delay: .16s; }
.p3-reveal[data-delay="3"] { transition-delay: .24s; }

.p3-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #69d7ff, #4d8dff 52%, #7ef4c9);
  box-shadow: 0 0 18px rgba(105,215,255,.52);
  pointer-events: none;
}

.p3-floating-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  color: #dff7ff;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 17px;
  background: rgba(5,28,47,.58);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
  pointer-events: none;
  animation: p3ChipFloat 6s ease-in-out infinite;
}

.p3-floating-chip strong {
  display: block;
  font-size: .86rem;
}

.p3-floating-chip small {
  display: block;
  margin-top: 2px;
  color: #8fb3cb;
  font-size: .72rem;
}

.p3-floating-chip i {
  width: 12px;
  height: 12px;
  border-radius: 5px;
  background: linear-gradient(135deg, #69d7ff, #7ef4c9);
  box-shadow: 0 0 14px rgba(105,215,255,.55);
}

.p3-chip-a {
  left: -18px;
  top: 20%;
}

.p3-chip-b {
  right: -26px;
  top: 35%;
  animation-delay: -2s;
}

.p3-chip-c {
  left: 4%;
  bottom: 11%;
  animation-delay: -4s;
}

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

@keyframes p3ChipFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-8px,0); }
}

@media (max-width: 1080px) {
  .main-nav a:not(.nav-cta) {
    padding-inline: 8px !important;
    font-size: .85rem !important;
  }

  .dm-hero-grid {
    grid-template-columns: 1fr 430px !important;
    gap: 34px !important;
  }

  .dm-hero h1 {
    font-size: clamp(3rem, 6.3vw, 5rem) !important;
  }

  .dm-device-wrap {
    min-height: 590px;
  }
}

@media (max-width: 900px) {
  .site-header {
    top: 10px !important;
  }

  .nav-wrap {
    min-height: 60px;
    padding: 7px 9px 7px 14px !important;
    border-radius: 18px !important;
  }

  .menu-button {
    display: grid !important;
    border: 1px solid rgba(40,83,119,.11) !important;
    border-radius: 12px !important;
    background: rgba(234,244,252,.8) !important;
  }

  .main-nav {
    position: absolute !important;
    top: calc(100% + 9px) !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 18px !important;
    background: rgba(247,251,255,.95) !important;
    box-shadow: 0 20px 54px rgba(4,17,31,.18) !important;
    backdrop-filter: blur(22px);
  }

  .main-nav.open {
    display: grid !important;
  }

  .main-nav a {
    width: 100%;
    padding: 12px 14px !important;
  }

  .dm-hero {
    min-height: auto;
    padding-top: 126px !important;
  }

  .dm-hero-grid {
    grid-template-columns: 1fr !important;
  }

  .dm-hero-grid > div:first-child {
    text-align: center;
  }

  .dm-hero-lead {
    margin-inline: auto;
  }

  .dm-actions,
  .dm-trust {
    justify-content: center !important;
  }

  .dm-device-wrap {
    min-height: 590px;
    margin-top: 14px;
  }

  .phone-card {
    transform: none;
    animation: none;
  }

  .dm-device-wrap::before {
    width: min(560px, 92vw);
    height: min(560px, 92vw);
  }

  .p3-floating-chip {
    display: none;
  }

  .dm-app-window {
    transform: none;
  }
}

@media (max-width: 640px) {
  .dm-shell,
  .footer-grid,
  .footer-bottom {
    width: min(100% - 24px, 1180px) !important;
  }

  .dm-hero {
    padding: 112px 0 58px !important;
  }

  .dm-hero h1 {
    margin-top: 18px !important;
    font-size: clamp(2.75rem, 15vw, 4.2rem) !important;
  }

  .dm-hero h1::after {
    width: .38em;
    height: .38em;
  }

  .dm-hero-lead {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .dm-actions {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .dm-button {
    width: 100%;
    justify-content: center;
  }

  .dm-trust {
    gap: 7px !important;
  }

  .dm-trust span {
    font-size: .75rem;
  }

  .dm-device-wrap {
    min-height: auto;
    padding: 34px 0 22px;
  }

  .phone-card {
    width: 100%;
    padding: 8px !important;
    border-radius: 30px !important;
  }

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

  .dm-phone {
    border-radius: 24px !important;
  }

  .dm-section {
    padding: 82px 0 !important;
  }

  .dm-heading {
    margin-bottom: 34px !important;
  }

  .dm-heading h2 {
    font-size: clamp(2.15rem, 12vw, 3.45rem) !important;
  }

  .dm-heading p {
    font-size: .98rem !important;
  }

  .dm-feature-card,
  .dm-pro-card,
  .dm-setting-card,
  .dm-source,
  .dm-step,
  .dm-work-card,
  .dm-plan,
  .dm-free-plan,
  .dm-report-summary,
  .dm-report-details,
  .dm-download,
  .dm-faq-grid details {
    border-radius: 22px !important;
  }

  .dm-plan {
    padding: 22px !important;
  }

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

@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;
  }

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