:root{
  --bg:#0A1624;          /* slightly lighter than #030f1c for modern look */
  --bg-deep:#030f1c;
  --card:#0f2036;
  --accent:#1E90FF;      /* HyperSui blue */
  --accent-2:#5aa9ff;
  --muted:#9fb0c7;
  --white:#ffffff;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--white);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(30,144,255,0.08), transparent 60%),
    radial-gradient(1000px 500px at 90% -20%, rgba(90,169,255,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  -webkit-font-smoothing:antialiased;
}

/* Layout helpers */
.container{max-width:1120px;margin:0 auto;padding:24px}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(6,20,39,.75);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand__logo{height:36px}
.brand__name{font-weight:800;letter-spacing:.2px}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:10px}
.nav a:hover{color:var(--white);background:rgba(255,255,255,.04)}

/* Buttons */
.btn{border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--white);
  border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;transition:.25s}
.btn:hover{background:rgba(255,255,255,.05)}
.btn--primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:#041018}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(30,144,255,.35)}
.btn--lg{padding:14px 24px;font-size:16px;border-radius:14px}

/* Hero */
.hero{position:relative;min-height:76vh;display:grid;place-items:center;text-align:center}
.hero__content h1{font-size:40px;line-height:1.05;margin:0 0 10px}
.hero__lead{color:var(--muted);max-width:760px;margin:0 auto 18px}
.hero__cta{margin-top:8px}
.flare{position:absolute;border-radius:999px;filter:blur(40px);opacity:.35;pointer-events:none}
.flare--1{width:340px;height:340px;background:#1e90ff33;left:10%;top:15%}
.flare--2{width:420px;height:420px;background:#5aa9ff22;right:10%;bottom:10%}

/* About */
.about{padding:72px 0;text-align:center}
.about h2{font-size:28px;margin-bottom:8px}
.about .muted{max-width:820px;margin:0 auto 28px}
.stats{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:18px 22px;min-width:200px}
.stat__value{display:block;font-size:24px;font-weight:800;color:var(--accent)}
.stat__label{display:block;color:var(--muted);font-size:14px;margin-top:4px}

/* Policy */
.policy{padding:64px 0}
.policy h2{text-align:center;margin:0 0 14px}
.policy__list{max-width:820px;margin:0 auto;color:var(--muted);line-height:1.7}
.policy__list li{margin:10px 0}

/* Partners slider */
.partners{padding:72px 0 20px;text-align:center}
.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:12px;margin:0}
.partners h2{margin:8px 0 22px}
.logo-slider{position:relative;overflow:hidden}
.logo-track{
  display:flex;gap:18px;
  width:max-content;
  animation:scroll 38s linear infinite;
}
.logo-card{
  width:240px;height:110px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  transition:transform .25s, box-shadow .25s, background .25s;
}
.logo-card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(30,144,255,.25)}
.logo-card img{max-width:140px;max-height:56px;opacity:.9;filter:grayscale(15%) brightness(0.95)}
.logo-slider:hover .logo-track{animation-play-state:paused}

/* Infinite scroll keyframes:
   Track contains 16 cards (8 logos duplicated once).
   Move by exactly half the total width so the loop is seamless. */
@keyframes scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Popup */
.popup{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;z-index:80}
.popup.hidden{display:none}
.popup__card{background:var(--card);border:1px solid rgba(255,255,255,.08);
  padding:26px 28px;border-radius:14px;max-width:520px;text-align:center}

/* Footer */
.footer{margin-top:40px;border-top:1px solid rgba(255,255,255,.06);background:rgba(6,20,39,.6)}
.footer__inner{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:28px 24px}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__logo{height:34px}
.footer__contact .tg{display:flex;align-items:center;gap:10px;color:var(--white);text-decoration:none;
  border:1px solid rgba(255,255,255,.08);padding:8px 12px;border-radius:10px}
.footer__contact img{width:22px;height:22px}
.footer__legal{text-align:center;padding:8px 24px 24px}
.small{font-size:12px}
.muted{color:var(--muted)}

/* Reveal animation */
.fade-in{opacity:0;transform:translateY(34px);transition:opacity .8s ease, transform .8s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* A11y & motion */
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none}
  .fade-in{opacity:1;transform:none}
}

/* Responsive */
@media (max-width:860px){
  .nav{display:none}
  .hero__content h1{font-size:32px}
}
@media (max-width:560px){
  .brand__name{display:none}
  .logo-card{width:200px;height:96px}
  .logo-card img{max-width:120px;max-height:48px}
}
/* Enhanced Partner Logos Visibility & Hover Polish */
.logo-card {
  background: rgba(255, 255, 255, 0.08);  /* slightly lighter for contrast */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.logo-card img {
  max-width: 140px;
  max-height: 56px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  filter: brightness(1.1) contrast(1.05);
  opacity: 0.95;
}

/* Slight white glow + elevation effect */
.logo-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 20px rgba(30, 144, 255, 0.35);
}

/* Improve visibility for darker logos (Fireblocks, Pyth, etc.) */
.logo-card img[alt="Fireblocks"],
.logo-card img[alt="Pyth"] {
  filter: brightness(1.25) contrast(1.1);
}
/* Responsive sizing for logos */
@media (min-width: 1200px) {
  .logo-card img {
    width: 85%;
    height: 85%;
  }
}

@media (max-width: 992px) {
  .logo-card img {
    width: 80%;
    height: 80%;
  }
}

@media (max-width: 768px) {
  .logo-card img {
    width: 75%;
    height: 75%;
  }
}

@media (max-width: 480px) {
  .logo-card img {
    width: 70%;
    height: 70%;
  }
}


/* Optional: Smooth transition pause when hovering */
.logo-slider:hover .logo-track {
  animation-play-state: paused;
}
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(6, 20, 39, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 40px 0 24px;
}
.footer__contact {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}

.footer__contact .tg img {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 0 10px rgba(30,144,255,0.4)) brightness(1.2);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.footer__contact .tg img:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 15px rgba(30,144,255,0.6)) brightness(1.4);
}
.footer__contact .tg {
  position: relative;
}

.footer__contact .tg::before {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(30,144,255,0.25) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  filter: blur(20px);
}
/* ✨ Telegram Icon Breathing Glow Animation */
@keyframes glowPulse {
  0% {
    filter: drop-shadow(0 0 10px rgba(30,144,255,0.4)) brightness(1.2);
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(30,144,255,0.8)) brightness(1.35);
  }
  100% {
    filter: drop-shadow(0 0 10px rgba(30,144,255,0.4)) brightness(1.2);
  }
}

/* Apply the animation to the Telegram icon */
.footer__contact .tg img {
  width: 56px;
  height: 56px;
  animation: glowPulse 3.5s ease-in-out infinite;
  transition: transform 0.3s ease;
}

/* Optional hover enhancement (brighter on hover) */
.footer__contact .tg img:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 22px rgba(30,144,255,0.9)) brightness(1.5);
}