/* Landing page layout (index.html). The utilities the prebuilt Tailwind file lacks (md:/lg: variants, spacing) are in css/landing-utilities.css. */

/* ── navigation ──────────────────────────────────────────────────────────── */
.landing-nav .nav-brand { display: flex; flex-direction: column; line-height: 1.35; text-decoration: none; }
.landing-nav .nav-brand b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: .8rem; color: #fff; letter-spacing: .04em; }
.landing-nav .nav-brand small { font-size: .68rem; color: #8890b8; letter-spacing: .02em; }
.nav-desk { display: none; }
@media (min-width: 960px) { .nav-desk { display: inline-block; } }
.landing-nav a.nav-link { position: relative; padding: 4px 0; }
.landing-nav a.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #ff9900; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.landing-nav a.nav-link:hover::after { transform: scaleX(1); }
@media (max-width: 560px) { .landing-nav .nav-brand small { display: none; } .landing-nav .nav-brand b { font-size: .7rem; } }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { min-height: min(100vh, 860px) !important; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; } }
#hero-content { text-align: left; }
.hero-h1 { font-size: clamp(1.4rem, 4.2vw, 2.7rem) !important; line-height: 1.35; letter-spacing: .01em; margin-bottom: 24px; }
.hero-lead { font-size: 1.05rem; line-height: 1.7; color: #b4bde0; max-width: 34rem; margin-bottom: 12px; }
.hero-sub { font-size: .95rem; line-height: 1.6; color: #8890b8; max-width: 34rem; margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-cta .retro-btn { padding: 16px 26px; }
.hero-cta .btn-primary { background: #ff9900; border-color: #ffcc66; color: #0d0d1f; box-shadow: 0 0 22px rgba(255,153,0,.35); }
.hero-cta .btn-primary:hover { background: #ffb338; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; padding-top: 0; border-top: 0 !important; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: .78rem; color: #c8d0e8; background: rgba(26,26,62,.8); border: 1px solid #4040a0; }
.hero-trust span::before { content: ''; width: 8px; height: 8px; background: #ff9900; flex: none; }

.hero-visual { position: relative; display: flex; justify-content: center; padding: 8px; }
.hero-visual::before { content: ''; position: absolute; inset: -6% -4%; background: radial-gradient(circle, rgba(107,94,181,.4), transparent 65%); filter: blur(12px); pointer-events: none; }
.hero-visual .c64-screen { max-width: 480px; font-size: .68rem; padding: 30px 32px; animation: hero-float 6s ease-in-out infinite; }
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 959px) {
  #hero-content { text-align: center; }
  .hero-lead, .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-visual .c64-screen { font-size: .6rem; padding: 22px 20px; }
}

.hero-item[data-i18n="hero.badge"] { margin-bottom: 20px; }
@media (max-width: 768px) { .section-title.hero-h1 { font-size: clamp(1.15rem, 6vw, 1.6rem) !important; } }
@media (max-width: 560px) {
  .landing-nav .retro-btn { padding: 8px 10px !important; font-size: .55rem !important; white-space: nowrap; }
  .landing-nav .nav-brand b { font-size: .62rem; }
  .landing-nav a.nav-link[onclick], .landing-nav button.nav-link { display: none; }
}