/* ===== Trade Coming Soon (scoped) ===== */


.coming-chip{
  display:inline-block; margin-top:10px; padding:6px 10px; border-radius:999px;
  background:var(--accent-base, #A2EBCC); color:#0F3D34; font-weight:700; font-size:.9rem;
  box-shadow:0 6px 24px rgba(162,235,204,.35);
}

/* Panel */
.trade-panel { margin: 8vh auto 10vh; }
.trade-grid{
  display:grid; gap: clamp(18px, 3vw, 32px);
  grid-template-columns: 1.2fr 1fr;
}
.countdown-card, .features-card, .waitlist-card{
  background: var(--glass-bg, rgba(255,255,255,.08));
  border: 1px solid var(--line, rgba(26,32,44,.12));
  border-radius: 16px;
  padding: clamp(18px, 3vw, 32px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 12px 36px rgba(0,0,0,.07);
}

/* Neon orb */
.neon-orb{
  position: relative; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(closest-side, #A2EBCC 0%, #208D7A 70%, rgba(0,0,0,0) 72%);
  filter: blur(0.2px); opacity:.95; margin-bottom: 14px;
  box-shadow: 0 0 80px rgba(162,235,204,.45), inset 0 0 40px rgba(32,141,122,.45);
}

/* Countdown */
.countdown-card h2, .features-card h2, .waitlist-card h2{
  margin: 0 0 10px; font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: var(--ink,#1A202C);
}
.muted{ color: var(--muted,#718096); }
.timer{
  display:flex; gap: clamp(10px, 2.2vw, 16px); margin-top: 10px; flex-wrap: wrap;
}
.timer > div{
  min-width: 82px; text-align: center; padding: 10px 12px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line, rgba(26,32,44,.1));
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.timer span{
  display:block;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 800;
  color: var(--accent-base, #A2EBCC);
}
.timer label{ display:block; font-size:.78rem; color: var(--muted,#718096); margin-top:2px; }

/* Features */
.features{ display:grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.fcard{
  border: 1px solid var(--line, rgba(26,32,44,.12));
  background: #fff; border-radius: 12px; padding: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fcard h3{ margin: 0 0 6px; font-size: 1.05rem; color: var(--ink,#1A202C); }
.fcard p{ margin: 0; color: var(--muted,#718096); }
.fcard:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.06); }

/* Waitlist form */
.waitlist-form .grid{
  display:grid; gap: 12px; grid-template-columns: 1.2fr 1fr;
}
.waitlist-form .field{ display:flex; flex-direction:column; min-width:0; }
.waitlist-form label{ font-weight:600; color: var(--ink,#1A202C); font-size:14px; }
.waitlist-form input{
  margin-top:6px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line, rgba(26,32,44,.16)); background:#fff; color: var(--ink,#1A202C);
  font-size: 1rem; min-height: 44px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.waitlist-form input:focus{ outline:none; border-color: var(--accent-base,#A2EBCC); box-shadow: 0 0 0 3px var(--accent-glow, rgba(162,235,204,.35)); }
.field-msg{ margin-top:6px; min-height:1.1em; font-size:.93rem; line-height:1.28; }
.field-msg[data-tone="error"]{ color:#c53030; }
.field-msg[data-tone="success"]{ color:#1f9d55; }
.field-msg[data-tone="info"]{ color:#4a5568; }
.mx-form .form-status{ margin-top:8px; text-align:center; min-height:1.1em; font-size:.95rem; }
.mx-form .form-status[data-tone="success"]{ color:#1f9d55; }
.mx-form .form-status[data-tone="error"]{ color:#c53030; }
.mx-form .form-status[data-tone="info"]{ color:#4a5568; }
.mx-form .btn.is-loading{ opacity:.7; pointer-events:none; }
.cf-turnstile{ width:0; height:0; overflow:hidden; }

/* Layout breaks */
@media (max-width: 1100px){
  .trade-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .features{ grid-template-columns: 1fr; }
  .waitlist-form .grid{ grid-template-columns: 1fr; }
  .trade-hero{ padding: 14vh 0 10vh; }
}
@media (max-width: 320px){
  .countdown-card, .features-card, .waitlist-card{ padding: 14px; border-radius: 12px; }
  .timer > div{ min-width: 70px; padding: 8px 10px; }
}
