/* ===== Tokens ===== */
:root{
  --ring: 0 0 0 3px rgba(167,139,250,.35);
  --radius: 14px;
  --border: #262626;
  --bg: #0b0b0b;
  --bg-elev: #0f0f12;
  --text: #e7e7e7;
  --text-2: #a3a3a3;
  --brand-1:#8b5cf6;
  --brand-2:#a78bfa;
  --h1: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  --body: clamp(0.98rem, 0.92rem + .35vw, 1.125rem);
}


/* Base */
html,body{ 
  background:var(--bg); 
  color:var(--text); 
  height: 100vh; 
  margin: 0; 
  padding: 0;
  overflow-x: hidden;
}
.mb-3{
  font-size: larger;
}
/* Inputs */
.k-input{
  background: var(--bg-elev);
  border:1px solid var(--border);
  color:#fff;
  border-radius: var(--radius);
  padding:1rem 1rem;
  line-height:1.2; width:100%;
  font-size: var(--body);
}
.k-input:focus{ outline:none; box-shadow: var(--ring); border-color: var(--brand-1); }

/* Buttons */
.btn{
  min-height: 48px;
  border-radius: var(--radius);
  transition: transform .15s ease, filter .2s ease, box-shadow .25s ease;
}
.btn:hover{ transform: translateY(-1.5px); }
.btn:active{ transform: translateY(0); filter: brightness(.98); }
.btn-primary{ background: linear-gradient(90deg,var(--brand-1),var(--brand-2)); color:#fff; }
.btn-primary:hover{ filter: brightness(1.05); box-shadow: 0 0 18px rgba(124,58,237,.35); }

/* Surfaces */
.glass{ background: rgba(17,17,17,.72); backdrop-filter: blur(10px); border:1px solid rgba(167,139,250,.18); }
.shadow-glow{ box-shadow:0 0 50px rgba(167,139,250,.18); }

/* Hero bg */
.hero-grad{
  background-image:
    radial-gradient(60% 60% at 70% 0%, rgba(167,139,250,.25) 0%, rgba(167,139,250,0) 60%),
    conic-gradient(from 140deg at 30% 40%, rgba(139,92,246,.10), transparent 30%);
}

/* Typography utilities */
.h1-fluid{ font-size: var(--h1); line-height:1.08; font-weight: 800; letter-spacing:-.01em; }
.body-fluid{ font-size: var(--body); }
.wrap{ overflow-wrap:anywhere; word-break:break-word; }

/* Sticky CTA (mobile) + compensation so it doesn't cover content */
.sticky-cta{ display:none; }
@media (max-width: 500px){
  main{ padding-bottom: 10px; } /* minimal padding instead of footer compensation */
  .sticky-cta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    gap:.6rem; background:#0f0f12; border-top:1px solid var(--border);
    padding:.75rem .9rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom, .75rem));
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Footer adjustments - make it minimal and blend with background */
.footer-legal {
  background: transparent;
  border-top: none;
  padding: 7px ;
  opacity: 0.6;
}

/* Make main container fill the entire viewport */
main {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}