/* =========================================================
   Praxis — Software legal para estudios
   Paleta cian legal + IBM Plex, sobre Bulma
   ========================================================= */
:root{
  --cyan:    #00A8CC;
  --cyan-d:  #0088a8;
  --ink:     #1A2A3A;
  --ink-2:   #0E1B27;
  --paper:   #F7F9FC;
  --muted:   #5A6B78;
  --muted-2: #829099;
  --muted-3: #94A6B5;
  --line:    #E7EDF3;
  --line-2:  #EEF2F6;
  --line-3:  #D8E0E8;
  --orange:  #E56B2E;  --orange-bg:#FCEEE6; --orange-bd:#F3C9B0;
  --green:   #12996B;  --green-bg: #DCF2E8;
  --info-bg: #E1F5FA;  --info-bd:  #BEE9F2;
  --yellow:  #C98A00;  --yellow-bg:#FBF1D6;
  --purple:  #8358B8;  --purple-bg:#EEE7F6;
  --radius:  16px;
  --shadow:  0 30px 70px rgba(26,42,58,.14);
  --shadow-sm:0 20px 50px rgba(26,42,58,.12);
  --ff-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --ff-serif:'IBM Plex Serif', Georgia, serif;
  --ff-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
::selection{ background:var(--cyan); color:#fff; }
.container{ max-width:1180px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:none; }
@keyframes pxpulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes pxfloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .px-mock, .px-glow{ animation:none !important; }
}

/* =========================================================
   NAVBAR
   ========================================================= */
.px-nav{
  position:sticky; top:0; z-index:40; min-height:70px;
  background:rgba(247,249,252,.85);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.px-nav .navbar-menu{ background:transparent; }
.px-brand{ gap:14px; padding-left:0; }
.px-brand:hover{ background:transparent; }
.px-logo{
  width:36px; height:36px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--cyan),var(--cyan-d));
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(0,168,204,.3);
}
.px-logo-sm{ width:28px; height:28px; border-radius:7px; box-shadow:none; }
.px-brand-name{ font-family:var(--ff-serif); font-weight:700; font-size:22px; color:var(--ink); }
.px-nav-center{ flex:1; justify-content:center; }
.px-navlink{ font-size:13.5px; color:var(--muted) !important; font-weight:500; }
.px-navlink:hover{ background:transparent !important; color:var(--ink) !important; }
.px-navlink.is-active{ color:var(--cyan) !important; }

/* =========================================================
   BOTONES
   ========================================================= */
.button.px-btn-primary{
  background:var(--cyan); color:#fff; border:none; font-weight:600; border-radius:11px;
  box-shadow:0 4px 20px rgba(0,168,204,.35); transition:transform .15s, box-shadow .25s, background .2s;
}
.button.px-btn-primary:hover{ background:var(--cyan-d); color:#fff; transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,168,204,.45); }
.button.px-btn-outline{
  background:#fff; color:var(--ink); border:1px solid var(--line-3); font-weight:600; border-radius:11px;
}
.button.px-btn-outline:hover{ border-color:var(--cyan); color:var(--cyan); }
.button.px-btn-ghost{
  background:#fff; color:var(--ink); border:1px solid var(--line-3); font-weight:600; border-radius:9px; font-size:13px;
}
.button.px-btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }
.button.px-btn-dark{ background:var(--ink); color:#fff; border:none; font-weight:600; border-radius:10px; }
.button.px-btn-dark:hover{ background:#12212f; color:#fff; }
.button.px-btn-ghost-light{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18); font-weight:600; border-radius:11px;
}
.button.px-btn-ghost-light:hover{ background:rgba(255,255,255,.16); color:#fff; }

/* =========================================================
   HERO
   ========================================================= */
.px-hero{ padding:60px 0 30px; overflow:hidden; }
.px-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  color:#00668A; background:var(--info-bg); border:1px solid var(--info-bd);
  padding:6px 13px; border-radius:20px;
}
.px-dot-cyan{ width:7px; height:7px; border-radius:50%; background:var(--cyan); }
.px-hero-title{
  margin:20px 0 0; font-family:var(--ff-serif); font-weight:700; color:var(--ink);
  font-size:clamp(2.3rem,4.4vw,3.15rem); line-height:1.06; letter-spacing:-.5px;
}
.px-hero-sub{ margin:22px 0 0; font-size:16.5px; line-height:1.6; color:var(--muted); max-width:520px; }
.px-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.px-hero-stats{ display:flex; gap:30px; margin-top:38px; flex-wrap:wrap; }
.px-stat-num{ display:block; font-size:26px; font-weight:700; color:var(--ink); font-family:var(--ff-mono); }
.px-stat-label{ display:block; margin-top:4px; font-size:12px; color:var(--muted-2); }

/* hero mock */
.px-hero-visual{ position:relative; }
.px-glow{ position:absolute; inset:-24px; background:radial-gradient(circle at 60% 30%,rgba(0,168,204,.18),transparent 62%); filter:blur(16px); }
.px-mock{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); overflow:hidden; animation:pxfloat 6s ease-in-out infinite;
}
.px-mock-head{ background:var(--ink); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; }
.px-mock-eyebrow{ margin:0; font-size:10px; color:#7FA0B5; letter-spacing:.5px; }
.px-mock-title{ margin:3px 0 0; font-size:14px; font-weight:600; color:#fff; font-family:var(--ff-serif); }
.px-mock-date{ font-size:10px; color:#7FA0B5; font-family:var(--ff-mono); }
.px-mock-body{ padding:15px; }
.px-mock-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.px-metric{ background:var(--paper); border:1px solid var(--line-2); border-radius:9px; padding:11px; }
.px-metric.is-warn{ background:var(--orange-bg); border-color:var(--orange-bd); }
.px-metric-cap{ margin:0; font-size:9px; color:var(--muted-2); }
.px-metric.is-warn .px-metric-cap{ color:#B5673F; }
.px-metric-val{ margin:5px 0 0; font-size:18px; font-weight:700; color:var(--ink); font-family:var(--ff-mono); }
.px-metric-val.is-cyan{ color:var(--cyan); } .px-metric-val.is-orange{ color:var(--orange); }
.px-mock-alert{
  display:flex; align-items:center; gap:10px; margin-top:11px; padding:10px 12px;
  background:var(--orange-bg); border:1px solid var(--orange-bd); border-left:3px solid var(--orange); border-radius:9px;
}
.px-mock-alert p{ margin:0; font-size:11px; color:#8A3C15; line-height:1.35; }
.px-alert-dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; animation:pxpulse 2s infinite; }
.px-mock-list{ margin-top:11px; }
.px-mock-row{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.px-mock-row:last-child{ border-bottom:none; }
.px-time{ font-size:12px; font-weight:700; color:var(--ink); font-family:var(--ff-mono); }
.px-time.is-cyan{ color:var(--cyan); }
.px-row-body{ flex:1; }
.px-row-title{ margin:0; font-size:11.5px; font-weight:600; color:var(--ink); }
.px-row-sub{ margin:2px 0 0; font-size:10px; color:var(--muted-2); }
.px-tag{ font-size:9px; font-weight:600; color:var(--ink); background:#EBF0F4; padding:2px 7px; border-radius:20px; }
.px-tag.is-cyan{ color:var(--cyan); background:var(--info-bg); }

/* =========================================================
   LOGOS
   ========================================================= */
.px-logos{ padding:24px 0 44px; }
.px-logos-label{ text-align:center; font-size:11.5px; color:var(--muted-3); letter-spacing:1.5px; text-transform:uppercase; margin:0 0 20px; }
.px-logos-row{ display:flex; justify-content:center; gap:44px; flex-wrap:wrap; }
.px-logos-row span{ font-family:var(--ff-serif); font-size:19px; font-weight:600; color:var(--muted); opacity:.7; }

/* =========================================================
   SECCIONES genéricas
   ========================================================= */
.px-section{ padding:70px 0; }
.px-section-white{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.px-head{ text-align:center; max-width:640px; margin:0 auto 46px; }
.px-kicker{ font-size:12px; font-weight:600; color:var(--cyan); letter-spacing:1.5px; text-transform:uppercase; }
.px-kicker-light{ color:#7FE1F2; }
.px-h2{ margin:12px 0 0; font-family:var(--ff-serif); font-size:clamp(1.8rem,3.2vw,2.1rem); font-weight:600; color:var(--ink); line-height:1.2; }
.px-h2-left{ text-align:left; }
.px-h2-light{ color:#fff; }
.px-lead{ margin:14px 0 0; font-size:15px; color:var(--muted); line-height:1.6; }
.px-lead-left{ text-align:left; }
.px-lead-dark{ color:#AFC0CD; }

/* feature cards */
.px-card{ background:var(--paper); border:1px solid var(--line-2); border-radius:15px; padding:24px 22px; height:100%; transition:transform .25s, box-shadow .3s, border-color .3s; }
.px-section-white .px-card{ background:var(--paper); }
.px-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); border-color:transparent; }
.px-icon{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.px-icon-sm{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
.px-i-cyan{ background:var(--info-bg); } .px-i-orange{ background:var(--orange-bg); } .px-i-green{ background:var(--green-bg); }
.px-i-purple{ background:var(--purple-bg); } .px-i-yellow{ background:var(--yellow-bg); }
.px-card-title{ margin:0; font-size:16px; font-weight:600; color:var(--ink); }
.px-card-text{ margin:9px 0 0; font-size:13.5px; color:var(--muted); line-height:1.55; }

/* digitalización checks */
.px-checks{ margin:22px 0 0; }
.px-checks li{ display:flex; align-items:flex-start; gap:11px; padding:6px 0; }
.px-check{ width:24px; height:24px; border-radius:7px; background:var(--green-bg); display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.px-check-t{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink); }
.px-check-d{ margin:3px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5; }

/* repositorio mock */
.px-repo{ background:#fff; border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow-sm); overflow:hidden; }
.px-repo-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-2); }
.px-repo-head p{ margin:0; font-size:13px; font-weight:600; color:var(--ink); }
.px-repo-search{ font-size:10px; color:var(--cyan); background:var(--info-bg); padding:3px 9px; border-radius:6px; font-weight:600; }
.px-file{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line-2); }
.px-file-last{ border-bottom:none; }
.px-file-ic{ width:30px; height:38px; border-radius:5px; background:#FBE7DC; display:flex; align-items:center; justify-content:center; flex:none; font-size:7px; font-weight:700; color:var(--orange); }
.px-file-body{ flex:1; min-width:0; }
.px-file-name{ margin:0; font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.px-file-meta{ margin:2px 0 0; font-size:10.5px; color:var(--muted-2); }
.px-file-badge{ font-size:9px; font-weight:600; padding:3px 7px; border-radius:5px; flex:none; }
.px-file-badge.is-cyan{ color:var(--cyan); background:var(--info-bg); }
.px-file-badge.is-green{ color:var(--green); background:var(--green-bg); }
.px-file-badge.is-orange{ color:var(--orange); background:#FBE7DC; }
.px-file-badge.is-gray{ color:var(--muted-2); background:#EFF2F5; }

/* =========================================================
   NOTIFICACIONES (dark)
   ========================================================= */
.px-dark{ background:var(--ink-2); padding:74px 0; }
.px-alerts{ display:flex; flex-direction:column; gap:11px; }
.px-alert-card{ display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:14px 16px; }
.px-a-green{ border-left:3px solid var(--green); } .px-a-yellow{ border-left:3px solid var(--yellow); } .px-a-orange{ border-left:3px solid var(--orange); }
.px-alert-chip{ width:40px; height:40px; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; }
.px-alert-chip.is-green{ background:rgba(18,153,107,.16); } .px-alert-chip.is-yellow{ background:rgba(201,138,0,.18); } .px-alert-chip.is-orange{ background:rgba(229,107,46,.18); }
.px-chip-num{ font-size:15px; font-weight:700; line-height:1; }
.px-chip-unit{ font-size:7.5px; }
.is-green .px-chip-num,.is-green .px-chip-unit{ color:var(--green); }
.is-yellow .px-chip-num,.is-yellow .px-chip-unit{ color:var(--yellow); }
.is-orange .px-chip-num,.is-orange .px-chip-unit{ color:var(--orange); }
.px-alert-body{ flex:1; }
.px-alert-task{ margin:0; font-size:13px; font-weight:600; color:#fff; }
.px-alert-exp{ margin:3px 0 0; font-size:11px; color:var(--muted-3); }
.px-alert-label{ font-size:9.5px; font-weight:600; padding:3px 9px; border-radius:20px; }
.px-alert-label.is-green{ color:var(--green); background:rgba(18,153,107,.16); }
.px-alert-label.is-yellow{ color:var(--yellow); background:rgba(201,138,0,.18); }
.px-alert-label.is-orange{ color:var(--orange); background:rgba(229,107,46,.18); }
.px-channels{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.px-channel{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:8px 13px; border-radius:20px; }

/* =========================================================
   APP MÓVIL
   ========================================================= */
.px-app-feats{ display:flex; flex-direction:column; gap:13px; margin-top:22px; max-width:460px; }
.px-app-feat{ display:flex; align-items:flex-start; gap:12px; }
.px-feat-t{ margin:0; font-size:14px; font-weight:600; color:var(--ink); }
.px-feat-d{ margin:3px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5; }
.px-stores{ display:flex; gap:10px; margin-top:24px; }
.px-store{ display:flex; align-items:center; gap:9px; height:44px; padding:0 16px; background:var(--ink); border-radius:10px; }
.px-store span{ line-height:1; display:block; }
.px-store small{ display:block; font-size:8px; color:#9FB2C0; }
.px-store strong{ display:block; margin-top:2px; font-size:12px; color:#fff; font-weight:600; }

.px-phone-wrap{ display:flex; justify-content:center; }
.px-phone{ width:300px; height:610px; background:var(--ink-2); border-radius:40px; padding:10px; box-shadow:0 30px 60px rgba(26,42,58,.3); }
.px-screen{ width:100%; height:100%; background:var(--paper); border-radius:31px; overflow:hidden; display:flex; flex-direction:column; }
.px-status{ height:40px; background:var(--ink); display:flex; align-items:center; justify-content:space-between; padding:0 20px; flex:none; }
.px-status span{ font-size:11px; font-weight:600; color:#fff; font-family:var(--ff-mono); }
.px-status-brand{ color:#7FA0B5 !important; font-weight:400 !important; }
.px-app-head{ padding:15px 16px 10px; background:var(--ink); flex:none; }
.px-app-date{ margin:0; font-size:10px; color:#7FA0B5; }
.px-app-hi{ margin:4px 0 0; font-size:16px; font-weight:700; color:#fff; font-family:var(--ff-serif); }
.px-app-body{ flex:1; overflow:hidden; padding:13px; }
.px-app-card{ background:#fff; border-radius:13px; padding:14px; box-shadow:0 2px 8px rgba(26,42,58,.08); margin-bottom:11px; }
.px-app-live{ display:flex; align-items:center; gap:7px; margin-bottom:8px; font-size:9.5px; font-weight:700; color:var(--orange); text-transform:uppercase; letter-spacing:.4px; }
.px-app-ct{ margin:0; font-size:13.5px; font-weight:700; color:var(--ink); }
.px-app-cs{ margin:3px 0 0; font-size:10.5px; color:var(--muted-2); font-family:var(--ff-mono); }
.px-app-actions{ display:flex; gap:7px; margin-top:11px; }
.px-app-btn{ flex:1; height:36px; background:var(--cyan); color:#fff; border:none; border-radius:9px; font-size:11.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }
.px-app-btn2{ height:36px; width:40px; background:#EBF0F4; border:none; border-radius:9px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.px-app-warn{ background:var(--orange-bg); border:1px solid var(--orange-bd); border-radius:13px; padding:13px; }
.px-app-wlabel{ margin:0; font-size:9.5px; font-weight:700; color:#8A3C15; text-transform:uppercase; letter-spacing:.4px; }
.px-app-wt{ margin:5px 0 0; font-size:13px; font-weight:600; color:var(--ink); }
.px-app-wbtn{ width:100%; height:36px; margin-top:10px; background:var(--orange); color:#fff; border:none; border-radius:9px; font-size:11.5px; font-weight:600; cursor:pointer; }
.px-app-tabs{ height:54px; background:#fff; border-top:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-around; flex:none; }

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.px-quote{ background:var(--paper); border:1px solid var(--line-2); border-radius:15px; padding:26px 24px; height:100%; display:flex; flex-direction:column; }
.px-quote-text{ margin:0; font-size:14px; color:#2C3A45; line-height:1.6; flex:1; }
.px-quote-author{ display:flex; align-items:center; gap:11px; margin-top:20px; padding-top:18px; border-top:1px solid #EAEFF4; }
.px-avatar{ width:40px; height:40px; border-radius:50%; background:var(--a); color:var(--ac); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; flex:none; }
.px-quote-author strong{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.px-quote-author span{ display:block; margin-top:2px; font-size:12px; color:var(--muted-2); }

/* =========================================================
   PRECIOS
   ========================================================= */
.px-plan{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 26px; height:100%; position:relative; transition:transform .25s, box-shadow .3s; }
.px-plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.px-plan-featured{ border:2px solid var(--cyan); }
.px-plan-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:600; color:#fff; background:var(--cyan); padding:4px 13px; border-radius:20px; }
.px-plan-name{ margin:0; font-size:17px; font-weight:600; color:var(--ink); }
.px-plan-for{ margin:6px 0 0; font-size:12.5px; color:var(--muted-2); }
.px-plan-price{ margin:18px 0 0; display:flex; align-items:baseline; gap:5px; }
.px-amount{ font-size:32px; font-weight:700; color:var(--ink); font-family:var(--ff-mono); }
.px-per{ font-size:13px; color:var(--muted-2); }
.px-plan-users{ display:flex; align-items:center; gap:9px; margin-top:14px; padding:9px 12px; background:#F0F4F8; border-radius:9px; font-size:13px; font-weight:600; color:var(--ink); }
.px-plan-users.is-cyan{ background:var(--info-bg); color:#00668A; }
.px-plan-feat{ margin:18px 0 0; border-top:1px solid var(--line-2); padding-top:18px; }
.px-plan-feat li{ display:flex; align-items:center; gap:9px; padding:5.5px 0; font-size:13px; color:#3E4C57; }
.px-plan-feat li::before{ content:""; width:15px; height:15px; flex:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312996B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size:contain; background-repeat:no-repeat; }
.px-plan-feat li{ list-style:none; }
.px-plan .button{ margin-top:24px; height:44px; }

/* =========================================================
   CTA + FOOTER
   ========================================================= */
.px-cta{ position:relative; overflow:hidden; background:linear-gradient(120deg,var(--ink),#22384A); border-radius:22px; padding:56px 48px; text-align:center; }
.px-cta-glow{ position:absolute; top:-40px; right:-20px; width:260px; height:260px; background:radial-gradient(circle,rgba(0,168,204,.28),transparent 65%); filter:blur(10px); }
.px-cta-title{ position:relative; margin:0; font-family:var(--ff-serif); font-size:clamp(1.8rem,3.4vw,2.1rem); font-weight:600; color:#fff; }
.px-cta-sub{ position:relative; margin:14px 0 0; font-size:16px; color:#AFC0CD; }
.px-cta-actions{ position:relative; display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.px-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:44px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap; gap:14px; }
.px-footer-brand{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted-2); }
.px-footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.px-footer-links a{ font-size:12.5px; color:var(--muted-2); transition:color .2s; }
.px-footer-links a:hover{ color:var(--cyan); }

/* back to top */
.px-backtop{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#fff; border:none; cursor:pointer; font-size:1.2rem; z-index:50;
  opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s, transform .3s, background .2s;
  box-shadow:var(--shadow-sm);
}
.px-backtop.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.px-backtop:hover{ background:var(--cyan); }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* never let mocks / phone overflow their column */
.px-mock, .px-repo, .px-cta, .px-card, .px-quote, .px-plan{ max-width:100%; }
.px-phone{ max-width:100%; }
img, svg{ max-width:100%; }

/* --- tablet & below: split sections stack (via .is-desktop) --- */
@media (max-width:1023px){
  .px-nav .navbar-menu.is-active{ background:var(--paper); box-shadow:var(--shadow-sm); padding-bottom:1rem; }
  .px-nav-center{ justify-content:flex-start; }
  .container{ padding-left:8px; padding-right:8px; }

  .px-hero{ padding:44px 0 20px; }
  .px-hero-visual{ margin-top:2.5rem; max-width:520px; margin-left:auto; margin-right:auto; }

  /* dark notifications: show heading first, alerts after */
  .px-dark .columns > .column:first-child{ order:2; }

  .px-app-feats{ max-width:none; }
  .px-phone-wrap{ margin-top:2rem; }
}

/* --- mobile --- */
@media (max-width:768px){
  .px-section{ padding:52px 0; }
  .px-dark{ padding:52px 0; }
  .px-logos{ padding:16px 0 36px; }

  .px-head{ margin-bottom:34px; }
  .px-hero-title{ font-size:2rem; }
  .px-hero-sub{ font-size:15.5px; }
  .px-hero-stats{ gap:18px 26px; }

  .px-h2-left, .px-lead-left{ text-align:left; }

  .px-logos-row{ gap:14px 26px; }
  .px-logos-row span{ font-size:16px; }

  .px-cta{ padding:40px 22px; }
  .px-footer{ justify-content:center; text-align:center; }
  .px-footer-links{ justify-content:center; }
}

/* --- small phones: full-width CTAs, tighter chrome --- */
@media (max-width:520px){
  .container{ padding-left:16px; padding-right:16px; }
  .px-brand-name{ font-size:20px; }

  .px-hero-cta{ flex-direction:column; align-items:stretch; }
  .px-hero-cta .button{ width:100%; }
  .px-cta-actions{ flex-direction:column; align-items:stretch; }
  .px-cta-actions .button{ width:100%; }

  .px-hero-stats{ gap:16px; }
  .px-stat{ min-width:88px; }

  .px-stores{ flex-direction:column; }
  .px-store{ width:100%; justify-content:center; }

  .px-plan{ padding:26px 22px; }
  .px-card{ padding:22px 20px; }

  .px-backtop{ right:14px; bottom:14px; width:42px; height:42px; }
}