/* style.css — Cyber-Tech Neon Blue master UI
   Performance-first, accessible, polished micro-interactions.
*/

/* ---------- variables ---------- */
:root{
  --bg-900: #03050a;
  --bg-800: #051026;
  --neon-1: #00b7ff;
  --neon-2: #4f46e5;
  --muted: #c9e7ff;
  --glass-a: rgba(255,255,255,0.03);
  --glass-b: rgba(255,255,255,0.02);
  --radius: 14px;
  --container: 1200px;
  --ease: cubic-bezier(.2,.9,.2,1);
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--muted);
  background: linear-gradient(180deg, var(--bg-900), var(--bg-800));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- animated gradient background ---------- */
.bg-gradient {
  position: fixed; inset: 0; z-index: -4;
  background: linear-gradient(120deg, rgba(6,11,41,0.66), rgba(4,6,25,0.66));
  pointer-events: none;
  /* slow flowing gradient using pseudo-element layers */
}
.bg-gradient::before, .bg-gradient::after {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 10% 20%, rgba(79,70,229,0.12) 0%, transparent 20%),
              radial-gradient(circle at 85% 80%, rgba(0,183,255,0.12) 0%, transparent 22%);
  mix-blend-mode: screen;
  animation: gradientMove 22s linear infinite;
  filter: blur(32px);
  opacity: 0.95;
}
@keyframes gradientMove {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-6%,4%,0) scale(1.04); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* ---------- particle canvas sits above gradient but below UI */
#particle-canvas { position: fixed; inset: 0; z-index: -3; pointer-events: none; }

/* ---------- container & glass ---------- */
.container { width: 92%; max-width: var(--container); margin: 0 auto; }
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 12px 40px rgba(4,8,24,0.6);
}

/* ---------- header ---------- */
.header { position: sticky; top: 14px; z-index: 60; padding: 14px 0; }
.header-inner { display:flex; gap:16px; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--muted); }
.logo { font-family: "Poppins", sans-serif; font-weight:700; color: var(--neon-2); font-size:1.05rem; letter-spacing: .4px; }
.dot { color: var(--neon-1); font-weight:700; font-size:0.75rem; }
.nav { display:flex; gap:10px; align-items:center; }
.nav-link { color:var(--muted); text-decoration:none; font-weight:600; padding:6px 8px; border-radius:8px; }
.nav-link:hover, .nav-link:focus { color:var(--neon-1); background: rgba(0,183,255,0.04); outline:none; }

/* ---------- actions/buttons ---------- */
.actions { display:flex; gap:10px; align-items:center; }
.icon-btn { background:transparent; border-radius:10px; padding:8px; border:1px solid transparent; color:var(--muted); cursor:pointer; font-size:1.05rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:10px 16px; font-weight:700; cursor:pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); -webkit-tap-highlight-color: transparent; }
.btn-primary { background: linear-gradient(90deg, var(--neon-1), var(--neon-2)); color:#03030a; box-shadow: 0 10px 36px rgba(14,183,255,0.08); }
.btn-primary:hover { transform: translateY(-4px); box-shadow: 0 28px 72px rgba(14,183,255,0.14); filter: saturate(1.06); }
.btn-outline { background: transparent; border: 1px solid rgba(255,255,255,0.04); color: var(--muted); }
.btn-ghost { background:transparent; border:1px solid rgba(255,255,255,0.03); color:var(--muted); }

/* animated button micro-patterns: ripple + neon glow (ripple handled by JS) */
.btn-animated { position: relative; overflow: hidden; }

/* magnetic subtle effect hint (JS modifies transform) */
.magnetic { will-change: transform; }

/* tiny sizes */
.btn-small { padding:8px 12px; font-size:0.9rem; border-radius:10px; }

/* text link */
.text-link { color: var(--neon-1); text-decoration:none; font-weight:600; margin-left:12px; }

/* ---------- hero ---------- */
.hero { display:flex; gap:28px; align-items:stretch; padding:64px 0 48px; }
.hero-left { flex:1; max-width:62ch; }
.hero-title { font-family: "Poppins", sans-serif; font-size: 2.6rem; color: var(--neon-1); margin:0 0 12px; line-height:1.02; text-shadow: 0 10px 30px rgba(0,183,255,0.06); }
.glow-text { background: linear-gradient(90deg, rgba(0,183,255,0.9), rgba(79,70,229,0.9)); -webkit-background-clip: text; color: transparent; }
.hero-sub { color:#cfeeff; margin:6px 0 18px; min-height:40px; }

/* ctas & stats */
.cta-row { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.mini-stats { list-style:none; display:flex; gap:18px; padding:0; margin:0 0 18px; color:#9fb8d6; }
.hero-counters { display:flex; gap:12px; margin-top:8px; }
.counter { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02)); padding:12px 14px; border-radius:10px; min-width:92px; text-align:center; }

/* ---------- hero-right visual card ---------- */
.hero-right { width:420px; flex-shrink:0; padding:8px; perspective: 900px; }
.hero-media { position:relative; border-radius:12px; overflow:hidden; }
.hero-media img { width:100%; display:block; border-radius:10px; transition: transform .6s var(--ease); transform-origin:center; }
.media-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:12px; pointer-events:none; }
.badge { align-self:flex-start; background: rgba(0,183,255,0.14); color: var(--neon-1); font-weight:700; padding:6px 8px; border-radius:8px; backdrop-filter: blur(6px); }
.quick-stats { display:flex; gap:10px; align-items:center; pointer-events:auto; }
.quick-stats div { background: rgba(0,0,0,0.26); padding:6px 8px; border-radius:8px; color:#bfe6ff; }

/* ---------- sections, grid, cards ---------- */
.section { padding:48px 0; }
.section-head { text-align:center; margin-bottom:18px; }
.section-title { font-size:1.5rem; color: var(--neon-2); margin-bottom:8px; font-weight:700; }
.section-sub { color:#9fb0d0; margin-bottom:16px; }
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { padding:16px; border-radius:12px; transition: transform .22s var(--ease), box-shadow .22s var(--ease); opacity: 0; transform: translateY(20px); }
.card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(4,8,24,0.6); }
.reveal-visible { opacity: 1; transform: translateY(0); }

/* feature specifics */
.feature-media { height:150px; overflow:hidden; border-radius:10px; margin-bottom:12px; }
.feature-media img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.feature:hover .feature-media img { transform: scale(1.06); }
.feature-foot { display:flex; gap:8px; margin-top:10px; }
.chip { background: rgba(255,255,255,0.03); padding:6px 8px; border-radius:8px; font-size:0.85rem; color:#d6eeff; }

/* workflow panel & list */
.workflow-panel { display:flex; gap:24px; padding:18px; align-items:flex-start; }
.workflow-list { flex:1; margin:0; padding-left:18px; }
.workflow-cta { display:flex; flex-direction:column; gap:8px; }

/* plan & pricing */
.plan .price { font-weight:800; font-size:1.4rem; margin:8px 0; }
.plan-features { list-style:none; padding:0; margin:0 0 12px; }

/* case study */
.case-study { padding:18px; }

/* testimonial */
.testimonial { display:flex; flex-direction:column; gap:16px; align-items:flex-start; padding:20px; }
.testimonial-author { font-size:0.9rem; color:#9fb8d6; margin-top:8px; }

/* footer */
.footer { padding:18px 0; border-top:1px solid rgba(255,255,255,0.03); margin-top:36px; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:12px; }

/* modal */
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.65); z-index:120; }
.modal.hidden { display:none; }
.modal-panel { width:94%; max-width:520px; padding:22px; border-radius:12px; }

/* form */
.demo-form { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.demo-form input { padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.01); color:var(--muted); }

/* small helpers */
.link { color: var(--neon-1); text-decoration: none; font-weight:700; }

/* responsive */
@media (max-width: 980px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .hero { flex-direction: column-reverse; gap:20px; padding:36px 0; }
  .hero-right { width:100%; }
  .workflow-panel { flex-direction: column; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  #particle-canvas, .bg-gradient::before, .bg-gradient::after { display:none; }
}