:root{
    --bg: #0a0a0c;
    --bg-soft: #101013;
    --panel: #151519;
    --panel-border: #26262b;
    --line: #2e2e34;
    --text: #f2f1ec;
    --text-muted: #97979f;
    --text-faint: #5c5c64;
    --red: #c62c3c;
    --red-dim: #7a1f29;
    --green: #1c7a45;
    --focus: #d94a58;
  }

  *{ box-sizing: border-box; }

  html, body{
    margin:0;
    padding:0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  body{
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow-x:hidden;
    padding: 48px 24px;
  }

  /* faint radiating circuit backdrop */
  .backdrop{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 900px 700px at 50% -10%, rgba(198,44,60,0.10), transparent 60%),
      radial-gradient(ellipse 700px 600px at 100% 100%, rgba(28,122,69,0.06), transparent 60%);
  }
  .backdrop svg{
    position:absolute;
    top:50%; left:50%;
    width:1400px;
    max-width:none;
    transform: translate(-50%,-50%);
    opacity:0.35;
  }

  .stage{
    position:relative;
    z-index:1;
    width:100%;
    max-width: 980px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    text-align:left;
  }

  .columns{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:52px;
    width:100%;
  }

  .info-col{
    flex:1 1 420px;
    min-width:280px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }

  .login-col{
    flex:1 1 380px;
    min-width:300px;
    max-width:420px;
  }

  @media (max-width: 860px){
    .columns{
      flex-direction:column;
      align-items:stretch;
    }
    .info-col, .login-col{
      max-width:none;
    }
  }

  .mark{
    width:260px;
    max-width:72vw;
    aspect-ratio: 1 / 1;
    margin-bottom: 28px;
    filter: drop-shadow(0 0 30px rgba(198,44,60,0.16));
    opacity:0;
    animation: rise 0.7s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .mark img{ width:100%; height:100%; object-fit:contain; display:block; }

  .info-col .mark{ align-self:center; margin-left:auto; margin-right:auto; }

  .wordmark{
    font-family:'Space Grotesk', sans-serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 40px;
    opacity:0;
    animation: rise 0.7s 0.08s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .wordmark b{ color: var(--text); font-weight:600; }

  h1{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    max-width: 34ch;
    opacity:0;
    animation: rise 0.7s 0.16s cubic-bezier(.2,.8,.2,1) forwards;
  }

  .disclaimer{
    color: var(--text-faint);
    font-size: 12.5px;
    line-height: 1.6;
    max-width: 46ch;
    margin: 4px 0 0;
    opacity:0;
    animation: rise 0.7s 0.32s cubic-bezier(.2,.8,.2,1) forwards;
  }

  p.lede{
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 48ch;
    margin: 0 0 18px;
    opacity:0;
    animation: rise 0.7s 0.24s cubic-bezier(.2,.8,.2,1) forwards;
  }

  .panel{
    width:100%;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 28px;
    text-align:left;
    position:relative;
    overflow:hidden;
    opacity:0;
    animation: rise 0.7s 0.32s cubic-bezier(.2,.8,.2,1) forwards;
  }

  .panel::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(198,44,60,0.5), transparent);
  }

  .panel-title{
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px;
  }

  .panel-sub{
    font-size: 13px;
    color: var(--text-faint);
    margin: 0 0 20px;
  }

  form{ display:flex; flex-direction:column; gap:12px; }

  label{
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: -4px;
  }

  input[type="email"], input[type="password"]{
    width:100%;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 13px 14px;
    font-size: 14.5px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  input[type="email"]::placeholder, input[type="password"]::placeholder{ color: var(--text-faint); }
  input[type="email"]:focus, input[type="password"]:focus{
    outline:none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(217,74,88,0.16);
  }
  input[type="email"]:invalid:not(:placeholder-shown){
    border-color: var(--red-dim);
  }

  button.primary{
    margin-top: 4px;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 13px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition: background 0.15s ease, transform 0.1s ease;
    animation: primary-pulse 2.2s ease-in-out infinite;
  }
  @keyframes primary-pulse{
    0%, 100%{ box-shadow: 0 0 0 0 rgba(28,122,69,0.45); }
    50%{ box-shadow: 0 0 0 9px rgba(28,122,69,0); }
  }
  button.primary:hover{ background: #175c35; animation-play-state: paused; }
  button.primary:active{ transform: scale(0.98); }
  button.primary:focus-visible{
    outline: 2px solid var(--green);
    outline-offset: 2px;
  }
  button.primary[disabled]{
    background: #16301f;
    color: var(--text-faint);
    cursor:default;
    animation: none;
  }
  button.primary svg{ flex-shrink:0; }

  .spinner{
    width:15px; height:15px;
    border-radius:50%;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    animation: spin 0.7s linear infinite;
    flex-shrink:0;
  }

  /* status line, terminal-style feedback for the check */
  .status-line{
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-faint);
    margin-top: 14px;
    min-height: 14px;
  }
  .status-line .dot{
    display:inline-block;
    width:6px; height:6px;
    border-radius:50%;
    background: var(--text-faint);
    margin-right:7px;
  }
  .status-line.pending .dot{ background: #d9a23e; animation: pulse 1s ease-in-out infinite; }
  .status-line.locked .dot{ background: var(--red); }

  /* locked-access result view — visible from the start */
  .result{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin: 22px 0 16px;
    color: var(--text-faint);
    font-size: 12px;
  }
  .divider::before, .divider::after{
    content:"";
    flex:1;
    height:1px;
    background: var(--line);
  }

  .result-msg{
    background: rgba(198,44,60,0.08);
    border: 1px solid rgba(198,44,60,0.28);
    border-radius: 9px;
    padding: 14px 15px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #f0d3d6;
  }

  a.telegram-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background: #1f9bde;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size: 14.5px;
    padding: 13px 16px;
    border-radius: 9px;
    transition: background 0.15s ease, transform 0.1s ease;
    animation: telegram-pulse 2.2s ease-in-out infinite;
  }
  @keyframes telegram-pulse{
    0%, 100%{ box-shadow: 0 0 0 0 rgba(31,155,222,0.45); }
    50%{ box-shadow: 0 0 0 9px rgba(31,155,222,0); }
  }
  a.telegram-btn:hover{ background:#1a86c2; animation-play-state: paused; }
  a.telegram-btn:active{ transform: scale(0.98); }
  a.telegram-btn:focus-visible{
    outline: 2px solid #6dc6f2;
    outline-offset: 2px;
  }
  a.telegram-btn svg{ width:18px; height:18px; flex-shrink:0; }

  .signup-msg{
    text-align:center;
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 4px 0 0;
  }
  .signup-msg a{
    color: var(--text);
    text-decoration: underline;
  }

  a.buy-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background: #1f9bde;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    letter-spacing: 0.02em;
    font-size: 14.5px;
    padding: 13px 16px;
    border-radius: 9px;
    margin-top: 2px;
    transition: background 0.15s ease, transform 0.1s ease;
  }
  a.buy-btn:hover{ background:#1a86c2; }
  a.buy-btn:active{ transform: scale(0.98); }
  a.buy-btn:focus-visible{
    outline: 2px solid #6dc6f2;
    outline-offset: 2px;
  }

  a.signup-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background: var(--red);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    letter-spacing: 0.02em;
    font-size: 14.5px;
    padding: 13px 16px;
    border-radius: 9px;
    margin-top: 6px;
    transition: background 0.15s ease, transform 0.1s ease;
    animation: signup-pulse 2.2s ease-in-out infinite;
  }
  @keyframes signup-pulse{
    0%, 100%{ box-shadow: 0 0 0 0 rgba(198,44,60,0.5); }
    50%{ box-shadow: 0 0 0 9px rgba(198,44,60,0); }
  }
  a.signup-btn:hover{ background:#a8242f; animation-play-state: paused; }
  a.signup-btn:active{ transform: scale(0.98); }
  a.signup-btn:focus-visible{
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .back-link{
    background:none;
    border:none;
    color: var(--text-faint);
    font-size: 12.5px;
    text-align:center;
    cursor:pointer;
    padding: 2px;
    font-family: 'Inter', sans-serif;
  }
  .back-link:hover{ color: var(--text-muted); }

  footer{
    margin-top: 10px;
    color: var(--text-faint);
    font-size: 11.5px;
    line-height:1.6;
    max-width: 46ch;
    opacity:0;
    animation: rise 0.7s 0.4s cubic-bezier(.2,.8,.2,1) forwards;
  }

  @keyframes rise{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }
  @keyframes fadeIn{
    from{ opacity:0; transform: translateY(4px); }
    to{ opacity:1; transform: translateY(0); }
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  @keyframes pulse{
    0%,100%{ opacity:1; } 50%{ opacity:0.35; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  }

  @media (max-width: 420px){
    .panel{ padding: 22px; }
  }