*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter',sans-serif;
  background:#050505;
  color:#EAEAEA;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

#network-bg{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  z-index:-2;
}

body::before{
  content:"";
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  background:
    radial-gradient(ellipse at 10% 20%,rgba(47,107,255,0.12),transparent 45%),
    radial-gradient(ellipse at 90% 75%,rgba(47,107,255,0.08),transparent 40%);
  z-index:-1;
}

/* ======= NAVBAR ======= */
.navbar{
  position:fixed;width:100%;
  background:rgba(5,5,5,0.4);
  backdrop-filter:blur(30px);
  border-bottom:1px solid rgba(47,107,255,0.12);
  z-index:1000;
}
.navbar-inner{
  display:flex;
  align-items:center;
  padding:16px 48px;
  position:relative;
}

/* Logo: fixed width left */
.logo{
  font-weight:700;letter-spacing:4px;font-size:16px;
  width:200px;flex-shrink:0;
  z-index:2;
  padding-left:16px;
}
.logo span{color:#2F6BFF;}

/* Nav: absolutely centered in the bar */
nav#main-nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;gap:36px;
  z-index:1;
}
nav#main-nav a{
  color:#777;text-decoration:none;
  font-size:13px;letter-spacing:1.5px;
  text-transform:uppercase;
  position:relative;transition:color 0.3s;
  white-space:nowrap;
}
nav#main-nav a::after{
  content:"";position:absolute;
  bottom:-5px;left:0;
  width:0%;height:1px;
  background:#2F6BFF;transition:0.3s;
}
nav#main-nav a:hover{color:#fff;}
nav#main-nav a:hover::after{width:100%;}

/* Right side: lang btn + hamburger */
.navbar-right{
  margin-left:auto;
  display:flex;align-items:center;gap:12px;
  z-index:2;
}

.lang-btn{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  color:#ccc;
  padding:6px 14px;
  border-radius:20px;
  font-size:13px;
  cursor:pointer;
  display:flex;align-items:center;gap:6px;
  transition:0.3s;font-family:'Inter',sans-serif;
}
.lang-btn:hover{border-color:#2F6BFF;color:#fff;}

/* Hamburger — hidden on desktop */
.hamburger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  width:36px;height:36px;gap:5px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;cursor:pointer;
  padding:0;transition:0.3s;
}
.hamburger span{
  display:block;width:16px;height:1.5px;
  background:#ccc;border-radius:2px;
  transition:0.35s;transform-origin:center;
}
.hamburger:hover{border-color:#2F6BFF;}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* Mobile dropdown menu */
.mobile-menu{
  display:none;
  position:fixed;top:57px;right:0;
  width:220px;
  background:rgba(8,8,8,0.97);
  border:1px solid rgba(47,107,255,0.15);
  border-top:none;
  border-radius:0 0 0 14px;
  z-index:999;
  flex-direction:column;
  overflow:hidden;
  transform:translateY(-10px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease,transform 0.25s ease;
}
.mobile-menu.open{
  display:flex;
  opacity:1;transform:translateY(0);
  pointer-events:all;
}
.mobile-menu a{
  padding:16px 28px;
  color:#888;text-decoration:none;
  font-size:13px;letter-spacing:2px;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:0.2s;
}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu a:hover{color:#fff;background:rgba(47,107,255,0.08);padding-left:36px;}

@media(max-width:768px){
  .navbar-inner{padding:14px 20px;}
  nav#main-nav{display:none;}
  .hamburger{display:flex;}
  .logo{width:auto;}
}


/* ======= HERO ======= */
.hero{
  height:85vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding-top:80px;
}
.hero h1{
  font-size:72px;letter-spacing:10px;font-weight:700;
  background:linear-gradient(100deg,#ffffff 40%,#2F6BFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fadeUp 1.4s ease;
}
.hero p{
  margin-top:24px;font-size:17px;color:#888;
  letter-spacing:1px;animation:fadeUp 1.7s ease;
}

/* ======= SECTIONS ======= */
.section{
  padding:140px 8%;
  text-align:center;
  opacity:0;transform:translateY(70px);
  transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.19,1,.22,1);
}
.section.visible{opacity:1;transform:translateY(0);}

.section h2{
  font-size:42px;margin-bottom:16px;
  font-weight:700;letter-spacing:0px;
}

.section-sub{
  font-size:12px;letter-spacing:3px;
  color:#555;margin-bottom:60px;
}

/* ======= FEATURED BLOCK ======= */
.featured-block{
  margin-bottom:60px;
}
.featured-label{
  font-size:12px;letter-spacing:3px;color:#eab308;
  margin-bottom:16px;font-weight:600;
}
.card-featured{
  max-width:520px;
  border-color:rgba(47,107,255,0.2);
  background:rgba(47,107,255,0.05);
}
.card-featured:hover{
  border-color:rgba(47,107,255,0.7);
  box-shadow:0 0 40px rgba(47,107,255,0.4),0 20px 60px rgba(0,0,0,0.7);
}
.card-sub{font-size:12px;color:#2F6BFF;letter-spacing:1px;margin-bottom:8px;font-weight:500;}

/* ======= SECTOR BLOCKS ======= */
.sector-block{margin-bottom:60px;text-align:left;}

.sector-label{
  display:flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:3px;
  color:#555;text-transform:uppercase;
  margin-bottom:22px;padding-left:4px;
}

/* ======= GRID + CARDS ======= */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

.card{
  background:rgba(14,14,14,0.7);
  border:1px solid rgba(255,255,255,0.06);
  padding:30px 28px 28px;
  border-radius:14px;
  backdrop-filter:blur(16px);
  transition:all 0.35s ease;
  position:relative;overflow:hidden;
  cursor:pointer;
  text-align:left;
}
.card::before{
  content:"";
  position:absolute;top:0;left:-120%;
  width:120%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(47,107,255,0.15),transparent);
  transition:0.65s;
}
.card:hover::before{left:120%;}
.card:hover{
  border-color:rgba(47,107,255,0.5);
  transform:translateY(-6px);
  box-shadow:0 0 24px rgba(47,107,255,0.3),0 16px 50px rgba(0,0,0,0.7);
}

.card-icon{
  width:28px;height:28px;
  margin-bottom:14px;
  display:block;
}

.card h3{font-size:18px;font-weight:600;margin-bottom:6px;color:#fff;}
.card p{font-size:14px;color:#666;}

/* STATUS BADGES */
.status-badge{
  position:absolute;top:18px;right:18px;
  font-size:10px;letter-spacing:1.5px;
  padding:4px 10px;border-radius:20px;
  font-weight:600;
}
.status-badge.active{background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.3);}
.status-badge.beta{background:rgba(234,179,8,0.15);color:#eab308;border:1px solid rgba(234,179,8,0.3);}
.status-badge.dev{background:rgba(47,107,255,0.15);color:#2F6BFF;border:1px solid rgba(47,107,255,0.3);}

/* ======= PARTNERS ======= */
.partners-rows{
  display:flex;flex-direction:column;gap:16px;
  margin-top:50px;
}

.partners-track-wrap{
  overflow:hidden;
  width:100%;
  position:relative;
}
.partners-track-wrap::before,
.partners-track-wrap::after{
  content:"";position:absolute;top:0;
  width:140px;height:100%;z-index:2;pointer-events:none;
}
.partners-track-wrap::before{left:0;background:linear-gradient(to right,#050505,transparent);}
.partners-track-wrap::after{right:0;background:linear-gradient(to left,#050505,transparent);}

.partners-track{
  display:flex;gap:14px;
  width:max-content;
}

.row-forward{
  animation:scrollForward 30s linear infinite;
}
.row-reverse{
  animation:scrollReverse 30s linear infinite;
}

.partners-track-wrap:hover .partners-track{
  animation-play-state:paused;
}

.partner-pill{
  background:rgba(18,18,18,0.8);
  border:1px solid rgba(255,255,255,0.07);
  padding:10px 22px;
  border-radius:30px;
  font-size:14px;color:#999;
  white-space:nowrap;
  transition:border-color 0.3s,color 0.3s;cursor:default;
}
.partner-pill:hover{border-color:#2F6BFF;color:#fff;}

@keyframes scrollForward{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@keyframes scrollReverse{
  0%{transform:translateX(-50%);}
  100%{transform:translateX(0);}
}

/* ======= SERVICES ======= */
.services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:60px;
  text-align:left;
}

.service-card{
  background:rgba(14,14,14,0.7);
  border:1px solid rgba(255,255,255,0.06);
  padding:36px;border-radius:14px;
  backdrop-filter:blur(14px);
}
.service-card svg{margin-bottom:16px;}
.service-card h3{font-size:20px;font-weight:600;margin-bottom:12px;}
.service-card p{font-size:14px;color:#777;line-height:1.7;}

.contribution-card{
  background:rgba(14,14,14,0.7);
  border:1px solid rgba(255,255,255,0.06);
  padding:32px;border-radius:14px;
  backdrop-filter:blur(14px);
}
.contribution-header{
  display:flex;align-items:center;gap:10px;
  font-size:17px;font-weight:600;
  margin-bottom:28px;
}

.contrib-bars{display:flex;flex-direction:column;gap:14px;}
.contrib-row{
  display:flex;align-items:center;gap:16px;
  font-size:13px;color:#777;
}
.contrib-row span{width:90px;text-align:right;flex-shrink:0;}
.bar-wrap{
  flex:1;height:8px;
  background:rgba(255,255,255,0.05);
  border-radius:4px;overflow:hidden;
}
.bar-fill{
  height:100%;background:#2F6BFF;
  border-radius:4px;
  transition:width 1.5s ease;
}
.contrib-pct{
  font-size:12px;color:#2F6BFF;
  font-weight:600;width:36px;text-align:left;
  flex-shrink:0;
}

.progress-label{
  display:flex;justify-content:space-between;
  font-size:11px;letter-spacing:1.5px;
  color:#555;margin-top:28px;margin-bottom:8px;
}
.progress-label span{color:#2F6BFF;font-weight:600;}
.progress-bar-wrap{
  height:5px;background:rgba(255,255,255,0.06);
  border-radius:3px;overflow:hidden;
}
.progress-bar-fill{
  height:100%;
  background:linear-gradient(90deg,#2F6BFF,#6fa3ff);
  border-radius:3px;
}

.service-stats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;margin-top:24px;
}

.stat-box{
  background:rgba(14,14,14,0.7);
  border:1px solid rgba(255,255,255,0.06);
  padding:28px 20px;border-radius:14px;
  text-align:left;
  transition:0.3s;
}
.stat-box:hover{border-color:rgba(47,107,255,0.4);transform:translateY(-4px);}
.stat-num{display:block;font-size:32px;font-weight:700;color:#2F6BFF;margin-bottom:6px;}
.stat-lbl{display:block;font-size:15px;font-weight:600;color:#ddd;margin-bottom:4px;}
.stat-sub{display:block;font-size:11px;letter-spacing:1.5px;color:#555;}

/* ======= ANALYTICS ======= */
.chart-container{
  background:rgba(12,12,12,0.8);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:16px;
  padding:40px;
  margin:60px 0 0;
  height:380px;
}

.metrics-dashboard{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:24px;
}

.metric-box{
  background:rgba(14,14,14,0.7);
  border:1px solid rgba(255,255,255,0.06);
  padding:32px 24px;
  border-radius:14px;
  text-align:center;
  transition:0.35s;
}
.metric-box:hover{
  border-color:rgba(47,107,255,0.4);
  transform:translateY(-5px);
  box-shadow:0 0 20px rgba(47,107,255,0.2);
}
.metric-number{font-size:44px;font-weight:700;color:#fff;margin-bottom:10px;}
.metric-label{font-size:12px;letter-spacing:2px;color:#666;}

/* ======= FOOTER ======= */
footer{
  border-top:1px solid rgba(255,255,255,0.05);
  padding:70px;text-align:center;
  color:#444;margin-top:100px;
}
.footer-logo{font-size:16px;font-weight:700;letter-spacing:5px;margin-bottom:10px;}
.footer-logo span{color:#2F6BFF;}
.footer-tagline{font-size:11px;letter-spacing:4px;color:#444;margin-bottom:24px;}
.footer-email{
  display:inline-flex;align-items:center;gap:8px;
  color:#666;text-decoration:none;font-size:14px;
  transition:0.3s;margin-bottom:36px;
}
.footer-email:hover{color:#2F6BFF;}
.footer-copy{font-size:12px;letter-spacing:2px;color:#333;}

/* ======= PRODUCT OVERLAY ======= */
.overlay{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  background:#050505;
  z-index:2000;
  overflow-y:auto;
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}
.overlay.active{opacity:1;pointer-events:all;}
.overlay.hidden{display:none;}

.overlay-inner{padding:60px 8%;}

.back-btn{
  background:none;border:none;
  color:#666;font-size:14px;
  cursor:pointer;font-family:'Inter',sans-serif;
  margin-bottom:60px;display:flex;align-items:center;gap:8px;
  transition:color 0.3s;padding:0;
}
.back-btn:hover{color:#fff;}

.overlay-content{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:60px;align-items:start;
}

.overlay-header{
  display:flex;align-items:center;gap:24px;
  margin-bottom:28px;
}
.overlay-icon{
  width:72px;height:72px;
  background:rgba(47,107,255,0.12);
  border:1px solid rgba(47,107,255,0.25);
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.overlay-icon svg{width:32px;height:32px;}

.overlay-main h1{font-size:44px;font-weight:700;margin-bottom:4px;}
.ov-sector{font-size:15px;color:#2F6BFF;font-weight:500;}
.overlay-main > p{
  font-size:17px;color:#999;line-height:1.75;
  margin-top:20px;margin-bottom:40px;
  max-width:600px;
}

.ov-features h3{
  font-size:16px;font-weight:600;
  margin-bottom:20px;
  display:flex;align-items:center;gap:8px;
}
.features-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.feature-item{
  background:rgba(18,18,18,0.8);
  border:1px solid rgba(255,255,255,0.06);
  padding:14px 18px;border-radius:10px;
  font-size:14px;color:#ccc;
  display:flex;align-items:center;gap:10px;
}
.feature-item svg{flex-shrink:0;}

.sidebar-card{
  background:rgba(14,14,14,0.9);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:16px;padding:32px;
}
.sidebar-label{
  font-size:11px;letter-spacing:2px;color:#555;
  margin-bottom:12px;
}
.sidebar-status{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:600;
  margin-bottom:4px;
}
.sidebar-status .dot{
  width:8px;height:8px;border-radius:50%;
}
.sidebar-status .dot.active{background:#22c55e;}
.sidebar-status .dot.beta{background:#eab308;}
.sidebar-status .dot.dev{background:#2F6BFF;}
.sidebar-release{
  font-size:15px;color:#ccc;
  display:flex;align-items:center;gap:8px;
}

.btn-action{
  width:100%;padding:14px;
  background:#2F6BFF;border:none;
  border-radius:10px;color:#fff;
  font-size:15px;font-weight:600;
  cursor:pointer;font-family:'Inter',sans-serif;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:0.3s;
}
.btn-action:hover{background:#4a82ff;transform:translateY(-2px);}
.btn-action.disabled{
  background:rgba(255,255,255,0.07);
  color:#555;cursor:default;
}
.btn-action.disabled:hover{transform:none;background:rgba(255,255,255,0.07);}

/* ======= ANIMATIONS ======= */
@keyframes fadeUp{
  0%{opacity:0;transform:translateY(40px);}
  100%{opacity:1;transform:translateY(0);}
}

/* ======= RESPONSIVE ======= */
@media(max-width:900px){
  .navbar{padding:16px 24px;}
  .hero h1{font-size:42px;letter-spacing:5px;}
  .section{padding:100px 5%;}
  .services-grid{grid-template-columns:1fr;}
  .metrics-dashboard,.service-stats{grid-template-columns:repeat(2,1fr);}
  .overlay-content{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr;}
}