:root {
  --sand: #f4e3c1; --ink: #23303a; --soft: #5b6c78;
  --accent: #ffcf62; --teal: #2a9d8f; --rust: #c94f3d;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100%; overflow-x: hidden; }
body { font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--sand); color: var(--ink); line-height: 1.55; }
.nav { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; background: rgba(35,48,58,0.92); color: var(--sand);
  position: sticky; top: 0; z-index: 5; }
.logo { font-weight: 900; letter-spacing: 0.14em; }
.btn { display: inline-block; text-decoration: none; font-weight: 900;
  letter-spacing: 0.08em; color: #23303a; background: linear-gradient(160deg, var(--accent), #ff9f4d);
  border-radius: 999px; padding: 14px 30px; box-shadow: 0 8px 22px rgba(255,159,77,0.45);
  transition: transform 0.12s, box-shadow 0.12s; }
.btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 28px rgba(255,159,77,0.6); }
.btn.small { padding: 8px 18px; font-size: 14px; }
.btn.big { font-size: 19px; }
.hero { position: relative; display: grid; grid-template-columns: minmax(300px, 560px) 1fr;
  gap: 24px; align-items: center; padding: 40px 26px 46px;
  background: linear-gradient(170deg, #2e3f4c 0%, #1c2a34 55%, #24303a 100%); color: var(--sand); }
.hero-copy h1 { font-size: clamp(38px, 7vw, 72px); letter-spacing: 0.05em; line-height: 1.05;
  color: var(--accent); text-shadow: 0 4px 24px rgba(0,0,0,0.5); }
.hero-copy .tagline { font-size: clamp(15px, 2.2vw, 20px); color: #cfe0e8; margin: 12px 0 22px; max-width: 42ch; }
.hero-copy .fine { font-size: 12px; color: #8fa5b0; margin-top: 12px; }
#hero-preview { width: 100%; min-width: 260px; height: 420px; display: block;
  border-radius: 18px; border: 1px solid rgba(255,207,98,0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45); background: #8fd3e8; }
main { padding: 10px 26px 30px; max-width: 1100px; margin: 0 auto; }
.block { background: #fff8ea; border: 1px solid #e8d5ad; border-radius: 18px;
  padding: 26px 28px; margin: 22px 0; box-shadow: 0 10px 26px rgba(120,90,40,0.12); }
.block h2 { font-size: 24px; margin-bottom: 14px; color: var(--teal); letter-spacing: 0.04em; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
#features { list-style: none; }
#features li { padding: 9px 0 9px 30px; position: relative; border-bottom: 1px dashed #e3cf9f; }
#features li::before { content: "🏁"; position: absolute; left: 0; }
#features li:last-child { border-bottom: 0; }
#controls { background: #fdeecd; border: 1px solid #ecd39c; border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
#controls ul { list-style: none; margin-top: 8px; }
#controls li { padding: 5px 0; font-size: 14.5px; color: var(--soft); }
#controls b { color: var(--ink); }
#gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#gallery figure { background: #1c2a34; border-radius: 14px; padding: 10px; }
#gallery img { width: 100%; height: auto; display: block; border-radius: 9px; background: #8fd3e8; }
#gallery figcaption { color: #cfe0e8; font-size: 13px; padding: 8px 4px 2px; }
footer { text-align: center; padding: 22px; font-size: 13px; color: var(--soft); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 26px 18px 34px; }
  #hero-preview { height: 300px; order: 2; }
  .two-col { grid-template-columns: 1fr; }
  #gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .nav { padding: 10px 14px; }
  main { padding: 8px 12px 22px; }
  .block { padding: 18px 16px; }
  #hero-preview { height: 240px; }
  #gallery { grid-template-columns: 1fr; }
  .btn.big { font-size: 17px; padding: 13px 24px; }
  .hero-copy h1 { font-size: 40px; }
}