/* Hero chip — discrete intro label */
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(220, 235, 255, 0.85);
  background: rgba(10, 82, 204, 0.12);
  border: 1px solid rgba(0, 180, 238, 0.22);
  backdrop-filter: blur(8px);
  margin-bottom: 22px;
  animation: fuUp 0.7s 0.04s ease both;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding: 36px 24px 24px;
  text-align: center;
}
@media (min-width: 900px) {
  .hero { padding: 48px 24px 40px; min-height: 80vh; justify-content: center; }
}
.hero h1 {
  font-size:clamp(34px,6vw,74px);
  font-weight:900; line-height:1.08; letter-spacing:-2.5px;
  color:var(--tx); max-width:880px;
  animation:fuUp 0.80s 0.08s ease both;
}
/* 3D dashboard illustration — desktop only */
.hero-illust { display:block; margin-top:44px; perspective:1200px; animation:fuUp 0.85s 0.30s ease both; width:100%; }
@media (min-width:900px) {
  .hero { padding-top:60px; }
  .hero-illust { margin-top:56px; perspective:1400px; }
}
.illust-3d {
  width: min(580px, 92vw);
  max-width: 92vw;
  margin: 0 auto;
  transform: rotateX(16deg) rotateY(10deg) rotateZ(-1.5deg);
  transform-style: preserve-3d;
  position: relative;
  filter: drop-shadow(0 20px 40px rgba(0, 90, 220, 0.35));
  animation: floatY 5.5s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: rotateX(16deg) rotateY(10deg) rotateZ(-1.5deg) translateY(0); }
  50%      { transform: rotateX(16deg) rotateY(10deg) rotateZ(-1.5deg) translateY(-10px); }
}
.illust-3d::before {
  content: '';
  position: absolute;
  inset: -10% -8%;
  background: radial-gradient(ellipse at center, rgba(0,130,230,0.55) 0%, rgba(0,90,220,0.30) 35%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
  animation: ledPulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ledPulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.illust-frame {
  background: rgba(8, 28, 70, 0.78);
  backdrop-filter: blur(14px);
  border: 1.8px solid #00aaee;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  height: 200px;
  box-shadow: 0 22px 60px rgba(0, 60, 160, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (min-width: 900px) {
  .illust-frame { grid-template-columns: 90px 1fr; gap: 12px; height: 240px; padding: 14px; border-radius: 18px; }
}
.illust-side { background:rgba(0,110,230,0.14); border-radius:12px; padding:12px 8px; display:flex; flex-direction:column; gap:8px;
  border: 1.5px solid #00aaee;
}
.illust-side-dot { width:14px; height:14px; border-radius:50%; background:linear-gradient(110deg,#0a7ed8,#5fcaff); margin-bottom:4px; }
.illust-side-line { height:6px; border-radius:4px; background:rgba(0,180,238,0.22); }
.illust-side-line.active { background:linear-gradient(110deg,#0a7ed8,#00aaee 50%,#5fcaff); background-size:130% auto; animation:gaPulse 1.17s ease-in-out infinite; }
.illust-side-line.s1 { width:70%; }
.illust-side-line.s2 { width:100%; }
.illust-side-line.s3 { width:60%; }
.illust-side-line.s4 { width:80%; }
.illust-side-line.s5 { width:50%; }
.illust-main { display:flex; flex-direction:column; gap:12px; padding:4px; }
.illust-main-top { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.illust-stat { background:rgba(0,130,230,0.10); border: 1.5px solid #00aaee; border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.illust-stat-label { height:5px; width:50%; border-radius:3px; background:rgba(0,180,238,0.30); }
.illust-stat-value { height:10px; width:70%; border-radius:4px; background:linear-gradient(110deg,#0a7ed8,#00aaee 50%,#5fcaff); background-size:130% auto; animation:gaPulse 1.17s ease-in-out infinite; }
.illust-chart { flex:1; background:rgba(0,130,230,0.08); border: 1.8px solid #00aaee; border-radius:10px; padding:12px; display:flex; align-items:center; gap:14px; }
.illust-donut {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    #00aaee 0deg,
    #5fcaff 180deg,
    #5fcaff 250deg,
    rgba(10,82,204,0.40) 250deg,
    rgba(10,82,204,0.40) 360deg
  );
  position: relative;
  flex-shrink: 0;
}
.illust-donut::before { content:''; position:absolute; inset:14px; border-radius:50%; background:rgba(8,28,70,1); }
.illust-bars { flex:1; display:flex; align-items:flex-end; gap:6px; height:60px; }
.illust-bar { flex:1; border-radius:3px 3px 0 0; background:linear-gradient(to top, #0a7ed8, #5fcaff); background-size:130% auto; animation:gaPulse 1.17s ease-in-out infinite; }
.illust-bar.b1 { height:35%; } .illust-bar.b2 { height:60%; } .illust-bar.b3 { height:45%; }
.illust-bar.b4 { height:80%; } .illust-bar.b5 { height:55%; } .illust-bar.b6 { height:90%; } .illust-bar.b7 { height:70%; }
@keyframes fuUp { from{opacity:0;transform:translateY(26px);} to{opacity:1;transform:translateY(0);} }

/* Chips — gradient border + gradient text, no white */
.chips { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:30px; animation:fuUp 0.80s 0.22s ease both; }
.chip {
  position:relative; border-radius:var(--rp); padding:8px 18px;
  font-size:13px; font-weight:600; overflow:hidden;
  white-space:nowrap;
}
/* gradient border */
.chip::before {
  content:''; position:absolute; inset:0; border-radius:var(--rp);
  padding:1.5px;
  background: linear-gradient(110deg,#0a52cc 0%,#0a7ed8 50%,#00aaee 100%);
  background-size:130% auto;
  animation: gaPulse 1.17s ease-in-out infinite;
  animation-delay:0s;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* subtle tint bg */
[data-theme="light"] .chip { background:rgba(10,82,204,0.10); color:#000; }
[data-theme="dark"]  .chip { background:rgba(0,170,238,0.10); color:#fff; }