@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
  --bg-dark: #1a1a1a;
  --bg-sec: #202020;
  --bg-card: #373737;
  --bg-card-b: #454545;
  --bg-inset: #4b4b4b;
  --bg-light: #f9f9f9;
  --white: #fff;
  --gray: #b7b7b7;
  --dark: #3c3c3c;
  --muted: #242526;
  --gold: #767DFB;
  --serif: 'Petrona', serif;
  --sans: 'Inter', sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --mw: 1600px;
  --px: 76px;
}

html { scroll-behavior: smooth }
body { font-family: var(--sans); background: var(--bg-dark); color: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased }
a { text-decoration: none; color: inherit }
img { display: block; max-width: 100% }

/* ── Container ── */
.wrap { max-width: var(--mw); margin: 0 auto; width: 100%; padding-left: var(--px); padding-right: var(--px) }

/* ── Animations ── */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease) }
.rv.v { opacity: 1; transform: translateY(0) }
.rv.d1 { transition-delay: .1s }
.rv.d2 { transition-delay: .2s }
.rv.d3 { transition-delay: .3s }
.rv.d4 { transition-delay: .4s }
@keyframes fadeUp { from { opacity:0; transform:translateY(26px) } to { opacity:1; transform:translateY(0) } }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.45; transform:scale(1.5) } }

/* ══════════════════════════════════
   NAV
   ══════════════════════════════════ */
.nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: var(--mw); z-index: 100; background: rgba(0,0,0,.10); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 12px }
.nav.scrolled { background: rgba(0,0,0,.10); backdrop-filter: blur(5px) }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px }
.nav-logo img { height: 28px; width: auto }
.nav-links { display: flex; align-items: center; gap: 36px }
.nav-links a { font-size: 13px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; transition: opacity .3s }
.nav-links a:hover { opacity: .6 }
.btn-nav { padding: 10px 22px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 8px; font-size: 13px; font-weight: 500; background: none; color: var(--white); cursor: pointer; font-family: var(--sans); transition: all .3s }
.btn-nav:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6) }

/* ══════════════════════════════════
   HERO (Sections 1 + 2 combined)
   1800px tall with background image.
   Contains: headline, hero iPad (sticky),
   then features (title + tabs + iPad)
   ══════════════════════════════════ */
.hero {
  position: relative;
  min-height: 1800px;
  background: var(--bg-dark);
}
.hero-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: url('../images/hero-bg.png') center bottom / cover no-repeat;
  z-index: 0;
}
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #1a1a1a 0%,
    rgba(26,26,26,.55) 25%,
    rgba(26,26,26,.05) 45%,
    transparent 55%,
    rgba(32,32,32,.45) 80%,
    #202020 100%
  );
}

/* Hero top — headline + CTA */
.hero-top {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding-top: 130px;
}
.hero-title {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 64px; line-height: 1.05; letter-spacing: -.64px;
  margin-bottom: 16px;
  animation: fadeUp .9s var(--ease) .2s both;
}
.hero-sub {
  font-size: 16px; color: var(--gray); line-height: 1.6;
  max-width: 420px; margin-bottom: 28px;
  animation: fadeUp .9s var(--ease) .35s both;
}
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 48px; border-radius: 114px;
  background: linear-gradient(111deg, #767DFB 29%, #858BF6 92%);
  color: var(--muted); font-family: var(--sans);
  font-weight: 700; font-size: 18px; letter-spacing: -.18px;
  border: none; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(118,125,251,.3) }
.hero-top .btn-gold { animation: fadeUp .9s var(--ease) .5s both }

/* ── Hero iPad (sticky) ──
   Sits inside a tall scroll container.
   Stays stuck at ~18vh from top while user scrolls.
   Fades out as features section enters viewport. */
.hero-ipad-area {
  position: relative; z-index: 2;
  /* This height = scroll distance the iPad stays visible */
  height: 800px;
}
.hero-ipad-sticky {
  position: sticky; top: 18vh;
  display: flex; justify-content: center;
  padding-top: 48px;
}
.hero-ipad-sticky .ipad-frame {
  width: 540px;
}
.ipad-frame {
  border-radius: 0; overflow: hidden;
  box-shadow: none;
  background: transparent;
  transition: opacity .6s var(--ease);
}
.ipad-frame img { display: block; width: 100%; height: auto }

/* ── Features section ── */
.features-area {
  position: relative; z-index: 2;
  padding-bottom: 80px;
}
.feat-header {
  padding: 60px 0 16px;
}
.feat-header h2 {
  font-family: var(--serif);
  font-size: 48px; font-weight: 300; font-style: italic;
  line-height: 1.25; letter-spacing: -.4px;
  max-width: 360px;
}
.feat-panel {
  display: flex; gap: 60px; align-items: flex-start;
}
.feat-menu {
  flex: 0 0 280px;
  position: sticky; top: 30vh;
  display: flex; flex-direction: column; gap: 6px;
}
.feat-tab { cursor: pointer; padding: 10px 0 }
.feat-tab-title {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .25px; color: var(--white); opacity: 1;
  transition: opacity .35s, color .35s;
}
.feat-tab.active .feat-tab-title { opacity: 1; color: var(--gold) }
.feat-tab-desc {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 14px; line-height: 1.55; color: #ffffff;
  transition: max-height .5s var(--ease), opacity .35s, margin-top .35s;
  margin-top: 0;
}
.feat-tab.active .feat-tab-desc { max-height: 120px; opacity: 1; margin-top: 10px }

.feat-display {
  flex: 1;
  display: flex;
  justify-content: center;
}
.feat-display .ipad-frame {
  width: 540px;
}
.feat-screens { position: relative }
.feat-screen {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.feat-screen:first-child { position: relative }
.feat-screen.active { opacity: 1; z-index: 1; pointer-events: auto }

/* ══════════════════════════════════
   PERSONALIZATION — Section 3
   4 animated cards with lava bg, title sticky left
   ══════════════════════════════════ */
.personalization { background: var(--bg-sec); padding: 88px 0 }
.person-layout {
  display: flex; gap: 42px; align-items: flex-start;
}
.person-title {
  font-family: var(--serif); font-size: 48px; font-weight: 300; font-style: italic;
  line-height: 48px; letter-spacing: -.4px;
  flex: 0 0 336px;
  position: sticky; top: 30vh;
}
.person-cards {
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}

/* ── Card shell ── */
.pcard {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  padding: 36px;
  display: flex; gap: 24px;
  min-height: 280px;
  background: #1a1a1a;
}
.pcard-lava {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 70%, rgba(60,60,60,.5) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, rgba(50,50,50,.4) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: lavaMove 12s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes lavaMove {
  0% { background-position: 0% 0% }
  25% { background-position: 100% 50% }
  50% { background-position: 50% 100% }
  75% { background-position: 0% 50% }
  100% { background-position: 100% 0% }
}
.pcard-lava.d2 { animation-delay: -3s; animation-duration: 14s }
.pcard-lava.d3 { animation-delay: -6s; animation-duration: 10s }
.pcard-lava.d4 { animation-delay: -9s; animation-duration: 16s }

.pcard-content {
  position: relative; z-index: 1;
  flex: 0 0 45%; display: flex; flex-direction: column; gap: 8px;
}
.pcard-title {
  font-family: var(--serif); font-size: 28px; font-weight: 300; font-style: italic;
  line-height: 1.2; letter-spacing: -.3px;
}
.pcard-desc {
  font-size: 14px; line-height: 1.6; color: var(--gray);
}
.pcard-visual {
  position: relative; z-index: 1;
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ── Card 1: Usage Patterns — monitor blocks with chart lines ── */
.pcard:first-child { overflow: hidden }
.pcard:first-child .pcard-visual {
  display: flex; align-items: center; justify-content: center;
}
.pcard-monitors {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
}
.pcard-monitor {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(75, 75, 75, 0.43);
  border-radius: 4px;
  padding: 10px 16px 10px 10px;
  opacity: 0;
  transform: translateY(8px);
}
/* Animations only trigger when .animate is added by IntersectionObserver */
.pcard-monitors.animate .pcard-monitor:nth-child(1) { animation: monitorIn .6s ease .2s forwards }
.pcard-monitors.animate .pcard-monitor:nth-child(2) { animation: monitorIn50 .6s ease .9s forwards }
.pcard-monitors.animate .pcard-monitor:nth-child(3) { animation: monitorIn30 .6s ease 1.6s forwards }
@keyframes monitorIn { to { opacity: 1; transform: translateY(0) } }
@keyframes monitorIn50 { to { opacity: .5; transform: translateY(0) } }
@keyframes monitorIn30 { to { opacity: .3; transform: translateY(0) } }
.pcard-monitor-label {
  font-size: 14px; font-weight: 400; color: #fffdfa;
  flex-shrink: 0;
}
.pcard-chart {
  width: 96px; height: 24px; flex-shrink: 0;
  overflow: visible;
}
.pcard-chart-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
.pcard-monitors.animate .pcard-monitor:nth-child(1) .pcard-chart-line { animation: drawLine 1.8s ease .4s forwards }
.pcard-monitors.animate .pcard-monitor:nth-child(2) .pcard-chart-line { animation: drawLine 1.8s ease 1.1s forwards }
.pcard-monitors.animate .pcard-monitor:nth-child(3) .pcard-chart-line { animation: drawLine 1.8s ease 1.8s forwards }
@keyframes drawLine { to { stroke-dashoffset: 0 } }
.pcard-chart-dot { opacity: 0 }
.pcard-monitors.animate .pcard-monitor:nth-child(1) .pcard-chart-dot { animation: dotAppear .3s ease 2s forwards }
.pcard-monitors.animate .pcard-monitor:nth-child(2) .pcard-chart-dot { animation: dotAppear .3s ease 2.7s forwards }
.pcard-monitors.animate .pcard-monitor:nth-child(3) .pcard-chart-dot { animation: dotAppear .3s ease 3.4s forwards }
@keyframes dotAppear { to { opacity: 1 } }

/* ── Card 2: Travel Style — profile card ── */
.pcard-profile {
  background: var(--muted);
  border-radius: 4px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  width: 180px; height: 110px;
  flex-shrink: 0;
}
.pcard-profile-label {
  font-size: 12px; font-weight: 400; color: #fff;
  letter-spacing: .5px;
}
.pcard-profile-value {
  font-size: 24px; font-weight: 400; color: #fff;
  line-height: 24px;
  min-height: 24px;
}
.pcard-profile-sub {
  font-size: 12px; line-height: 20px; color: #ccc;
}

/* ── Card 3: Water Usage — animated bars ── */
.pcard-bars {
  display: flex; gap: 16px; align-items: flex-end; height: 180px;
  padding: 0;
  width: 100%;
}
.pcard-bar-group {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1;
}
.pcard-bar-label { font-size: 12px; color: var(--gray); order: -1 }
.pcard-bar-wrap {
  width: 100%; height: 140px;
  background: #111; border-radius: 4px;
  display: flex; align-items: flex-end;
  overflow: hidden; position: relative;
}
.pcard-bar-fill {
  width: 100%; border-radius: 4px;
  transition: height 1.5s ease, background-color 1s ease;
}
.pcard-bar-pct {
  font-size: 12px; font-weight: 600; color: var(--white);
  margin-top: 4px;
}

/* ── Card 4: Battery Drain — animated stats ── */
.pcard-battery {
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 220px;
}
.pcard-batt-header {
  display: flex; align-items: center; gap: 10px;
}
.pcard-batt-icon {
  width: 36px; height: 36px; background: #444; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pcard-batt-icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.5 }
.pcard-batt-name { font-size: 14px; font-weight: 600 }
.pcard-batt-sub { font-size: 11px; color: var(--gray) }
.pcard-batt-tag {
  font-size: 10px; padding: 2px 8px; border-radius: 10px;
  border: 1px solid #4ade80; color: #4ade80; margin-left: auto;
}
.pcard-batt-pct { font-size: 40px; font-weight: 300; line-height: 1 }
.pcard-batt-stats { display: flex; gap: 12px; font-size: 11px; color: var(--gray) }
.pcard-batt-stat-val { font-size: 13px; font-weight: 500; color: var(--white) }

/* ══════════════════════════════════
   ALERTS — Section 4
   ══════════════════════════════════ */
.alerts { background: var(--bg-sec); padding: 0; position: relative; overflow: hidden }
.alerts .wrap { display: flex; min-height: 800px; position: relative; gap: 40px }
.alerts-left { flex: 0 0 352px; padding: 200px 0 80px 0; position: relative; z-index: 3 }
.alerts-title {
  font-family: var(--serif);
  font-size: 48px; font-weight: 300; font-style: italic;
  line-height: 1.25; letter-spacing: -.4px;
  max-width: 352px; margin-bottom: 42px;
}
.alert-menu { display: flex; flex-direction: column; gap: 6px }
.alert-tab { cursor: pointer; padding: 10px 0 }
.alert-tab-title {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .25px; color: var(--white); opacity: 1;
  transition: opacity .35s, color .35s;
}
.alert-tab.active .alert-tab-title { opacity: 1; color: var(--gold) }
.alert-tab-desc {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 14px; line-height: 1.55; color: var(--gray);
  transition: max-height .5s var(--ease), opacity .35s, margin-top .35s;
  margin-top: 0;
}
.alert-tab.active .alert-tab-desc { max-height: 100px; opacity: 1; margin-top: 10px }

.alerts-right {
  flex: 1; position: relative;
  border-radius: 16px; overflow: hidden;
  min-height: 617px; margin: 87px 0 80px;
}
.alert-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }

/* Alert notification cards — centered in the image area */
.alert-cards {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 0;
  z-index: 2; width: 480px;
}
.alert-card {
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.alert-card.visible { opacity: 1; transform: translateY(0) }
.alert-card.faded { opacity: .3 }
.alert-card img { width: 100%; display: block }

/* ══════════════════════════════════
   PRICING — Section 5
   ══════════════════════════════════ */
.pricing { background: var(--bg-sec); padding: 88px 0 }
.pricing-title {
  font-family: var(--serif); font-size: 48px; font-weight: 300; font-style: italic;
  line-height: 1.2; letter-spacing: -.4px; margin-bottom: 8px;
}
.pricing-sub { font-size: 24px; font-weight: 400; line-height: 1.65; letter-spacing: -.24px; margin-bottom: 42px }
.switcher { display: flex; justify-content: center; margin-bottom: 16px }
.switcher-pill { display: flex; padding: 16px; background: var(--bg-inset); border-radius: 76px }
.sw-btn {
  padding: 12px 24px; border-radius: 32px;
  font-size: 16px; font-weight: 400; letter-spacing: -.16px;
  border: none; cursor: pointer; background: transparent;
  color: var(--white); font-family: var(--sans);
  transition: all .35s var(--ease);
}
.sw-btn.active { background: linear-gradient(109deg, #fff 29%, #ececec 92%); color: var(--muted) }
.pricing-panel { display: none }
.pricing-panel.active { display: block; animation: panelIn .4s var(--ease) }
@keyframes panelIn { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }

.pkg-card {
  background: radial-gradient(147.48% 93.47% at 81.03% 79.26%, #3B3B3B 0%, #020202 100%);
  border: none; border-radius: 16px; padding: 48px;
}
.pkg-row { display: flex; gap: 32px; margin-bottom: 32px }
.pkg-col { flex: 1 }
.pkg-name { font-size: 32px; font-weight: 700; margin-bottom: 10px }
.pkg-price { font-size: 24px; font-weight: 300; margin-bottom: 16px }
.pkg-desc { font-size: 20px; line-height: 1.4; color: var(--gray); margin-bottom: 28px }
.pkg-features { list-style: disc; padding-left: 21px; font-size: 14px; line-height: 1.6 }
.pkg-features li { margin-bottom: 3px }

/* Button — inline/hug content, not full width */
.btn-gold-sm {
  display: inline-flex; width: fit-content; padding: 16px 32px; border-radius: 32px;
  background: var(--gold); color: var(--muted);
  font-family: var(--sans); font-size: 16px; font-weight: 400;
  letter-spacing: -.16px; border: none; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.btn-gold-sm:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(118,125,251,.3) }

.act-card { background: var(--bg-inset); border: 1px solid var(--bg-card-b); border-radius: 16px; padding: 24px }
.act-name { font-size: 20px; font-weight: 700; margin-bottom: 4px }
.act-price { font-size: 20px; font-weight: 300; margin-bottom: 16px }
.act-features { list-style: disc; padding-left: 21px; font-size: 14px; line-height: 1.6 }

.client-row { display: flex; gap: 42px }
.client-card {
  flex: 1; background: var(--bg-card); border: 1px solid var(--bg-card-b);
  border-radius: 16px; padding: 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.client-card .pkg-name { margin-bottom: 0 }
.client-card .pkg-price { margin-bottom: 0 }
.client-card .pkg-desc { margin-bottom: 0 }
.client-title-group { display: flex; flex-direction: column; gap: 10px }
.client-feats { margin-top: 0 }
.client-feats ul { list-style: disc; padding-left: 21px; font-size: 14px; line-height: 1.6 }
.client-feats ul li { margin-bottom: 3px }
.client-feats p { font-size: 14px; margin-bottom: 4px }

/* ══════════════════════════════════
   FAQ — Section 6
   ══════════════════════════════════ */
.faq { background: var(--bg-light); color: var(--dark); padding: 70px 0 }
.faq .wrap { display: flex; gap: 24px; align-items: flex-start }
.faq-left { flex: 0 0 352px; padding: 0 10px }
.faq-title { font-family: var(--serif); font-size: 48px; font-weight: 300; font-style: italic; line-height: 1.2; letter-spacing: -.4px; margin-bottom: 16px }
.faq-sub { font-size: 18px; line-height: 1.5; letter-spacing: -.18px }
.faq-list { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 0 24px }
.faq-item { background: #fdfdfd; border: 2px solid #f1f1f1; border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .3s }
.faq-item:hover { border-color: #e0e0e0 }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: 32px; gap: 32px }
.faq-q-text { font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: -.16px; color: #000 }
.faq-chevron { width: 24px; height: 24px; flex-shrink: 0; transition: transform .35s var(--ease) }
.faq-item.open .faq-chevron { transform: rotate(180deg) }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease), padding .5s var(--ease); padding: 0 32px }
.faq-item.open .faq-a { max-height: 500px; padding: 0 32px 32px }
.faq-a p { font-size: 16px; line-height: 1.5; letter-spacing: -.16px; color: #000 }

/* ══════════════════════════════════
   CTA — Section 7
   ══════════════════════════════════ */
.cta-section { background: var(--bg-light); padding: 70px 0; text-align: center }
.cta-title { font-family: var(--serif); font-size: 40px; font-weight: 300; font-style: italic; line-height: 1.2; letter-spacing: -.4px; color: var(--dark); margin-bottom: 16px }

/* ══════════════════════════════════
   FOOTER
   ══════════════════════════════════ */
.footer {
  background: none;
  border-radius: 0;
  padding: 32px 76px;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  max-width: var(--mw); margin: 0 auto;
}
.footer-waitlist {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.89);
  padding: 8px 8px 8px 16px; border-radius: 8px;
  box-shadow: 0 4px 6.2px rgba(0,0,0,.25);
  color: #2b2b2b; font-size: 12px; letter-spacing: .12px;
  cursor: pointer; transition: transform .3s;
}
.footer-waitlist:hover { transform: translateY(-2px) }
.waitlist-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: pulse 2s ease-in-out infinite }
.footer-waitlist svg { width: 16px; height: 16px }
.footer-mark img { height: 65px; width: auto }
.footer-bottom {
  width: 100%; border-top: 1px solid #525252; padding-top: 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-copy { font-size: 16px; letter-spacing: -.16px }
.footer-left { display: flex; align-items: center; gap: 16px }
.footer-legal { display: flex; gap: 16px; font-size: 14px }
.footer-legal a { color: rgba(255,255,255,.4); transition: color .3s }
.footer-legal a:hover { color: rgba(255,255,255,.7) }
.footer-social { display: flex }
.footer-social svg { width: 20px; height: 20px; fill: var(--white); transition: opacity .3s }
.footer-social:hover svg { opacity: .6 }

/* ══════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════ */
@media (max-width: 1280px) {
  :root { --px: 40px }
}
@media (max-width: 1024px) {
  .hero-title { font-size: 48px }
  .hero-ipad-sticky .ipad-frame { width: 420px }
  .feat-panel { flex-direction: column; gap: 16px }
  .feat-menu { position: static }
  .feat-display .ipad-frame { width: 100% }
  .person-layout { flex-direction: column; gap: 32px }
  .person-title { position: static; flex: none }
  .person-cards { grid-template-columns: 1fr 1fr }
  .alerts .wrap { flex-direction: column; min-height: auto }
  .alerts-left { width: 100%; padding: 80px 0 40px; flex: none }
  .alerts-right { min-height: 420px; margin: 0 0 40px }
  .pkg-row { flex-direction: column }
  .client-row { flex-direction: column }
  .faq .wrap { flex-direction: column }
  .faq-left { flex: none }
}
@media (max-width: 768px) {
  :root { --px: 20px }
  .nav-links a:not(.btn-nav) { display: none }
  .hero-title { font-size: 48px; margin: 0 24px 12px 24px; }
  .hero-sub { font-size: 14px; max-width: 300px }
  .hero-top { padding-top: 110px }
  .hero-ipad-sticky .ipad-frame { width: 300px }
  .ipad-frame { border-radius: 0 }
  .btn-gold { padding: 14px 36px; font-size: 16px }
  .person-cards { grid-template-columns: 1fr; gap: 16px }
  .person-title { font-size: 36px }
  .pcard { flex-direction: column; min-height: auto; padding: 24px; gap: 20px }
  .pcard-content { flex: none }
  .pcard-visual { width: 100% }
  .pcard-battery { width: 100% }
  .pcard-bars { height: 120px }
  .pcard-profile { width:100% }
  .pcard-bar-wrap { height: 90px }
  .feat-header h2, .pricing-title, .alerts-title, .faq-title, .cta-title { font-size: 44px }
  .pricing-sub { font-size: 18px }
  .alert-cards { width: 280px }
  .hero-ipad-area { height: 500px }
  .footer { padding: 32px 24px }
}