/* Area chart (CSS) */
    .m-chart {
      height: 80px; border-radius: 8px; margin-bottom: 14px;
      background: rgba(0,229,255,.04); border: 1px solid rgba(0,229,255,.08);
      position: relative; overflow: hidden;
    }
    .m-chart-line {
      position: absolute; bottom: 0; left: 0; right: 0; height: 100%;
      background: linear-gradient(to bottom, rgba(0,229,255,.18) 0%, transparent 100%);
      clip-path: polygon(0 60%,8% 50%,18% 45%,28% 52%,38% 38%,48% 42%,58% 28%,68% 32%,78% 18%,90% 22%,100% 10%,100% 100%,0 100%);
    }
    .m-chart-stroke {
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, #00e5ff, #38bdf8);
      clip-path: polygon(0 60%,8% 50%,18% 45%,28% 52%,38% 38%,48% 42%,58% 28%,68% 32%,78% 18%,90% 22%,100% 10%,100% 12%,90% 24%,78% 20%,68% 34%,58% 30%,48% 44%,38% 40%,28% 54%,18% 47%,8% 52%,0 62%);
    }
    /* Bar row */
    .m-bar-row { display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:.68rem;color:rgba(255,255,255,.45); }
    .m-bar-lbl { width: 90px; flex-shrink: 0; }
    .m-bar-track { flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden; }
    .m-bar-fill  { height:100%;border-radius:3px; }
    .m-bar-val   { width: 56px; text-align:right; flex-shrink:0; }
    /* Status badge */
    .m-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 9px; border-radius: 999px; font-size: .62rem; font-weight: 700;
    }
    .m-badge.ok  { background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.25); }
    .m-badge.warn{ background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.25); }
    .m-badge.crit{ background:rgba(239,68,68,.12); color:#f87171;border:1px solid rgba(239,68,68,.25); }
    /* Table */
    .m-table { width:100%;border-collapse:collapse; }
    .m-table th { font-size:.6rem;color:rgba(255,255,255,.3);font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:0 0 8px;text-align:left; }
    .m-table td { font-size:.68rem;color:rgba(255,255,255,.65);padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04); }
    .m-table tr:last-child td { border-bottom:none; }
    /* Chat bubble */
    .m-bubble {
      border-radius: 12px; padding: 10px 14px;
      font-size: .7rem; line-height: 1.6; margin-bottom: 8px;
    }
    .m-bubble.ai { background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.18);color:rgba(255,255,255,.82); }
    .m-bubble.user { background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.55);text-align:right; }
    .m-ai-tag { font-size:.58rem;color:#00e5ff;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px; }
    /* Action row */
    .m-action-row { display:flex;gap:8px;margin-top:10px; }
    .m-btn {
      display:inline-flex;align-items:center;gap:5px;
      padding:6px 14px;border-radius:8px;font-size:.68rem;font-weight:700;border:none;cursor:pointer;
    }
    .m-btn.primary { background:rgba(0,229,255,.18);color:#00e5ff;border:1px solid rgba(0,229,255,.3); }
    .m-btn.ghost   { background:rgba(255,255,255,.05);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.1); }
    /* POS grid */
    .m-pos { display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start; }
    .m-prod-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
    .m-prod-card {
      background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
      border-radius:8px;padding:8px;text-align:center;cursor:pointer;
      transition:border-color .2s;font-size:.63rem;color:rgba(255,255,255,.6);
    }
    .m-prod-card:hover{border-color:rgba(0,229,255,.3);color:#00e5ff;}
    .m-prod-icon { font-size:1.3rem;line-height:1;margin-bottom:3px; }
    .m-prod-icon iconify-icon { display:block; }
    .m-cart { background:rgba(0,229,255,.04);border:1px solid rgba(0,229,255,.1);border-radius:10px;padding:10px 12px;min-width:140px; }
    .m-cart-title { font-size:.62rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px; }
    .m-cart-row { display:flex;justify-content:space-between;font-size:.65rem;color:rgba(255,255,255,.6);margin-bottom:5px; }
    .m-cart-total { display:flex;justify-content:space-between;font-size:.82rem;font-weight:800;color:#fff;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px; }
    .m-cart-btn { display:block;text-align:center;background:linear-gradient(135deg,#0d6efd,#00e5ff);color:#fff;border:none;border-radius:8px;padding:8px;font-size:.72rem;font-weight:700;cursor:pointer;margin-top:10px;width:100%; }
    /* Integration hub */
    .m-hub { position:relative;height:200px;display:flex;align-items:center;justify-content:center; }
    .m-hub-center {
      width:60px;height:60px;border-radius:50%;
      background:rgba(0,229,255,.1);border:2px solid rgba(0,229,255,.4);
      display:flex;align-items:center;justify-content:center;
      font-size:.7rem;font-weight:800;color:#00e5ff;
      box-shadow:0 0 24px rgba(0,229,255,.25);
      position:relative;z-index:2;
    }
    .m-hub-ring {
      position:absolute;border-radius:50%;border:1px dashed rgba(0,229,255,.15);
      animation:hubRingSpin 20s linear infinite;
    }
    .m-hub-ring-1{width:130px;height:130px;}
    .m-hub-ring-2{width:190px;height:190px;animation-direction:reverse;animation-duration:28s;}
    @keyframes hubRingSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
    .m-hub-logo {
      position:absolute;width:36px;height:36px;border-radius:10px;
      background:rgba(4,20,50,.9);border:1px solid rgba(255,255,255,.12);
      display:flex;align-items:center;justify-content:center;font-size:1.1rem;
      box-shadow:0 4px 12px rgba(0,0,0,.4);
    }
    .m-hub-conn {
      position:absolute;height:1px;transform-origin:left center;
      background:linear-gradient(90deg,rgba(0,229,255,.5),transparent);
    }
    /* Search bar mock */
    .m-search {
      display:flex;align-items:center;gap:8px;
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
      border-radius:8px;padding:7px 12px;margin-bottom:14px;
      font-size:.68rem;color:rgba(255,255,255,.3);
    }
    .m-search-input-mock { flex:1;color:rgba(255,255,255,.45); }
    /* Prediction card */
    .m-prediction {
      background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(0,229,255,.06));
      border:1px solid rgba(16,185,129,.25);border-radius:10px;
      padding:10px 14px;margin-top:10px;
    }
    .m-prediction-title { font-size:.6rem;color:#34d399;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px; }
    /* Typing indicator */
    .m-typing { display:flex;align-items:center;gap:3px;padding:4px 0; }
    .m-typing-dot {
      width:5px;height:5px;border-radius:50%;background:#00e5ff;opacity:.6;
      animation:typingBounce .8s ease-in-out infinite;
    }
    .m-typing-dot:nth-child(2){animation-delay:.15s}
    .m-typing-dot:nth-child(3){animation-delay:.3s}
    @keyframes typingBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

    /* ── Progress + dots ──────────────────────────────────────────── */
    .scene-bottom-ui {
      display: flex; align-items: center; gap: 1.5rem;
      padding: 1.2rem 4rem 0;
    }
    .scene-dots { display:flex;gap:.5rem;align-items:center; }
    .scene-dot {
      width:8px;height:8px;border-radius:999px;
      background:rgba(255,255,255,.2);cursor:pointer;
      transition:width .35s,background .3s;
    }
    .scene-dot.active { width:24px;background:#00e5ff;box-shadow:0 0 8px rgba(0,229,255,.5); }
    .scene-prog-track { flex:1;height:2px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden; }
    .scene-prog-fill  { height:100%;width:20%;background:linear-gradient(90deg,#00e5ff,#38bdf8);border-radius:2px;transition:width .7s ease; }
    /* Arrow buttons */
    .scene-arrows { display:flex;gap:.5rem;margin-left:auto; }
    .scene-arrow {
      width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
      background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);
      display:flex;align-items:center;justify-content:center;
      font-size:1rem;cursor:pointer;transition:all .25s;
    }
    .scene-arrow:hover { border-color:rgba(0,229,255,.4);color:#00e5ff;background:rgba(0,229,255,.08); }

    /* ── Stats strip ───────────────────────────────────────────────────── */
    .stats-strip {
      background: linear-gradient(135deg, #042C53 0%, #0a1f3d 100%);
      border-top: 1px solid rgba(55,138,221,0.25);
      border-bottom: 1px solid rgba(55,138,221,0.25);
    }
    .stat-item { text-align: center; padding: 2rem 1rem; }
    .stat-number {
      font-size: 2.8rem; font-weight: 900; line-height: 1;
      background: linear-gradient(135deg, #378ADD, #00E5FF);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .stat-label { color: rgba(255,255,255,0.6); font-size: 0.85rem; margin-top: 6px; }

    /* ── Features ──────────────────────────────────────────────────────── */
    .feature-card-col .landing-card { transition: box-shadow 0.3s; }
    .feature-number {
      font-size: 2rem; font-weight: 900; line-height: 1;
      background: linear-gradient(135deg, #378ADD33 0%, #00E5FF22 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; display: block; margin-bottom: 4px;
    }

    /* ── Testimonials ──────────────────────────────────────────────────── */
    .testimonial-glass {
      position: relative; padding: 1.8rem;
      border-radius: 20px;
      background: rgba(255,255,255,0.03);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(0,229,255,0.10);
      color: var(--sge-white);
      transition: border-color 0.3s, transform 0.3s;
    }
    .testimonial-glass:hover { border-color: rgba(0,229,255,0.32); transform: translateY(-5px); }
    .testimonial-quote { font-size: 3.5rem; line-height: 0.8; color: var(--sge-cyan); opacity: 0.25; font-family: Georgia,serif; margin-bottom: 0.5rem; }
    .testimonial-text { font-size: 0.9rem; line-height: 1.65; color: rgba(255,255,255,0.75); margin-bottom: 1.2rem; }
    .testimonial-stars { color: #fbbf24; font-size: 0.8rem; margin-bottom: 0.75rem; }
    .testimonial-metric {
      display: inline-block; font-size: 0.75rem; font-weight: 700;
      padding: 3px 10px; border-radius: 50px;
      background: rgba(0,229,255,0.12); color: var(--sge-cyan);
      border: 1px solid rgba(0,229,255,0.25); margin-bottom: 1rem;
    }
    .testimonial-author { font-weight: 700; font-size: 0.85rem; color: var(--sge-white); }
    .testimonial-role { font-size: 0.75rem; color: var(--sge-sky); }
    .testi-avatar {
      width: 42px; height: 42px; border-radius: 50%;
      border: 2px solid rgba(0,229,255,0.3);
      overflow: hidden; flex-shrink: 0;
    }
    .testi-avatar img, .testi-avatar svg { width: 100%; height: 100%; object-fit: cover; }

    /* ── Pricing tease ─────────────────────────────────────────────────── */
    .price-tease-card {
      border-radius: 20px; border: 1px solid rgba(0,229,255,0.15);
      box-shadow: 0 12px 40px rgba(2,6,23,0.08);
      background: rgba(4,44,83,0.6); backdrop-filter: blur(12px);
      color: var(--sge-white); overflow: hidden;
      transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    }
    .price-tease-card:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(0,229,255,0.12); border-color: rgba(0,229,255,0.35); }
    .price-tease-card.popular { border: 1px solid rgba(0,229,255,0.5); box-shadow: 0 0 50px rgba(0,229,255,0.18), 0 12px 40px rgba(0,0,0,0.4); }
    .price-tease-header { padding: 1.8rem 1.8rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .price-badge { display: inline-block; padding: 3px 12px; border-radius: 99px; background: linear-gradient(135deg, #378ADD, #00E5FF); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 10px; }
    .price-amount { font-size: 2.4rem; font-weight: 900; line-height: 1; color: var(--sge-white); }
    .price-period { font-size: 0.8rem; color: var(--sge-sky); }
    .price-feature { display: flex; align-items: center; gap: 10px; padding: 0.6rem 0; font-size: 0.88rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); }
    .price-feature:last-child { border-bottom: none; }
    .price-check { color: #10b981; font-size: 1rem; flex-shrink: 0; }

    /* ── CTA banner ────────────────────────────────────────────────────── */
    .cta-banner {
      background: linear-gradient(135deg, var(--sge-void) 0%, var(--sge-navy) 50%, var(--sge-void) 100%);
      position: relative; overflow: hidden;
    }
    .cta-banner::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at 30% 50%, rgba(0,229,255,0.12) 0%, transparent 60%),
                  radial-gradient(ellipse at 70% 50%, rgba(55,138,221,0.08) 0%, transparent 60%);
    }
    .cta-banner > * { position: relative; z-index: 1; }

    /* ── Magnetic button ────────────────────────────────────────────────── */
    .btn-magnetic { position: relative; display: inline-block; }

    /* ── FAQ dark ───────────────────────────────────────────────────────── */
    .faq-dark .accordion-item {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(0,229,255,0.1) !important;
      border-radius: 12px !important; margin-bottom: 0.6rem; overflow: hidden;
    }
    .faq-dark .accordion-button {
      background: transparent !important; color: var(--sge-white) !important;
      font-weight: 600; font-size: 0.95rem;
      box-shadow: none !important;
    }
    .faq-dark .accordion-button:not(.collapsed) { color: var(--sge-cyan) !important; }
    .faq-dark .accordion-button::after { filter: invert(1) brightness(0.6); }
    .faq-dark .accordion-body { color: var(--sge-sky); font-size: 0.88rem; line-height: 1.65; }

    /* ── 3D Visual Injections ─────────────────────────────────────────── */
    .img-3d-wrap {
      position: relative; perspective: 1200px; border-radius: 20px; overflow: hidden;
      box-shadow: 0 20px 50px rgba(0,0,0,0.4); border: 1px solid rgba(0,229,255,0.15);
    }
    .img-mask-radial {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(circle at 50% 50%, transparent 40%, var(--sge-void) 100%);
      opacity: 0.85; z-index: 1;
    }
    .hero-bg-visual {
      position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.45;
      overflow: hidden; background-size: cover; background-position: center;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 90%);
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 90%);
    }
    .hero-bg-visual img {
      width: 100%; height: 100%; object-fit: cover; object-position: center;
      display: block; filter: saturate(0.8) contrast(1.1) brightness(0.9);
      transform: scale(1.025);
    }
    .tilt-img { will-change: transform; transition: transform 0.1s ease-out; cursor: crosshair; }
    /* Degradacion segura: visible por default. Solo se oculta-y-revela si
       JS logra marcar html.reveal-anim-armed antes de tiempo. */
    .reveal-img { opacity: 1; transform: none; }
    html.reveal-anim-armed .reveal-img {
      opacity: 0; transform: translateY(30px) scale(0.95) rotateX(10deg);
      transition: opacity 1.4s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1);
    }
    html.reveal-anim-armed .reveal-img.in-view { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal-img { opacity: 1 !important; transform: none !important; }
    }