/* Google-шрифт */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&display=swap");

/* ====== переменные ====== */
:root{
  --primary:#6366f1;       /* индиго-600 */
  --accent:#fbbf24;        /* amber-400  */
  --text:#1f2937;          /* gray-800   */
  --bg:#ffffff;
  --bg-alt:#f9fafb;        /* gray-50    */
  --radius:14px;
  --shadow:0 4px 14px rgba(0,0,0,.05);
  --maxw:1200px;
}

/* ====== базовые ====== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Nunito",sans-serif;
  color:var(--text);
  background:var(--bg-alt);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ====== header ====== */
header{background:var(--bg);box-shadow:var(--shadow)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 1rem}
.header-flex{display:flex;align-items:center;justify-content:space-between;height:72px}

.logo{display:flex;align-items:center;text-decoration:none;gap:.5rem}
.logo img{height:40px}
.logo-word{font-size:1.4rem;font-weight:800;color:var(--primary)}
.logo-accent{color:var(--accent)}

.nav-list{display:flex;list-style:none;gap:1.5rem;font-weight:600}
.nav-list a{text-decoration:none;color:var(--text);transition:color .2s}
.nav-list a:hover{color:var(--primary)}

/* ====== hero ====== */
.hero{
  background:linear-gradient(135deg,#c7d2fe 0%,#e0e7ff 100%);
  padding:4rem 1rem;text-align:center
}
.hero h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem;font-weight:800;color:#111827}
.hero p{font-size:clamp(1rem,2.2vw,1.25rem);max-width:650px;margin:0 auto;color:#374151}

/* ====== main ====== */
.main-content{flex:1;padding:2rem 1rem}
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.5rem
}
.video-wrapper{
  position:relative;
  padding-top:56.25%;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:#000
}
.video-wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ====== about ====== */
.about{margin-top:3rem}
.about h2{font-size:1.75rem;font-weight:700;margin-bottom:.5rem}
.about p{margin:.6rem 0 0;font-size:1.05rem;line-height:1.6}
.link{color:var(--primary);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}

/* ====== footer ====== */
footer{
  background:var(--bg);
  box-shadow:0 -2px 6px rgba(0,0,0,.04);
  padding:1rem 0;text-align:center;
  font-size:.875rem;margin-top:auto
}

/* ====== visually hidden ====== */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ====== dark-mode ====== */
@media (prefers-color-scheme:dark){
  :root{ --bg:#1f2937; --bg-alt:#111827; --text:#e5e7eb; --shadow:none }
  body{background:var(--bg-alt)}
  header,footer{background:var(--bg)}
  .nav-list a:hover{color:var(--accent)}
  .hero{background:linear-gradient(135deg,#4f46e5 0%,#4338ca 100%)}
  .hero h1,.hero p{color:#f3f4f6}
}
 .contact {
   margin-top: 2.5rem;
   padding-top: 1rem;
   border-top: 1px solid #e5e7eb;
}