/* AeroTube site styles: minimal, fast, responsive */
:root{
  --bg:#0a0a0a; --panel:#111; --border:#1f1f1f; --text:#f2f2f2; --muted:#b5b5b5; --btn:#141414; --btn-border:#2a2a2a; --btn-hover:#1a1a1a;
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif }
a{ color:var(--text); text-decoration:underline dotted rgba(255,255,255,0.2) }
a:hover{ text-decoration:underline }
.wrap{ max-width:1040px; margin:0 auto; padding:0 16px }

.site-header{ position:sticky; top:0; z-index:10; background:#0a0a0a; border-bottom:1px solid var(--border) }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--text); font-weight:700; text-decoration:none }
.brand .name{ text-decoration:none }
.site-header .brand, .site-header .brand *{ text-decoration:none !important }
.brand .logo{ display:block }
.brand .name{ letter-spacing:0.2px }
.nav a{ color:var(--muted); margin-left:14px; text-decoration:none; padding:6px 10px; border-radius:8px; border:1px solid transparent }
.nav a:hover{ background:var(--btn-hover); border-color:var(--btn-border) }

.hero{ padding:60px 0 30px; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00)) }
.hero .wrap{ text-align:left }
.hero h1{ margin:0 0 8px; font-size:36px; line-height:1.15 }
.hero .tag{ margin:0 0 20px; color:var(--muted) }
.cta{ display:flex; gap:12px; flex-wrap:wrap }
.hero-visual{ margin:20px 0 0; border:1px solid var(--border); background:var(--panel); border-radius:12px; overflow:hidden }
.hero-visual img{ display:block; width:100%; height:auto }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--btn-border); background:var(--btn); color:var(--text); border-radius:10px; text-decoration:none; font-weight:600 }
.btn:hover{ background:var(--btn-hover) }
.btn img{ display:block; height:40px }

/* Store badges: no padding/border around the image */
.badge{ display:inline-block; padding:0; border:0; background:transparent; border-radius:0 }
.badge img{ display:block; height:48px }
.btn:active{ transform:translateY(1px) }

.features{ padding:20px 0 60px }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px }
.card h3{ margin:0 0 6px; font-size:18px }
.card p{ margin:0; color:var(--muted) }

.doc .wrap{ padding:24px 16px }
.doc .lead{ color:var(--muted) }
.doc h1{ margin:8px 0 8px }
.doc h2{ margin:22px 0 8px; font-size:20px }
.doc p, .doc li{ color:var(--muted) }
.doc .gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px; margin:12px 0 24px }
.doc .gallery img{ display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:10px; background:var(--panel) }

.site-footer{ border-top:1px solid var(--border); padding:14px 0; background:#0a0a0a }
.site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.site-footer .left{ display:flex; align-items:center; gap:8px; color:var(--muted) }
.site-footer .right a{ color:var(--muted) }

@media (max-width:600px){
  .hero h1{ font-size:28px }
}