/* ═══════════════════════════════════════════════════════
   starapp.css — STARAPP Landing Page
   ═══════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────── */
:root {
  --sta-dark:   #050010;
  --sta-dark2:  #0a0022;
  --sta-purple: #7c3aed;
  --sta-purple2:#a855f7;
  --sta-border: rgba(124,58,237,.35);
  --sta-yellow: #ffcd00;
  --sta-cyan:   #22d3ee;
  --sta-font:   'Poppins', sans-serif;
}

/* ── Global ──────────────────────────────────────────── */
.sta-body { background: var(--sta-dark); }
.mb-6 { margin-bottom: 5rem; }

/* ── Cyber grid background ───────────────────────────── */
.sta-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124,58,237,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.07) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
.sta-grid-bg--subtle {
  background-image:
    linear-gradient(rgba(124,58,237,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Floating orbs ───────────────────────────────────── */
.sta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  animation: staOrbFloat 9s ease-in-out infinite;
}
.sta-orb--1 { width:700px; height:700px; background:#7c3aed; opacity:.15; top:-250px; right:-250px; }
.sta-orb--2 { width:450px; height:450px; background:var(--sta-yellow); opacity:.08; bottom:-100px; left:-150px; animation-delay:3s; }
.sta-orb--3 { width:280px; height:280px; background:var(--sta-cyan);   opacity:.06; top:45%; left:35%; animation-delay:1.5s; }
.sta-orb--4 { width:500px; height:500px; background:#6b21a8; opacity:.14; top:-100px; left:-200px; animation-delay:2s; }
.sta-orb--5 { width:600px; height:600px; background:#7c3aed; opacity:.12; bottom:-200px; right:-200px; animation-delay:4s; }
.sta-orb--6 { width:400px; height:400px; background:var(--sta-yellow); opacity:.07; top:20%; right:10%; animation-delay:.5s; }

@keyframes staOrbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.04); }
}

/* ── Eyebrow ─────────────────────────────────────────── */
.sta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,205,0,.8);
  background: rgba(255,205,0,.08);
  border: 1px solid rgba(255,205,0,.22);
  border-radius: 50px;
  padding: .32rem 1rem;
  margin-bottom: 1.25rem;
}

/* ── Section titles ──────────────────────────────────── */
.sta-section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
}
.sta-section-sub {
  font-size: 1rem;
  color: rgba(255,255,255,.55);
  line-height: 1.8;
  font-weight: 300;
}
.sta-yellow-glow {
  color: var(--sta-yellow);
  text-shadow: 0 0 22px rgba(255,205,0,.55), 0 0 50px rgba(255,205,0,.22);
}

/* ── Buttons ─────────────────────────────────────────── */
.sta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--sta-dark);
  background: var(--sta-yellow);
  border-radius: 50px;
  padding: .85rem 2.25rem;
  transition: transform .25s, box-shadow .25s, background .2s;
  box-shadow: 0 6px 32px rgba(255,205,0,.35);
}
.sta-btn-primary:hover {
  background: #ffe566;
  color: var(--sta-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 44px rgba(255,205,0,.55);
}
.sta-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  padding: .82rem 1.75rem;
  transition: all .25s;
}
.sta-btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,205,0,.5);
  background: rgba(255,205,0,.06);
}

/* ══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */
.sta-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--sta-dark);
  position: relative;
  overflow: hidden;
  padding: 7rem 0 5rem;
}

.sta-hero-title {
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em;
  margin: .25rem 0 1.25rem;
}

.sta-hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255,255,255,.65);
  line-height: 1.8;
  font-weight: 300;
  max-width: 460px;
}

.sta-hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; }

/* hero device image */
.sta-hero-device {
  position: relative;
  animation: staFloat 7s ease-in-out infinite;
}
.sta-hero-img {
  width: 100%;
  max-width: 640px;
  filter:
    drop-shadow(0 0 50px rgba(124,58,237,.6))
    drop-shadow(0 0 100px rgba(255,205,0,.2));
}

/* floating badges on device */
.sta-hero-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: rgba(10, 0, 34, .85);
  border: 1px solid var(--sta-border);
  border-radius: 50px;
  padding: .45rem 1rem;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(124,58,237,.3);
}
.sta-hero-badge i { color: var(--sta-yellow); font-size: .85rem; }
.sta-hero-badge--1 { top: 12%; left: -5%;  animation: staFloat 5s ease-in-out infinite; }
.sta-hero-badge--2 { top: 48%; right: 2%;  animation: staFloat 6s ease-in-out infinite; animation-delay: 1s; }
.sta-hero-badge--3 { bottom: 18%; left: 5%; animation: staFloat 5.5s ease-in-out infinite; animation-delay: 2s; }

/* hero stats bar */
.sta-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.sta-hero-stat { text-align: center; padding: .5rem 1.25rem; }
.sta-hero-stat:first-child { padding-left: 0; }
.sta-hero-stat-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--sta-yellow);
  text-shadow: 0 0 16px rgba(255,205,0,.5);
  line-height: 1;
}
.sta-hero-stat-lbl {
  display: block;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-top: .2rem;
}
.sta-hero-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.12);
}

/* scroll hint */
.sta-hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  color: rgba(255,255,255,.3);
  z-index: 3;
  animation: staScrollBounce 2s ease-in-out infinite;
}
@keyframes staScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* ══════════════════════════════════════════════════════
   ECOSISTEMA
   ══════════════════════════════════════════════════════ */
.sta-ecosistema {
  background: var(--sta-dark2);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}

.sta-device-float {
  position: relative;
  animation: staFloat 8s ease-in-out infinite;
  animation-delay: .5s;
}
.sta-eco-img {
  width: 100%;
  filter:
    drop-shadow(0 0 60px rgba(124,58,237,.5))
    drop-shadow(0 0 120px rgba(255,205,0,.15));
}

/* feature pills */
.sta-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.sta-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--sta-yellow);
  background: rgba(255,205,0,.08);
  border: 1px solid rgba(255,205,0,.22);
  border-radius: 50px;
  padding: .32rem .9rem;
}
.sta-pill i { font-size: .8rem; }

/* ══════════════════════════════════════════════════════
   METODOLOGÍA
   ══════════════════════════════════════════════════════ */
.sta-metodo {
  background: var(--sta-dark);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}

.sta-metodo-wrap { position: relative; }

/* horizontal connector line */
.sta-metodo-line {
  position: absolute;
  top: 85px;
  left: calc(16.67% + 2rem);
  right: calc(16.67% + 2rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,205,0,.4) 20%, rgba(124,58,237,.6) 50%, rgba(255,205,0,.4) 80%, transparent);
  z-index: 1;
}
.sta-metodo-line::before,
.sta-metodo-line::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,205,0,.7);
  box-shadow: 0 0 10px rgba(255,205,0,.8);
  animation: staLinePulse 2s ease-in-out infinite;
}
.sta-metodo-line::before { left: 0; }
.sta-metodo-line::after  { right: 0; animation-delay: 1s; }

@keyframes staLinePulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.4); }
}

.sta-metodo-card {
  background: rgba(124,58,237,.07);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: 20px;
  padding: 2.75rem 2rem 2.25rem;
  text-align: center;
  position: relative;
  height: 100%;
  transition: transform .35s, border-color .35s, box-shadow .35s;
  overflow: hidden;
}
.sta-metodo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,.1) 0%, transparent 60%);
  pointer-events: none;
}
.sta-metodo-card:hover,
.sta-metodo-card--active {
  transform: translateY(-10px);
  border-color: var(--sta-yellow);
  box-shadow:
    0 24px 60px rgba(255,205,0,.12),
    0 0 0 1px rgba(255,205,0,.15);
}
.sta-metodo-num {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  color: rgba(255,205,0,.5);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.sta-metodo-icon-wrap {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background: rgba(255,205,0,.1);
  border: 1px solid rgba(255,205,0,.2);
  font-size: 1.65rem;
  color: var(--sta-yellow);
  text-shadow: 0 0 20px rgba(255,205,0,.8);
  position: relative;
  z-index: 1;
  transition: background .3s, box-shadow .3s;
}
.sta-metodo-card:hover .sta-metodo-icon-wrap,
.sta-metodo-card--active .sta-metodo-icon-wrap {
  background: rgba(255,205,0,.18);
  box-shadow: 0 0 30px rgba(255,205,0,.35);
}
.sta-metodo-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: .12em;
  margin-bottom: .85rem;
  position: relative;
  z-index: 1;
}
.sta-metodo-card--active .sta-metodo-title { color: var(--sta-yellow); }
.sta-metodo-desc {
  font-size: .86rem;
  color: rgba(255,255,255,.5);
  line-height: 1.75;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════
   MÓDULOS
   ══════════════════════════════════════════════════════ */
.sta-modulos {
  background: #040010;
  padding: 7rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.sta-modulo-row {
  display: flex;
  gap: 4.5rem;
  align-items: center;
  margin-bottom: 6rem;
}
.sta-modulo-row:last-child { margin-bottom: 0; }
.sta-modulo-row--reverse  { flex-direction: row-reverse; }
.sta-modulo-img-col  { flex: 0 0 52%; min-width: 0; }
.sta-modulo-text-col { flex: 1;       min-width: 0; }

/* cyber screen frame */
.sta-screen-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(124,58,237,.45);
  background: #05000e;
  box-shadow:
    0 0 0 1px rgba(255,205,0,.06),
    0 8px 50px rgba(124,58,237,.25),
    0 0 100px rgba(124,58,237,.1);
  animation: staFloat 7s ease-in-out infinite;
}

/* terminal bar */
.sta-screen-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(124,58,237,.2);
}
.sta-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sta-dot--r { background: rgba(229,44,57,.8); }
.sta-dot--y { background: rgba(255,205,0,.8); }
.sta-dot--g { background: rgba(37,211,102,.8); }
.sta-screen-lbl {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(124,58,237,.7);
  margin-left: auto;
}

/* image area */
.sta-screen-body { position: relative; overflow: hidden; }
.sta-screen-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124,58,237,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.04) 1px, transparent 1px);
  background-size: 22px 22px;
  z-index: 2;
  pointer-events: none;
}
.sta-screen-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.5) 50%, transparent);
  z-index: 3;
  pointer-events: none;
  animation: staScanMove 4s linear infinite;
}
@keyframes staScanMove {
  0%   { top: 0;    opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.sta-screen-img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  filter: saturate(.8) brightness(.85) contrast(1.08);
  transition: filter .4s;
}
.sta-screen-frame:hover .sta-screen-img {
  filter: saturate(.95) brightness(.95) contrast(1.05);
}

/* module text */
.sta-modulo-badge {
  display: inline-flex;
  align-items: center;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sta-purple2);
  border: 1px solid rgba(168,85,247,.3);
  border-radius: 50px;
  padding: .28rem .9rem;
  margin-bottom: 1.1rem;
}
.sta-modulo-title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: .85rem;
  letter-spacing: -.015em;
}
.sta-modulo-sub {
  font-size: .95rem;
  color: rgba(255,255,255,.5);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}
.sta-modulo-list {
  list-style: none;
  padding: 0; margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.sta-modulo-list li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .88rem;
  color: rgba(255,255,255,.7);
}
.sta-modulo-list li i { color: var(--sta-yellow); font-size: .8rem; flex-shrink: 0; }
.sta-modulo-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--sta-yellow);
  text-decoration: none;
  letter-spacing: .04em;
  transition: gap .2s, text-shadow .2s;
}
.sta-modulo-link:hover {
  gap: .7rem;
  text-shadow: 0 0 12px rgba(255,205,0,.6);
  color: var(--sta-yellow);
}

/* ══════════════════════════════════════════════════════
   ¿POR QUÉ STARAPP?
   ══════════════════════════════════════════════════════ */
.sta-diferente {
  background: var(--sta-dark2);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}

.sta-dif-card {
  background: rgba(124,58,237,.07);
  border: 1px solid rgba(124,58,237,.22);
  border-radius: 18px;
  padding: 2.5rem 1.75rem 2rem;
  height: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .35s, border-color .35s, box-shadow .35s;
}
.sta-dif-card:hover {
  transform: translateY(-8px);
  border-color: var(--sta-yellow);
  box-shadow: 0 20px 60px rgba(255,205,0,.1), 0 0 0 1px rgba(255,205,0,.12);
}
.sta-dif-glow {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--sta-yellow);
  opacity: 0;
  top: 0; left: 50%;
  transform: translateX(-50%) translateY(-60%);
  filter: blur(40px);
  transition: opacity .35s;
  pointer-events: none;
}
.sta-dif-card:hover .sta-dif-glow { opacity: .15; }

.sta-dif-icon {
  font-size: 2.4rem;
  color: var(--sta-yellow);
  text-shadow: 0 0 24px rgba(255,205,0,.8), 0 0 50px rgba(255,205,0,.3);
  margin-bottom: 1.25rem;
  display: block;
}
.sta-dif-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .65rem;
}
.sta-dif-desc {
  font-size: .84rem;
  color: rgba(255,255,255,.45);
  line-height: 1.7;
  margin: 0;
}

/* demo strip */
.sta-demo-strip {
  display: flex;
  justify-content: center;
}
.sta-demo-device {
  position: relative;
  max-width: 720px;
  width: 100%;
  animation: staFloat 8s ease-in-out infinite;
}
.sta-demo-img {
  width: 100%;
  filter:
    drop-shadow(0 0 50px rgba(255,205,0,.3))
    drop-shadow(0 0 100px rgba(124,58,237,.4));
}

/* ══════════════════════════════════════════════════════
   CTA FINAL
   ══════════════════════════════════════════════════════ */
.sta-cta {
  background: var(--sta-dark);
  padding: 2rem 0 6rem;
}
.sta-cta-inner {
  background: linear-gradient(135deg,
    rgba(124,58,237,.12) 0%,
    rgba(5,0,16,.9) 50%,
    rgba(255,205,0,.05) 100%);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 24px;
  padding: 6rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sta-cta-glow-left,
.sta-cta-glow-right {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.sta-cta-glow-left  { background: #7c3aed; opacity: .12; top: -100px; left: -100px; }
.sta-cta-glow-right { background: var(--sta-yellow); opacity: .06; bottom: -100px; right: -100px; }
.sta-cta-logo {
  height: 44px;
  opacity: .8;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.sta-cta-eyebrow {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,205,0,.65);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}
.sta-cta-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  max-width: 700px;
  margin: 0 auto 1.25rem;
  letter-spacing: -.02em;
  position: relative;
  z-index: 1;
}
.sta-cta-sub {
  font-size: .98rem;
  color: rgba(255,255,255,.5);
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto 2.5rem;
  position: relative;
  z-index: 1;
}
.sta-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--sta-dark);
  background: var(--sta-yellow);
  border-radius: 50px;
  padding: 1.1rem 3rem;
  box-shadow: 0 8px 48px rgba(255,205,0,.4);
  transition: transform .25s, box-shadow .25s, background .2s;
  position: relative;
  z-index: 1;
  animation: staCtaPulse 2.5s ease-in-out infinite;
}
.sta-cta-btn:hover {
  background: #ffe566;
  color: var(--sta-dark);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 64px rgba(255,205,0,.65);
  animation: none;
}
@keyframes staCtaPulse {
  0%, 100% { box-shadow: 0 8px 48px rgba(255,205,0,.4), 0 0 0 0 rgba(255,205,0,.35); }
  60%       { box-shadow: 0 8px 48px rgba(255,205,0,.4), 0 0 0 16px rgba(255,205,0,0); }
}
.sta-cta-note {
  font-size: .72rem;
  color: rgba(255,255,255,.3);
  margin-top: 1.25rem;
  letter-spacing: .06em;
  position: relative;
  z-index: 1;
}

/* ── Cursor sparkle trail ────────────────────────────── */
.sta-cursor-dot {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sta-yellow);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(255,205,0,.9), 0 0 16px rgba(255,205,0,.5);
  transition: opacity .6s ease, transform .6s ease;
}
.sta-cursor-dot--fade {
  opacity: 0;
  transform: translate(-50%, -50%) scale(2.5);
}

/* ── Shared float animation ──────────────────────────── */
@keyframes staFloat {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-18px); }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .sta-hero { padding: 8rem 0 5rem; }
  .sta-hero-img { max-width: 480px; }
  .sta-hero-badge--1,
  .sta-hero-badge--2,
  .sta-hero-badge--3 { display: none; }

  .sta-modulo-row,
  .sta-modulo-row--reverse { flex-direction: column; gap: 2.5rem; }
  .sta-modulo-img-col { flex: none; width: 100%; }
  .sta-modulo-text-col { flex: none; width: 100%; }

  .sta-metodo-line { display: none; }
}

@media (max-width: 767.98px) {
  .sta-hero-title { font-size: 3.5rem; }
  .sta-hero-stat { padding: .5rem .8rem; }
  .sta-hero-stat-num { font-size: 1.1rem; }

  .sta-cta-inner { padding: 4rem 1.5rem; border-radius: 16px; }
  .sta-cta-btn { padding: .95rem 2rem; font-size: .92rem; width: 100%; justify-content: center; }

  .sta-dif-card { padding: 2rem 1.25rem 1.5rem; }
  .sta-demo-strip { display: none; }
}