/* landing.css - page-specific layout for / (logged out). Tokens, buttons,
 * panels and toasts all live in theme.css; this file only adds the
 * fullscreen dither CTA. */

/* ================= original dither CTA (unchanged design) ================= */
html, body{height:100%; margin:0; background:#000}
body[data-view="landing"]{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body[data-view="landing"]::-webkit-scrollbar{display:none}
.cta-section{
  position:fixed; inset:0; width:100vw; height:100vh;
  display:flex; justify-content:center; align-items:center;
  overflow:hidden; margin:0; padding:0; border:none;
}
.cta-wrap{width:100%; height:100%; position:relative}
.cta-card{
  position:relative; overflow:hidden; width:100%; height:100%; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.cta-dither{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.35; mix-blend-mode:screen;
}
.cta-dither canvas{width:100%; height:100%; display:block}
.cta-content{
  position:relative; z-index:10; padding:72px 24px; max-width:56rem; margin:0 auto;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.cta-badge{
  margin-bottom:32px; display:inline-flex; align-items:center; gap:8px;
  border-radius:var(--radius-pill); border:1px solid var(--border2);
  background:rgba(255,255,255,.04); padding:6px 16px;
  font-size:14px; font-weight:500; color:var(--text2);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.dot{position:relative; display:flex; height:7px; width:7px; flex-shrink:0}
.dot .ping{
  position:absolute; display:inline-flex; height:100%; width:100%;
  border-radius:var(--radius-pill); background:var(--text2);
  opacity:.75; animation:cta-ping 1.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes cta-ping{
  0%{transform:scale(2); opacity:.5}
  75%,100%{transform:scale(2.6); opacity:0}
}
.dot .core{position:relative; border-radius:var(--radius-pill); height:7px; width:7px; background:var(--text2)}
.cta-headline{
  font-family:var(--serif);
  font-size:clamp(40px,7vw,84px); font-weight:500;
  letter-spacing:-.025em; line-height:1.05;
  color:#fff; margin:0 0 28px;
}
.cta-headline .dim{color:rgba(255,255,255,.75)}
.cta-desc{
  color:var(--muted); font-size:clamp(17px,1.9vw,19px);
  max-width:42rem; margin:0 0 44px; line-height:1.625;
}
.cta-btn{
  position:relative; display:inline-flex; height:56px; align-items:center; justify-content:center;
  gap:12px; overflow:hidden; border-radius:var(--radius-sm); background:var(--primary); padding:0 48px;
  font:500 16px/1 'Inter',system-ui,sans-serif; color:#000; text-decoration:none;
  transition:background .3s, transform .3s, box-shadow .3s; cursor:pointer; border:none;
}
.cta-btn:hover{background:#fff; transform:scale(1.05); box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.cta-btn:active{transform:scale(.95)}
.cta-btn > span{position:relative; z-index:10}
.cta-btn svg{width:20px; height:20px; position:relative; z-index:10; transition:transform .3s}
.cta-btn:hover svg{transform:translateX(4px)}

@media (max-width:640px){
  .cta-card{min-height:100vh; min-height:100dvh}
}