/* AI Keyboard — landing page styles. Tokens from ../colors_and_type.css */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); overflow-x: hidden; color: var(--fg1); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ——— spirit mesh backdrop ——— */
.mesh {
  position: relative;
  background:
    radial-gradient(80% 70% at 12% 0%, #4D8BFF 0%, rgba(77,139,255,0) 55%),
    radial-gradient(70% 80% at 92% 8%, #8A6BFF 0%, rgba(138,107,255,0) 58%),
    radial-gradient(90% 90% at 78% 100%, #FF5FA2 0%, rgba(255,95,162,0) 55%),
    radial-gradient(80% 80% at 4% 92%, #18C2BE 0%, rgba(24,194,190,0) 55%),
    linear-gradient(150deg, #2E7BFF 0%, #6A5CFF 60%, #7E5BFF 100%);
}
.mesh-soft {
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(138,107,255,0.20) 0%, rgba(138,107,255,0) 60%),
    radial-gradient(70% 80% at 6% 100%, rgba(45,183,245,0.18) 0%, rgba(45,183,245,0) 60%),
    var(--bg);
}

.glass-card {
  background: var(--glass-regular);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-rim); box-shadow: var(--glass-shadow);
}

/* ——— buttons ——— */
.btn { font-family: var(--font-sans); font-weight: 600; font-size: 16px; border-radius: 999px;
  padding: 13px 24px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-glass-d { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-glass-d:hover { background: rgba(255,255,255,0.28); }
.btn-ghost { background: var(--fill-2); color: var(--fg1); }
.btn-ghost:hover { background: var(--fill-1); }
.btn-white { background:#fff; color: var(--accent); }
.btn-white:hover { background:#f1f4ff; }

/* App Store badge */
.appstore { display:inline-flex; align-items:center; gap:11px; padding: 11px 20px; border-radius: 14px;
  background:#000; color:#fff; text-decoration:none; }
.appstore .sub { font-size:11px; line-height:1; opacity:0.85; letter-spacing:0.02em; }
.appstore .main { font-size:20px; line-height:1.1; font-weight:600; letter-spacing:-0.01em; margin-top:3px; }
.appstore--soft { background: rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* action icon tint tiles */
.tint { display:inline-flex; align-items:center; justify-content:center; border-radius: 11px; }

@keyframes ak-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.rise { animation: ak-rise .7s var(--ease-out) both; }
@keyframes ak-pop { from { opacity:0; transform: scale(0.96) translateY(8px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

/* ——— responsive ——— */
@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .nav-cta-text { display:none !important; }
  .hero-grid { grid-template-columns: 1fr !important; text-align:center; }
  .hero-grid .hero-copy { align-items:center !important; }
  .hero-h { font-size: 12vw !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .twoup-grid { grid-template-columns: 1fr !important; }
  .feat-grid, .price-grid { grid-template-columns: 1fr !important; }
  .lwt-grid { grid-template-columns: 1fr !important; }
  .byok-grid { grid-template-columns: 1fr !important; }
  .center-mobile { text-align:center; margin-left:auto; margin-right:auto; }
}