/*
Theme Name: YouTube Scalers Minimal
Theme URI: https://youtubescalers.com
Author: YouTube Scalers
Description: Minimal one page theme for youtubescalers.com
Version: 1.0
License: GPL v2 or later
Text Domain: youtubescalers-minimal
*/
:root { --w: 1120px; --pad: 40px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #0f172a; background: #ffffff; }
a { color: inherit; text-decoration: none; }
.header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.9); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid #e2e8f0; }
.nav { max-width: var(--w); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 600; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.menu { display: flex; align-items: center; gap: 16px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid #cbd5e1; }
.section { max-width: var(--w); margin: 0 auto; padding: var(--pad) 20px; }
.hero h1 { font-size: clamp(28px, 5vw, 48px); letter-spacing: -0.02em; margin: 0; }
.hero p { margin: 14px 0 0; color: #475569; font-size: clamp(16px, 2.6vw, 18px); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.card { border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; background: #ffffff; }
.kicker { color: #475569; font-size: 14px; }
.about { background: #f8fafc; border-block: 1px solid #e2e8f0; }
h2 { font-size: clamp(22px, 4vw, 32px); margin: 0; }
.about p { margin-top: 10px; color: #334155; max-width: 800px; }
.list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.footer { border-top: 1px solid #e2e8f0; }
.footer-inner { max-width: var(--w); margin: 0 auto; padding: 24px 20px; display: flex; gap: 12px; align-items: center; justify-content: space-between; color: #475569; font-size: 14px; flex-wrap: wrap; }
.small { font-size: 14px; color: #475569; }
@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }
  .list { grid-template-columns: 1fr; }
}