/* ===========================
   NoirStack — Domain Transfer
   =========================== */

:root{
  --ns-bg:#0a0a0a;            /* page bg (already set globally) */
  --ns-panel:#0e1116;         /* glass base */
  --ns-text:#e2edff;
  --ns-muted:#9ca3af;
  --ns-primary:#0001FF;       /* electric blue */
  --ns-primary-2:#66a3ff;     /* glow blue */
  --ns-radius:14px;
  --ns-shadow:0 18px 54px rgba(0,0,0,.45);
}

.domain-transfer-hero{
  position: relative;
  color: var(--ns-text);
  margin: clamp(2rem, 5vw, 3rem) auto;
  padding: clamp(2rem, 5vw, 2.75rem) clamp(1rem, 4vw, 2rem);
  max-width: 820px;

  /* blue-only layered backdrop */
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(0,1,255,.14), transparent 70%),
    radial-gradient(900px 500px at 85% -20%, rgba(102,163,255,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--ns-radius);
  box-shadow: var(--ns-shadow);
  backdrop-filter: blur(10px) saturate(130%);
  text-align: center;
  overflow: hidden;
}

/* subtle animated grid */
.domain-transfer-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/34px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/100% 34px;
  opacity:.3; pointer-events:none;
  animation: ns-grid-pan 48s linear infinite;
}
@keyframes ns-grid-pan { to { background-position: 34px 34px; } }

/* title + subtitle */
.domain-transfer-hero h1{
  margin: 0 0 .5rem;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .4px;
  background: linear-gradient(90deg, var(--ns-primary), #5a7bff 45%, #9cc7ff 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 16px rgba(0,1,255,.35);
}
.domain-transfer-hero p{
  margin: 0 0 1.25rem;
  color: var(--ns-muted);
  font-size: 1rem; line-height: 1.6;
  opacity: .9;
}

/* form */
.domain-transfer-form{
  display:flex; flex-direction:column; gap: .9rem;
  align-items:center; max-width: 560px; margin: 0 auto;
}
.domain-transfer-form input[type="text"]{
  width:100%; max-width:520px;
  padding: .85rem 1rem;
  font-size: 1rem; color: var(--ns-text);
  background: rgba(30,33,42,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  transition: border .2s, box-shadow .25s, background .2s;
}
.domain-transfer-form input[type="text"]::placeholder{ color: #97a6bd; opacity:.75; }
.domain-transfer-form input[type="text"]:focus{
  outline:none;
  border-color: var(--ns-primary);
  box-shadow: 0 0 14px rgba(0,1,255,.45);
  background: rgba(35,38,48,.95);
}

/* CTA */
.domain-transfer-form button{
  padding: .9rem 1.4rem;
  background: linear-gradient(180deg, var(--ns-primary), #3a4dff);
  color:#fff; font-weight:700; letter-spacing:.2px;
  border: none; border-radius: 12px; cursor: pointer;
  transition: transform .1s ease, box-shadow .25s ease, filter .2s ease;
  box-shadow: 0 12px 30px rgba(0,1,255,.35);
}
.domain-transfer-form button:hover{
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,1,255,.45), 0 0 20px rgba(102,163,255,.32);
}
.domain-transfer-form button:active{ transform: translateY(0); }

/* keyboard focus */
.domain-transfer-form button:focus-visible{
  outline:2px solid var(--ns-primary-2);
  outline-offset:3px;
  box-shadow: 0 0 0 4px rgba(102,163,255,.25);
}

/* responsiveness */
@media (max-width: 600px){
  .domain-transfer-form{ width:100%; }
  .domain-transfer-hero{ padding: 2rem 1rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .domain-transfer-hero::before{ animation: none; }
  .domain-transfer-form button,
  .domain-transfer-form input[type="text"]{ transition: none; }
}