:root { --motion-x: 50%; --motion-y: 20%; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(620px circle at var(--motion-x) var(--motion-y), rgba(112, 108, 184, .18), transparent 62%),
    linear-gradient(180deg, rgba(6, 22, 43, .04), rgba(6, 22, 43, .24));
  transition: background .15s linear;
}

.conference-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #66639a, #cbd5ff, #fff);
  box-shadow: 0 0 14px rgba(203, 213, 255, .75);
  pointer-events: none;
}

header {
  position: sticky;
  top: 0;
  z-index: 20;
  transition: padding .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

header.motion-scrolled {
  padding-top: 15px;
  padding-bottom: 15px;
  background: rgba(6, 22, 43, .72);
  border-bottom: 1px solid rgba(203, 213, 255, .14);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

main::before {
  content: "";
  position: absolute;
  width: min(58vw, 720px);
  aspect-ratio: 1;
  top: -22%;
  right: -24%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 99, 154, .3), rgba(57, 55, 111, .08) 43%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  animation: conferenceHeroDrift 16s ease-in-out infinite alternate;
}

.hero-text { position: relative; }
.hero-text::after {
  content: "";
  position: absolute;
  inset: -34px -42px;
  z-index: -1;
  border-radius: 34px;
  background: radial-gradient(circle at 25% 20%, rgba(102, 99, 154, .14), transparent 68%);
  filter: blur(16px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 0 26px rgba(102, 99, 154, .2), inset 0 1px rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5ff;
  box-shadow: 0 0 0 0 rgba(203, 213, 255, .7);
  animation: conferencePulse 1.8s ease-out infinite;
}

.phone {
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .32));
}
.phone-wrap:hover .phone {
  transform: translateY(-8px) rotateY(-4deg) rotateX(2deg);
  filter: drop-shadow(0 42px 58px rgba(0, 0, 0, .42));
}

.feature-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-backdrop-filter: blur(16px) saturate(1.14);
  backdrop-filter: blur(16px) saturate(1.14);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 18px 45px rgba(0, 0, 0, .12);
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(260px circle at var(--card-x, 50%) var(--card-y, 50%), rgba(203, 213, 255, .2), transparent 68%);
  transition: opacity .25s ease;
  pointer-events: none;
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover {
  transform: translateY(-7px) scale(1.012);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 24px 55px rgba(0, 0, 0, .22), 0 0 0 1px rgba(203, 213, 255, .08);
}
.feature-icon { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease; }
.feature-card:hover .feature-icon { transform: translateY(-2px) rotate(-3deg) scale(1.07); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }

.btn-download { background-size: 180% 180%; animation: conferenceShimmer 6s ease-in-out infinite; }

.motion-reveal {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition: opacity .62s ease, transform .62s cubic-bezier(.16, 1, .3, 1) !important;
}
.motion-reveal.motion-in { opacity: 1 !important; transform: none !important; }

@keyframes conferenceHeroDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-45px, 28px, 0) scale(1.1); }
}
@keyframes conferencePulse {
  0% { box-shadow: 0 0 0 0 rgba(203, 213, 255, .65); }
  70% { box-shadow: 0 0 0 11px rgba(203, 213, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(203, 213, 255, 0); }
}
@keyframes conferenceShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 640px) {
  header.motion-scrolled { padding-top: 10px; padding-bottom: 10px; }
  main::before { width: 520px; right: -330px; top: -80px; }
  .phone-wrap:hover .phone { transform: none; }
}

/* Touch-first layout: iOS Safari, Android Chrome/Firefox and embedded browsers. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html { scroll-padding-top: 72px; }
  body { min-height: var(--conference-vh, 100svh); }
  body::before {
    --motion-x: 72%;
    --motion-y: 12%;
    background:
      radial-gradient(420px circle at var(--motion-x) var(--motion-y), rgba(112, 108, 184, .16), transparent 66%),
      linear-gradient(180deg, rgba(6, 22, 43, .03), rgba(6, 22, 43, .2));
  }
  header {
    width: 100%;
    padding-top: max(12px, env(safe-area-inset-top));
    transform: translateZ(0);
  }
  header.motion-scrolled {
    padding-top: max(9px, env(safe-area-inset-top));
    background: rgba(6, 22, 43, .86);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
  }
  main {
    min-height: auto;
    padding-top: clamp(26px, 7vw, 42px);
    overflow: clip;
  }
  main::before {
    width: 430px;
    right: -290px;
    top: -60px;
    filter: blur(18px);
    opacity: .85;
    animation-duration: 20s;
  }
  .hero-text::after { inset: -20px -12px; filter: blur(22px); }
  .hero-text h1 { text-wrap: balance; }
  .subtitle { max-width: 36rem; }
  .cta-row { width: 100%; }
  .btn-download,
  nav a,
  nav button,
  .modal-close,
  .phone-gate-close {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }
  .btn-download { min-height: 56px; transform: none !important; }
  .phone-wrap { perspective: none; }
  .phone { transform: none !important; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .3)); }
  .features { padding-bottom: max(72px, calc(52px + env(safe-area-inset-bottom))); }
  .features-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .feature-card {
    min-width: 0;
    padding: 22px;
    transform: none;
    -webkit-backdrop-filter: blur(11px) saturate(1.08);
    backdrop-filter: blur(11px) saturate(1.08);
  }
  .feature-card::before { display: none; }
  .feature-card:hover { transform: none; }
  .feature-card:active { border-color: rgba(203, 213, 255, .42); background: rgba(255, 255, 255, .095); }
  .feature-card:hover .feature-icon { transform: none; }
  .modal-overlay,
  .phone-gate {
    min-height: var(--conference-vh, 100dvh);
    overscroll-behavior: contain;
  }
  .modal-box,
  .phone-gate-card {
    max-height: calc(var(--conference-vh, 100dvh) - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
    overscroll-behavior: contain;
  }
  .phone-input { font-size: 16px; }
  footer { padding-bottom: max(36px, calc(20px + env(safe-area-inset-bottom))); }
  .motion-reveal { transform: translateY(14px) !important; transition-duration: .48s !important; }
  .motion-reveal.motion-in { transform: none !important; }
}

@media (max-width: 390px) {
  .eyebrow { padding-inline: 11px; font-size: .72rem; letter-spacing: 1px; }
  .hero-text h1 { font-size: clamp(1.92rem, 9.6vw, 2.35rem); }
  .subtitle { font-size: .95rem; line-height: 1.58; }
  .feature-card { padding: 19px; border-radius: 16px; }
  .phone { width: 202px; height: 404px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  header { position: relative; }
  main { padding-top: 22px; }
  .phone-wrap { display: none; }
  .modal-overlay, .phone-gate { align-items: flex-start; overflow-y: auto; }
}

body.mobile-keyboard-open header { position: absolute; }
body.mobile-keyboard-open .phone-gate { align-items: flex-start; overflow-y: auto; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.motion-scrolled { background: rgba(6, 22, 43, .97); }
  .feature-card { background: rgba(18, 48, 84, .96); }
  .modal-overlay, .phone-gate { background: rgba(2, 8, 22, .94); }
}

@media (prefers-reduced-data: reduce) {
  body::before, main::before { display: none; }
  .blob { filter: blur(55px); opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-reveal { opacity: 1 !important; transform: none !important; }
  main::before, .eyebrow::before, .btn-download { animation: none !important; }
  .phone, .feature-card, .feature-icon { transition: none !important; }
}