/* Pixy-like bright glass design (no heavy animations) */
:root{
  --mx:50%;
  --my:20%;
  --bg1:#0b1020;
  --bg2:#0b2a4a;
  --accent:#6d5efc;
  --accent2:#22d3ee;
  --text:#eaf2ff;
  --muted:rgba(234,242,255,.75);
  --glass:rgba(255,255,255,.08);
  --glass2:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.16);
  --shadow:0 20px 70px rgba(0,0,0,.45);
  --radius:18px;
}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(109,94,252,.35), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(34,211,238,.25), transparent 55%),
    radial-gradient(800px 500px at 50% 110%, rgba(16,185,129,.18), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  color:var(--text);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* top nav */
.navbar{
  background:rgba(255,255,255,.06)!important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  margin: 18px auto;
  max-width: 1100px;
  padding: 14px 18px;
}
.navbar a{color:var(--text)!important; text-decoration:none}
.navbar .navbar-nav .nav-link{opacity:.92}
.navbar .navbar-nav .nav-link:hover{opacity:1}
.navbar-toggler{border:none; outline:none}
.navbar-burger-line, .navbar-burger:before, .navbar-burger:after{background:var(--text)}

/* layout container */
.container{max-width:1100px}

/* hero */
.hero{
  max-width:1100px;
  margin: 10px auto 0;
  padding: 42px 18px 10px;
}
.hero-card{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 10px);
  padding: 34px 28px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero-card:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(800px 300px at 20% 0%, rgba(109,94,252,.35), transparent 60%),
              radial-gradient(700px 260px at 80% 10%, rgba(34,211,238,.28), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.hero-card > *{position:relative}
.hero h1{
  font-size: clamp(28px, 4vw, 44px);
  line-height:1.15;
  margin:0 0 10px;
  letter-spacing:.2px;
}
.hero p{margin:0; color:var(--muted); font-size: 16px; max-width: 68ch}

/* three buttons area */
.action-row{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:18px;
}
.btn-glass{
  appearance:none;
  border:1px solid var(--border);
  background: rgba(255,255,255,.08);
  color:var(--text);
  padding: 12px 16px;
  border-radius: 14px;
  font-weight:600;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
}
.btn-glass:hover{transform: translateY(-1px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22)}
.btn-glass:active{transform: translateY(0)}
.btn-primary-glow{
  background: linear-gradient(135deg, rgba(109,94,252,.95), rgba(34,211,238,.85));
  border-color: rgba(255,255,255,.22);
}
.btn-primary-glow:hover{background: linear-gradient(135deg, rgba(109,94,252,1), rgba(34,211,238,.95))}
.badge-pill{
  font-size:12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color: rgba(234,242,255,.9);
}

/* cards section */
.cards{
  max-width:1100px;
  margin: 18px auto 30px;
  padding: 0 18px 10px;
}
.card-glass{
  height:100%;
  background: rgba(255,255,255,.07);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
  padding: 22px 18px;
  transition: transform .18s ease, background .18s ease;
}
.card-glass:hover{transform: translateY(-2px); background: rgba(255,255,255,.09)}
.card-glass h3{
  font-size:18px; margin: 14px 0 6px;
}
.card-glass p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}
.card-icon{
  width:44px; height:44px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}
.card-icon img{width:22px; height:22px}

/* stats */
.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}
.stat{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 14px 14px;
}
.stat .num{font-size:22px; font-weight:800}
.stat .label{color:var(--muted); font-size:13px; margin-top:2px}

/* footer */
.footer-lite{
  max-width:1100px; margin: 18px auto 26px; padding: 0 18px;
  color: rgba(234,242,255,.70);
  text-align:center;
  font-size: 13px;
}

/* responsive */
@media (max-width: 992px){
  .navbar{margin: 12px 12px}
  .hero{padding: 24px 12px 6px}
  .cards{padding: 0 12px}
  .stats{grid-template-columns: 1fr; }
}



/* Background effects (blobs + noise + mouse glow) */
.bg-effects{position:fixed; inset:0; pointer-events:none; z-index:-1;}
.bg-effects .blob{
  position:absolute; width:520px; height:520px; border-radius:50%;
  filter: blur(60px);
  opacity:.38;
  transform: translate3d(0,0,0);
  animation: floaty 18s ease-in-out infinite;
  background: radial-gradient(circle at 30% 30%, rgba(109,94,252,.75), rgba(109,94,252,0) 62%);
}
.bg-effects .blob-1{left:-120px; top:-160px; animation-duration: 22s;}
.bg-effects .blob-2{
  right:-180px; top:40px; width:620px; height:620px; opacity:.32;
  animation-duration: 26s;
  background: radial-gradient(circle at 40% 35%, rgba(34,211,238,.70), rgba(34,211,238,0) 62%);
}
.bg-effects .blob-3{
  left:30%; bottom:-260px; width:720px; height:720px; opacity:.24;
  animation-duration: 30s;
  background: radial-gradient(circle at 40% 40%, rgba(16,185,129,.55), rgba(16,185,129,0) 62%);
}
.bg-effects .noise{
  position:absolute; inset:0; opacity:.055; mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
body:after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(900px 520px at var(--mx) var(--my), rgba(109,94,252,.22), transparent 60%);
  transition: background .2s ease;
}
@keyframes floaty{
  0%{transform: translate3d(0,0,0) scale(1);}
  50%{transform: translate3d(40px,-35px,0) scale(1.05);}
  100%{transform: translate3d(0,0,0) scale(1);}
}

/* Reveal animation */
.reveal, .card-glass, .hero-card{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
}
.in-view{opacity:1!important; transform: translateY(0)!important;}

/* Buttons */
.btn-glass{
  display:inline-flex; align-items:center; gap:10px;
  padding: 11px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--text);
  text-decoration:none!important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  box-shadow: 0 14px 40px rgba(0,0,0,.26);
  will-change: transform;
}
.btn-glass:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.22);
}
.btn-primary-glow{
  background: linear-gradient(135deg, rgba(109,94,252,.9), rgba(34,211,238,.75));
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 18px 55px rgba(109,94,252,.25), 0 18px 55px rgba(34,211,238,.12);
}
.btn-primary-glow:hover{box-shadow: 0 22px 65px rgba(109,94,252,.32), 0 22px 65px rgba(34,211,238,.18);}

/* Cards */
.card-glass{
  position:relative;
  overflow:hidden;
  padding: 22px 22px;
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
  height: 100%;
}
.card-glass:before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-60%);
  opacity:.0;
  transition: opacity .25s ease;
}
.card-glass:hover:before{opacity:.9; animation: shimmer 1.25s ease;}
@keyframes shimmer{
  0%{transform: translateX(-60%);}
  100%{transform: translateX(60%);}
}
.card-glass:hover{transform: translateY(-6px);}

/* Split section (API/Bot) */
.split{max-width:1100px; margin: 10px auto 60px; padding: 0 14px;}
.split-wrap{display:grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.pane{
  position:relative;
  overflow:hidden;
  padding: 22px 22px;
  border-radius: calc(var(--radius) + 8px);
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
.pane-head{display:flex; align-items:center; gap:8px; margin-bottom: 14px; opacity:.9;}
.dot{width:10px; height:10px; border-radius:999px; display:inline-block;}
.dot-a{background: rgba(255,93,93,.95);}
.dot-b{background: rgba(255,201,71,.95);}
.dot-c{background: rgba(94,255,155,.95);}
.pane-title{margin-left:6px; font-weight:700; letter-spacing:.4px; color: rgba(234,242,255,.92);}
.pane h2{font-size: 26px; line-height:1.18; margin: 6px 0 10px;}
.pane p{color: var(--muted); margin:0 0 14px;}
.mini-list{display:flex; flex-wrap:wrap; gap:10px; margin: 12px 0 16px;}
.mini{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(234,242,255,.88);
  font-size: 13px;
}
@media (max-width: 992px){
  .split-wrap{grid-template-columns: 1fr;}
}

/* Improve hero spacing */
.hero{max-width:1100px; margin: 12px auto 10px; padding: 0 14px;}
.hero-card{
  position:relative;
  overflow:hidden;
  padding: 34px 30px;
  border-radius: calc(var(--radius) + 10px);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
}
.hero-card:after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(700px 220px at 20% 0%, rgba(109,94,252,.26), transparent 65%),
              radial-gradient(700px 220px at 90% 10%, rgba(34,211,238,.18), transparent 65%);
  pointer-events:none;
}
.badge-pill{
  display:inline-flex; align-items:center;
  padding: 8px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(234,242,255,.90);
  font-weight:700;
  letter-spacing:.35px;
}
.stats .stat{background: rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.12);}

/* Navbar hover */
.navbar .nav-link{position:relative;}
.navbar .nav-link:after{
  content:""; position:absolute; left:8px; right:8px; bottom:2px;
  height:2px; border-radius:999px;
  background: linear-gradient(90deg, rgba(109,94,252,.95), rgba(34,211,238,.85));
  transform: scaleX(0); transform-origin:left;
  transition: transform .22s ease;
}
.navbar .nav-link:hover:after{transform: scaleX(1);}