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

body{
  font-family:'Inter', sans-serif;
  background:#0b1220;
  color:#fff;
}

/* WELCOME SCREEN */
.welcome-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at top, #1a1f3d, #0b1220 60%);
}

.welcome-container{
  width:1200px;
  max-width:95%;
  display:grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap:40px;
  align-items:center;
}

/* LEFT */
.welcome-title{
  font-size:160px;
  font-weight:900;
  line-height:.9;
}
.wel{color:#fff;display:block;}
.come{
  display:block;
  background:linear-gradient(90deg,#6b7cff,#9d6cff,#7b5cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.welcome-subtitle{
  margin-top:20px;
  font-size:22px;
  font-weight:600;
  opacity:.95;
}

.welcome-text{
  margin-top:14px;
  max-width:500px;
  line-height:1.6;
  opacity:.75;
  font-size:16px;
}

/* BUTTONS */
.welcome-buttons{
  margin-top:30px;
  display:flex;
  gap:18px;
}

.btn-primary{
  background:linear-gradient(90deg,#6c63ff,#9c6bff);
  padding:14px 28px;
  border-radius:10px;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px rgba(108,99,255,.25);
}

.btn-outline{
  border:1px solid rgba(255,255,255,.35);
  padding:14px 26px;
  border-radius:10px;
  text-decoration:none;
  color:#fff;
  font-weight:500;
  transition:background .18s ease, transform .18s ease;
}
.btn-outline:hover{
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
}

/* RIGHT */
.welcome-right{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ✅ LIGHTER glow: no big blur() */
.welcome-right::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background: radial-gradient(circle,
    rgba(90,140,255,0.22) 0%,
    rgba(90,140,255,0.08) 35%,
    rgba(0,0,0,0) 70%
  );
  opacity:.9;
  z-index:-1;
}

/* ✅ Hero image bigger + cheaper glow */
.hero-gavel{
  width:min(1400px, 100%);
  height:auto;
  opacity:.98;

  /* cheaper than multiple drop-shadows */
  filter: drop-shadow(0 0 26px rgba(120,170,255,.30));

  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

/* OPTIONAL: only enable blend-mode on bigger screens (costly) */
@media (min-width: 900px){
  .hero-gavel.is-dodge{
    mix-blend-mode: screen; /* cheaper alternative to color-dodge */
    filter:
      drop-shadow(0 0 18px rgba(120,170,255,.30))
      drop-shadow(0 0 44px rgba(120,170,255,.18));
  }
}

/* FLOAT */
@keyframes float{
  0%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
  100%{transform:translateY(0);}
}

/* RESPONSIVE */
@media (max-width:1000px){
  .welcome-container{
    grid-template-columns:1fr;
    text-align:center;
    gap:30px;
  }
  .welcome-title{font-size:90px;}
  .welcome-buttons{justify-content:center;}
  .welcome-right{margin-top:20px;}
  .welcome-right::before{width:420px;height:420px;}
}

/* Network canvas behind the gavel */
.welcome-right{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;              /* keeps network clipped to the right panel */
  border-radius: 24px;          /* optional: matches your rounded look */
}

/* Canvas sits behind gavel */
.net-canvas{
  position:absolute;
  inset: -10%;                  /* slightly larger so edges don’t show */
  width: 120%;
  height: 120%;
  z-index: 0;
  pointer-events:none;
  opacity: .9;
}

/* Ensure gavel is on top */
.hero-gavel{
  position: relative;
  z-index: 1;
}

/* Optional: vignette / fade like Illustrator */
.welcome-right::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 55% 45%,
      rgba(255,255,255,0.06) 0%,
      rgba(11,18,32,0.0) 35%,
      rgba(11,18,32,0.25) 70%,
      rgba(11,18,32,0.55) 100%);
  z-index: 0;
  pointer-events:none;
}