/* ===== BLOCKATTACK – INDEX PAGE STYLES ===== */

/* ── HERO ────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; text-align: center;
  padding: 9rem 2rem 5rem;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 70%, rgba(232,83,26,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(75,123,236,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 15% 80%, rgba(46,204,140,0.07) 0%, transparent 55%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* Floating blocks */
.blocks-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.blk {
  position: absolute; border-radius: 4px; opacity: 0;
  animation: blkFloat linear infinite;
}
@keyframes blkFloat {
  0%   { transform: translateY(105vh) rotate(0deg);   opacity: 0; }
  8%   { opacity: 0.22; }
  92%  { opacity: 0.12; }
  100% { transform: translateY(-80px) rotate(400deg); opacity: 0; }
}
.blk:nth-child(1)  { left:4%;   width:14px; height:14px; background:var(--orange); animation-duration:13s; animation-delay:0s;   }
.blk:nth-child(2)  { left:13%;  width:22px; height:22px; background:var(--blue);   animation-duration:16s; animation-delay:2.5s; }
.blk:nth-child(3)  { left:22%;  width:12px; height:12px; background:var(--green);  animation-duration:11s; animation-delay:5s;   }
.blk:nth-child(4)  { left:33%;  width:18px; height:18px; background:var(--orange); animation-duration:15s; animation-delay:1s;   }
.blk:nth-child(5)  { left:44%;  width:10px; height:10px; background:var(--blue);   animation-duration:9s;  animation-delay:7s;   }
.blk:nth-child(6)  { left:56%;  width:20px; height:20px; background:var(--green);  animation-duration:14s; animation-delay:3s;   }
.blk:nth-child(7)  { left:67%;  width:16px; height:16px; background:var(--orange); animation-duration:12s; animation-delay:6s;   }
.blk:nth-child(8)  { left:76%;  width:24px; height:24px; background:var(--blue);   animation-duration:17s; animation-delay:0.5s; }
.blk:nth-child(9)  { left:87%;  width:14px; height:14px; background:var(--green);  animation-duration:13s; animation-delay:8s;   }
.blk:nth-child(10) { left:94%;  width:18px; height:18px; background:var(--orange); animation-duration:15s; animation-delay:4s;   }
.blk:nth-child(11) { left:8%;   width:9px;  height:9px;  background:var(--blue);   animation-duration:10s; animation-delay:9s;   }
.blk:nth-child(12) { left:50%;  width:12px; height:12px; background:var(--orange); animation-duration:12s; animation-delay:1.5s; }
.blk:nth-child(13) { left:30%;  width:8px;  height:8px;  background:var(--green);  animation-duration:8s;  animation-delay:11s;  }
.blk:nth-child(14) { left:72%;  width:16px; height:16px; background:var(--blue);   animation-duration:14s; animation-delay:3.5s; }

.hero-inner { position: relative; z-index: 2; max-width: 820px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(46,204,140,0.1); border: 1px solid rgba(46,204,140,0.3);
  color: var(--green); padding: 0.4rem 1rem; border-radius: 100px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 1.75rem; animation: fadeDown 0.7s ease both;
}
.badge-dot {
  width: 7px; height: 7px; background: var(--green); border-radius: 50%;
  animation: blink 2s ease infinite;
}

.hero h1 {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(3.5rem, 11vw, 7.5rem);
  font-weight: 900; line-height: 0.95; letter-spacing: -0.03em;
  margin-bottom: 1.5rem; animation: fadeUp 0.7s ease 0.1s both;
}
.hero h1 .o { color: var(--orange); }
.hero h1 .b { color: var(--blue); position: relative; top: -0.05em; }

.hero-sub {
  font-size: 1.1rem; color: var(--gray); max-width: 480px;
  margin: 0 auto 2.5rem; line-height: 1.75;
  animation: fadeUp 0.7s ease 0.2s both; font-weight: 300;
}
.hero-btns {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  animation: fadeUp 0.7s ease 0.3s both;
}

.scroll-arrow {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--gray); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  animation: fadeIn 1s ease 1.2s both; z-index: 2;
}
.scroll-line {
  width: 1px; height: 32px; background: linear-gradient(to bottom, transparent, var(--gray));
  animation: scrollPulse 1.8s ease infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:0.4;transform:scaleY(1);}50%{opacity:1;transform:scaleY(1.2);} }

/* ── SECTIONS ────────────────────────────── */
.section { padding: 6rem 2rem; max-width: 1100px; margin: 0 auto; }

/* ── STATUS CARD ─────────────────────────── */
.status-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 18px;
  padding: 2.25rem 2.5rem; display: grid; grid-template-columns: 1fr auto; gap: 2.5rem;
  align-items: center; position: relative; overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.status-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--blue) 50%, var(--green) 100%);
}
.status-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 20px 60px rgba(0,0,0,0.3); }

.si-name { font-family: 'Unbounded', sans-serif; font-size: 1.3rem; font-weight: 700; margin-bottom: 0.6rem; }
.si-ip   { font-size: 0.88rem; color: var(--gray); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.1rem; }
.copy-btn {
  background: transparent; border: none; color: var(--blue); cursor: pointer;
  font-size: 0.82rem; font-family: 'DM Sans', sans-serif;
  padding: 0.2rem 0.6rem; border-radius: 5px; transition: background 0.2s;
}
.copy-btn:hover { background: rgba(75,123,236,0.12); }

.sw { text-align: center; min-width: 140px; }
.sw-ind { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
.sd { width: 10px; height: 10px; border-radius: 50%; background: var(--gray); }
.sd.on  { background: var(--green); box-shadow: 0 0 12px rgba(46,204,140,0.7); animation: blink 2s ease infinite; }
.sd.off { background: #e55; }
.sl { font-size: 0.85rem; font-weight: 600; color: var(--gray); }
.sl.on  { color: var(--green); }
.sl.off { color: #e55; }
.pc { font-family: 'Unbounded', sans-serif; font-size: 2.8rem; font-weight: 900; line-height: 1; margin-bottom: 0.3rem; }
.pl { font-size: 0.72rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.12em; }

/* ── FEATURE GRID ────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.feat-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.75rem; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  position: relative; overflow: hidden;
}
.feat-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.16); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.feat-card.fo { border-left: 3px solid var(--orange); }
.feat-card.fb { border-left: 3px solid var(--blue); }
.feat-card.fg { border-left: 3px solid var(--green); }
.feat-ico { font-size: 1.6rem; margin-bottom: 0.85rem; }
.feat-card h3 { font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
.feat-card p  { font-size: 0.88rem; color: var(--gray); line-height: 1.65; }

/* ── JOIN SECTION ────────────────────────── */
.join-wrap { padding: 6rem 2rem; max-width: 1100px; margin: 0 auto; }
.join-card {
  background: linear-gradient(135deg, rgba(232,83,26,0.1), rgba(75,123,236,0.07), rgba(46,204,140,0.05));
  border: 1px solid rgba(232,83,26,0.2); border-radius: 22px;
  padding: 5rem 3rem; text-align: center; position: relative; overflow: hidden;
}
.join-card::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.018'%3E%3Crect x='0' y='0' width='4' height='4'/%3E%3Crect x='20' y='20' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E");
}
.join-card h2 {
  font-family: 'Unbounded', sans-serif; font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900; margin-bottom: 0.85rem; position: relative;
}
.join-card > p { color: var(--gray); margin-bottom: 2.25rem; position: relative; }

.ip-box {
  display: inline-flex; align-items: center; gap: 1rem;
  background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem 1.5rem; margin-bottom: 1.5rem; position: relative;
}
.ip-box code {
  font-family: 'Courier New', monospace; font-size: 1.1rem;
  color: var(--white); letter-spacing: 0.04em;
}
.btn-copy {
  background: var(--orange); border: none; color: white;
  padding: 0.55rem 1.1rem; border-radius: 7px; font-size: 0.85rem; font-weight: 700;
  font-family: 'DM Sans', sans-serif; cursor: pointer; transition: opacity 0.2s;
}
.btn-copy:hover { opacity: 0.85; }
.join-note { font-size: 0.83rem; color: var(--gray); position: relative; }
.join-note a { color: var(--blue); text-decoration: none; }
.join-note a:hover { text-decoration: underline; }

/* ── RESPONSIVE ──────────────────────────── */
@media(max-width:768px){
  .status-card { grid-template-columns: 1fr; }
  .sw { border-top: 1px solid var(--border); padding-top: 1.5rem; }
  .join-card { padding: 3rem 1.25rem; }
  .ip-box { flex-direction: column; gap: 0.75rem; }
}