:root { --bg:#fafafa; --fg:#222; --muted:#666; --brand:#111; --accent:#f4b400; --card:#fff; --border:#ddd; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--fg); background:var(--bg); }
a { color: var(--brand); }
.btn { display:inline-block; background:var(--accent); color:#fff; text-decoration:none; padding:.65rem 1rem; border-radius:8px; font-weight:600; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
header { background:#fff; border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; }
.logo { height:64px; width:auto; }
.hero { text-align:center; padding:28px 0 10px; }
section.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; margin:24px 0; box-shadow:0 2px 8px rgba(0,0,0,.04); }
h1 { margin:.5rem 0 0; font-size:clamp(24px, 3vw, 36px); color:var(--brand); }
h2 { margin:0 0 10px; font-size:clamp(20px, 2.4vw, 28px); }
.grid { display:grid; gap:16px; }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .grid.cols-3 { grid-template-columns: 1fr; } }
.video { position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; }
.video iframe, .video img { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
label { display:block; font-size:.9rem; color:#444; margin-bottom:4px; }
input, textarea { width:100%; padding:.65rem .75rem; border:1px solid var(--border); border-radius:10px; outline:none; }
input:focus, textarea:focus { border-color:#aaa; box-shadow:0 0 0 3px rgba(0,0,0,.05); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
footer { text-align:center; color:var(--muted); padding:24px 10px 40px; font-size:.9rem; }
.small { color:#555; font-size:.95rem; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.hero h1 { line-height:1.2; }
@media (max-width: 700px) { .logo { height:52px; } }

/* v4 tweaks */
.card .videos-grid { display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .card .videos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .card .videos-grid { grid-template-columns: 1fr; } }
.video-card { background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.video-thumb { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
.video-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
.video-body { padding:10px 12px; }
.video-title { font-size:.95rem; font-weight:600; line-height:1.25; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; }