/* Deskte site — shared styles for the multi-page marketing site.
   Mirrors the landing's design system + adds motion utilities used by the
   Features / Pricing / About / Contact pages. */

body { background:#070d14; color:#c8dff0; font-family:'Sora',sans-serif; -webkit-font-smoothing:antialiased; }

/* Animated grid background */
.grid-bg::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%); }

/* Scanline at top */
.scan::before { content:''; position:fixed; top:0; left:0; right:0; height:2px; z-index:100; background:linear-gradient(90deg,transparent,#00d4ff,#00ff88,#00d4ff,transparent); animation:scan 5s ease-in-out infinite; pointer-events:none; }
@keyframes scan { 0%,100% { opacity:.3 } 50% { opacity:.9 } }

/* Glow + gradients */
.glow-cyan { box-shadow:0 0 40px rgba(0,212,255,.18),0 0 80px rgba(0,212,255,.05); }
.gradient-cyan { background:linear-gradient(135deg,#0099cc,#0055aa); }
.gradient-green { background:linear-gradient(135deg,#00ff88,#00b86f); }
.grad-text { background:linear-gradient(135deg,#00d4ff 0%,#00ff88 60%,#00d4ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:grad-shift 6s ease infinite; }
@keyframes grad-shift { 0%,100% { background-position:0% 50% } 50% { background-position:100% 50% } }

/* Glass cards */
.glass { background:linear-gradient(180deg,rgba(13,28,46,.85),rgba(7,13,20,.75)); border:1px solid rgba(31,63,96,.6); }
.glass-hover { transition:all .3s cubic-bezier(.2,.9,.3,1.1); }
.glass-hover:hover { border-color:rgba(0,212,255,.45); transform:translateY(-3px); box-shadow:0 16px 50px rgba(0,212,255,.12); }

/* Pricing cards */
.pricing-card { background:linear-gradient(180deg,rgba(13,28,46,.85),rgba(7,13,20,.95)); border:1px solid rgba(31,63,96,.5); border-radius:20px; transition:all .3s; position:relative; overflow:hidden; }
.pricing-card.featured { border-color:rgba(0,212,255,.6); background:linear-gradient(180deg,rgba(0,212,255,.06),rgba(13,28,46,.9)); box-shadow:0 0 60px rgba(0,212,255,.18); overflow:visible; }
.pricing-card:hover { transform:translateY(-4px); }
.pricing-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(0,212,255,.4),transparent); }

/* Buttons */
.btn-primary { background:linear-gradient(135deg,#0099cc,#0055aa); color:#fff; font-weight:700; padding:14px 32px; border-radius:11px; box-shadow:0 6px 22px rgba(0,153,204,.32),0 0 0 1px rgba(0,212,255,.3); transition:all .25s; display:inline-flex; align-items:center; gap:8px; font-size:.95rem; letter-spacing:.01em; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,153,204,.55),0 0 0 1px rgba(0,212,255,.6); filter:brightness(1.12); }
.btn-secondary { background:rgba(17,37,56,.5); color:#c8dff0; font-weight:600; padding:14px 28px; border-radius:11px; border:1px solid #1a3550; transition:all .2s; display:inline-flex; align-items:center; gap:8px; backdrop-filter:blur(10px); font-size:.95rem; }
.btn-secondary:hover { border-color:#00d4ff; color:#00d4ff; background:rgba(0,212,255,.06); }
.btn-ghost { color:#c8dff0; font-weight:500; padding:10px 16px; border-radius:8px; transition:all .2s; }
.btn-ghost:hover { color:#00d4ff; }

/* Nav */
.nav-shadow { background:rgba(7,13,20,.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(26,53,80,.5); }

/* Details / FAQ */
details summary::-webkit-details-marker { display:none; }
details summary { list-style:none; }
details summary .icon { transition:transform .25s; color:#00d4ff; font-size:1.4rem; line-height:1; }
details[open] summary .icon { transform:rotate(45deg); }

/* Floating orbs */
.orb { position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; opacity:.18; will-change:transform; }
@media (prefers-reduced-motion: no-preference) {
  .orb { animation:orb-float 18s ease-in-out infinite; }
  @keyframes orb-float { 0%,100% { transform:translate(0,0) scale(1) } 50% { transform:translate(30px,-20px) scale(1.05) } }
}

/* Stat + step */
.stat-card { background:rgba(13,28,46,.6); border:1px solid #1a3550; border-radius:12px; padding:14px 16px; transition:all .25s; }
.stat-card:hover { border-color:rgba(0,212,255,.4); }
.step-num { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#00d4ff,#00b4d8); color:#070d14; font-family:'Oxanium',sans-serif; font-weight:800; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:0 0 24px rgba(0,212,255,.35); }

/* Pulse dot */
.pulse-dot { position:relative; }
.pulse-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; background:#00ff88; opacity:.4; animation:pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform:scale(.8); opacity:.5 } 100% { transform:scale(2.2); opacity:0 } }

/* Ribbon */
.ribbon { position:absolute; top:14px; right:-32px; transform:rotate(35deg); padding:4px 40px; font-size:.6rem; font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:.1em; }

/* Language toggle */
[data-lang="es"] .en { display:none; } [data-lang="en"] .es { display:none; }

section { position:relative; }

/* ============== MOTION utilities (multi-page) ============== */

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal-2 { transition-delay:.09s } .reveal-3 { transition-delay:.18s } .reveal-4 { transition-delay:.27s } .reveal-5 { transition-delay:.36s } .reveal-6 { transition-delay:.45s }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none } }

/* Hover lift */
.lift { transition:transform .25s cubic-bezier(.2,.9,.3,1.1), box-shadow .25s, border-color .25s; }
.lift:hover { transform:translateY(-5px); box-shadow:0 18px 50px rgba(0,212,255,.14); border-color:rgba(0,212,255,.4); }

/* Float */
@keyframes floaty { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-9px) } }
.floaty { animation:floaty 5s ease-in-out infinite; }

/* Feature icon box + text */
.ficon { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; }
.ficon.cyan { background:rgba(0,212,255,.12); border:1px solid rgba(0,212,255,.35); }
.ficon.green { background:rgba(0,255,136,.12); border:1px solid rgba(0,255,136,.35); }
.ficon.amber { background:rgba(255,183,0,.12); border:1px solid rgba(255,183,0,.35); }
.fh { font-family:'Oxanium',sans-serif; font-weight:700; color:#eef6ff; font-size:1.05rem; margin-bottom:.45rem; line-height:1.25; }
.fp { color:#7aa3c0; font-size:.85rem; line-height:1.55; }

/* Tabs */
.tabbtn { cursor:pointer; transition:all .2s; }
.tabbtn:hover { color:#00d4ff; border-color:rgba(0,212,255,.4); }
.tabbtn.active { background:linear-gradient(135deg,rgba(0,212,255,.16),rgba(0,255,136,.08)) !important; border-color:rgba(0,212,255,.55) !important; color:#00d4ff !important; }

/* Marquee */
.marquee-track { animation:marquee 36s linear infinite; }
@keyframes marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }

/* Browser shell mockup */
.browser-shell { background:#0b1622; border:1px solid #1f3f60; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 50px rgba(0,212,255,.1); overflow:hidden; }
.browser-bar { background:linear-gradient(180deg,#0f1f30,#0b1622); padding:9px 14px; display:flex; align-items:center; gap:6px; border-bottom:1px solid #1a3550; }
.browser-dot { width:11px; height:11px; border-radius:50%; }
.mini-bar { flex:1; background:linear-gradient(180deg,#00d4ff,#00b4d8); border-radius:3px 3px 0 0; }

/* Capability marquee */
.chip { flex-shrink:0; display:inline-flex; align-items:center; gap:8px; background:linear-gradient(180deg,rgba(13,28,46,.85),rgba(7,13,20,.75)); border:1px solid rgba(31,63,96,.6); border-radius:100px; padding:9px 16px; font-size:.85rem; color:#9fc1da; white-space:nowrap; }
.chip .dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.marquee-mask { -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }

/* Animated gradient border */
.gborder { position:relative; }
.gborder::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(120deg,rgba(0,212,255,.55),rgba(0,255,136,.35),transparent 60%,rgba(0,212,255,.45)); background-size:220% 220%; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:gborder 7s linear infinite; pointer-events:none; }
@keyframes gborder { 0%{background-position:0% 50%} 100%{background-position:220% 50%} }

/* Hero gradient mesh */
.mesh::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(620px circle at 18% 12%,rgba(0,212,255,.10),transparent 42%),radial-gradient(520px circle at 86% 28%,rgba(0,255,136,.08),transparent 46%); }