/* Kyren landing: quiet hierarchy, native navigation, progressive access. */
:root { --dim:#aaa8b8; }
html { scroll-padding-top:88px; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible { outline:3px solid #c4b5fd; outline-offset:4px; }
.skip-link { position:fixed; inset-inline-start:16px; top:8px; transform:translateY(-160%); z-index:300; padding:12px 18px; background:var(--accent); color:white; border-radius:8px; }
.skip-link:focus { transform:none; }
.nav-in { flex-wrap:nowrap; padding:10px 16px; text-align:start; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.logo img { border-radius:8px; }
.logo .brand-name { color:var(--text); }
.logo .brand-name span { color:#b69bff; }
.nav-actions { flex-wrap:nowrap; gap:10px; }
.nav-login, .nav-menu summary { min-height:44px; display:flex; align-items:center; justify-content:center; padding:8px 12px; font-weight:600; font-size:.9rem; border-radius:8px; }
.nav-login { border:1px solid var(--border); }
.nav-menu { position:relative; }
.nav-menu summary { cursor:pointer; gap:10px; list-style:none; }
.nav-menu summary::-webkit-details-marker { display:none; }
.nav-menu[open] summary { background:var(--card); }
.nav-panel { position:absolute; inset-inline-end:0; top:calc(100% + 12px); width:min(320px,calc(100vw - 32px)); background:var(--card); border:1px solid #3c3251; border-radius:12px; padding:12px; box-shadow:0 12px 32px #0008; max-height:calc(100dvh - 90px); overflow:auto; }
.nav-panel > a, .nav-languages a { display:flex; align-items:center; min-height:44px; padding:8px 10px; border-radius:6px; }
.nav-panel a:hover, .nav-panel a[aria-current] { background:#7c3aed22; color:#d8c9ff; }
.nav-language-label { display:block; padding:12px 10px 4px; color:var(--dim); font-size:.8rem; border-top:1px solid var(--border); margin-top:8px; }
.nav-languages { display:grid; grid-template-columns:1fr 1fr; gap:4px; font-size:.85rem; }
.hero { padding:32px 16px 52px; }
.hero-logo-img { max-width:176px; filter:drop-shadow(0 4px 14px #5b48d633); }
.hero-wrapper::before { width:560px; height:440px; opacity:.35; animation:none; }
.hero-wrapper::after { display:none; }
.hero-grid { opacity:.4; }
.hero h1 { font-weight:750; max-width:850px; margin:auto; }
.hero h1 em { color:#b69bff; }
.badge { border-color:#7c3aed55; color:#c4b5fd; }
.hero-ctas { margin-top:24px; }
.cta-add-discord { background:linear-gradient(135deg,#5865f2,#7c3aed); box-shadow:0 4px 16px #7c3aed30; }
.cta-add-discord:hover { background:linear-gradient(135deg,#5865f2,#7c3aed); box-shadow:0 6px 18px #7c3aed40; }
.cta-secondary { justify-content:center; }
.trust-row { font-size:.82rem; }
.architect { padding:36px 16px 48px; border-top:1px solid var(--border); }
.architect h2 { font-size:clamp(1.45rem,3vw,2rem); font-weight:700; text-align:center; max-width:800px; margin:0 auto 12px; line-height:1.35; }
.section-note { text-align:center; color:var(--dim); max-width:760px; margin:0 auto 24px; }
.architect-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.architect-steps li { padding:22px; background:var(--card); border:1px solid var(--border); border-radius:12px; }
.step-number { display:inline-flex; justify-content:center; align-items:center; width:32px; height:32px; border:1px solid #7c3aed66; background:#7c3aed18; color:#c4b5fd; border-radius:8px; margin-bottom:12px; font-weight:700; }
.architect-steps h3 { font-size:1.05rem; margin-bottom:6px; }
.architect-steps p { font-size:.92rem; color:var(--dim); }
.features { padding:44px 16px; }
.features h2, .cta h2 { font-weight:700; }
.fcard:nth-child(n) { border-top-color:#7c3aed55; }
.fcard .ico { font-size:1.4rem; margin-bottom:8px; }
.fcard h3 { margin:0 0 4px; font-size:1rem; position:relative; z-index:1; }
.fcard::after { pointer-events:none; }
.fcard:hover, .plan:hover { transform:translateY(-2px); box-shadow:0 8px 20px #0003; }
.plan.hot { border-color:#ffd70055; }
.plan.popular:hover { border-color:var(--accent); box-shadow:0 8px 20px #0003; }
.billing-note { max-width:660px; margin:12px auto 0; font-size:.88rem!important; }
.price, .price-year { unicode-bidi:isolate; }
.price small, .price-year small { display:inline-block; margin-inline-start:4px; }
.footer-links a { color:#b69bff; min-height:44px; display:flex; align-items:center; }
.footer-discord-link { min-height:44px; }
.faq summary { min-height:28px; }
.faq summary::after { float:inline-end; color:#c4b5fd; }
/* Content is visible without JS, unsupported observers, or failed scripts. */
.reveal { opacity:1; transform:none; transition:none; }
@media(max-width:640px) {
  .nav-in { justify-content:space-between; gap:8px; }
  .logo { font-size:1.05rem; gap:6px; }
  .nav-actions { gap:4px; }
  .nav-login, .nav-menu summary { padding:8px; font-size:.85rem; }
  .hero { padding:26px 16px 36px; }
  .hero-logo-img { max-width:136px; }
  .hero p { font-size:1rem; }
  .hero-ctas { align-items:stretch; }
  .hero-ctas a { width:100%; max-width:360px; margin-inline:auto; padding:14px 18px; }
  .architect-steps { grid-template-columns:1fr; }
  .architect-steps li { padding:18px; }
  .architect { padding-top:30px; }
  .trust-row .trust-dot { display:none; }
  .trust-row { gap:6px 14px; }
}
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .reveal { opacity:1!important; transform:none!important; }
}