:root{
  --beta-border: rgba(255,255,255,.08);
  --beta-muted: #aab3c7;
  --beta-text: #e7edf7;
  --beta-primary1: #ffd24d;
  --beta-primary2: #ffb300;
  --beta-blue1: #2f62ff;
  --beta-blue2: #1096ff;
  --beta-radius: 20px;
}

.card{
  background: linear-gradient(180deg,#121a2c,#0f1420);
  border: 1px solid var(--beta-border);
  border-radius: var(--beta-radius);
}

.beta-hero{
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  padding: 28px;
  overflow: hidden;
  isolation: isolate;
  margin-top: 24px;
}
.beta-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 600px at 25% -20%, rgba(123,177,255,.18), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(16,150,255,.16), transparent 60%),
    linear-gradient(160deg, #1a3b9a 0%, #0a6bb7 50%, #0a6bb7 60%, #0f1420 100%);
  opacity:.9;
  z-index:-1;
}

.beta-left{ display:grid; align-content:start; gap:14px; }

.beta-flag{
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--beta-border);
  color:var(--beta-text);
  font-weight:700;
  letter-spacing:.2px;
}

.beta-title{
  margin:6px 0 0 0;
  line-height:1.12;
  font-size: clamp(28px, 3.4vw, 44px);
  color:#fff;
}
.beta-title span{
  background: linear-gradient(135deg,var(--beta-primary1),var(--beta-primary2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.beta-sub{
  color:var(--beta-text);
  opacity:.92;
  max-width: 52ch;
  margin: 2px 0 8px;
}

.beta-form{
  display:flex; gap:10px; align-items:center;
  background: rgba(10,14,22,.45);
  border: 1px solid var(--beta-border);
  border-radius: 14px;
  padding: 8px;
  width: clamp(320px, 48vw, 560px);
  backdrop-filter: blur(4px);
}
.beta-form input{
  flex:1;
  min-width: 180px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,12,18,.65);
  color: #fff;
  padding: 0 12px;
  font-weight: 700;
  outline: none;
}
.beta-form input::placeholder{ color: rgba(255,255,255,.55); font-weight:600; }

.beta-btn-primary{
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  color:#0e1116;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg,var(--beta-primary1),var(--beta-primary2));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: transform .15s ease, box-shadow .15s ease;
}
.beta-btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 0 12px rgba(255,210,77,.42); }

.beta-note{
  margin: 2px 0 6px;
  color: var(--beta-muted);
  font-size: .92rem;
}

.beta-pills{ display:flex; flex-wrap: wrap; gap:8px; }
.beta-pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--beta-border);
  background:#0f1626;
  color:var(--beta-text);
  font-size:.86rem;
  font-weight:700;
}

.beta-right{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 300px;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.06);
}

.beta-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  opacity:.16;
}

.beta-card{
  position:absolute;
  width: 160px; height: 100px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(123,177,255,.25), transparent 70%),
    radial-gradient(60% 60% at 70% 80%, rgba(199,125,255,.20), transparent 70%),
    rgba(12,18,28,.65);
  box-shadow: 0 18px 35px rgba(0,0,0,.35), inset 0 10px 18px rgba(255,255,255,.04);
  backdrop-filter: blur(3px);
}
.beta-card-a{ top: 16%; left: 10%; transform: rotate(-6deg); }
.beta-card-b{ top: 40%; right: 12%; transform: rotate(5deg); width: 190px; height: 120px; }
.beta-card-c{ bottom: 10%; left: 26%; transform: rotate(-2deg); width: 140px; height: 90px; }

.beta-visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

@media (max-width: 1100px){
  .beta-hero{ grid-template-columns: 1fr; }
  .beta-right{ min-height: 260px; }
  .beta-form{ width: 100%; }
}