/* Basic Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root{
  --bg: #0b0c10;
  --surface: #101217;
  --surface-alt: #141821;
  --text: #e6e9ef;
  --muted: #a7b0c0;
  --primary: #2f6bd4;
  --primary-10: rgba(47,107,212,0.12);
  --border: #232737;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1000px 600px at 80% -20%, #1a1f2b 0%, #0b0c10 50%, #0b0c10 100%);
  color: var(--text);
  line-height: 1.6;
}
.container{
  width: min(1100px, 92vw);
  margin: 0 auto;
}
.site-header{
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,12,16,0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
.logo{ display:flex; gap:10px; align-items:center; font-weight:700; color:var(--text); text-decoration:none; }
.logo svg{ fill: var(--primary); }
.site-nav{ display:flex; gap:22px; align-items:center; }
.site-nav a{ color: var(--muted); text-decoration:none; font-weight:500; }
.site-nav a:hover{ color: var(--text); }
.menu-btn{ display:none; background:none; border:1px solid var(--border); border-radius:10px; padding:8px 10px; color:var(--text); }

.btn{
  display:inline-block; padding:12px 18px; border-radius: 12px;
  background: var(--primary); color:#07120e; text-decoration:none; font-weight:700;
  border: 1px solid transparent;
  box-shadow: var(--shadow);
}
.btn:hover{ transform: translateY(-1px); }
.btn-outline{
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
  box-shadow:none;
}
.btn-small{ padding:8px 12px; border-radius:10px; font-weight:600; }

.hero{
  padding: 80px 0 40px;
}
.hero-inner{
  display: grid; gap: 30px;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
}
.hero-copy h1{
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.1;
  margin: 0 0 14px 0;
}
.hero-copy p{ color: var(--muted); max-width: 54ch; margin-top:0; }
.hero-cta{ display:flex; gap: 12px; margin: 20px 0 10px; }
.badges{ display:flex; gap:10px; list-style:none; padding:0; margin:14px 0 0; flex-wrap: wrap; }
.badges li{ border:1px solid var(--border); padding:6px 10px; border-radius: 999px; font-size: 12px; color: var(--muted); }

.hero-art{ position: relative; min-height: 260px; }
.hero-art .card{
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--surface-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  max-width: 320px;
  margin: 12px;
}
.hero-art .card:nth-child(1){ transform: translate(30px, 0); }
.hero-art .card:nth-child(2){ transform: translate(120px, 10px); }
.hero-art .card:nth-child(3){ transform: translate(60px, 20px); }

.section{ padding: 64px 0; }
.section-alt{ background: linear-gradient(180deg, var(--surface-alt), var(--surface)); }
h2{ font-size: clamp(22px, 3vw, 34px); margin: 0 0 22px; }
.grid{ display:grid; gap:20px; }
.cards{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card{
  background: linear-gradient(180deg, var(--surface), var(--surface-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.gallery{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gallery-item{ border-radius: var(--radius); overflow:hidden; border: 1px solid var(--border); background: #0f1218; }
.gallery-item img{ width: 100%; height: 220px; object-fit: cover; display:block; }
.gallery-item figcaption{ padding: 10px 12px; color: var(--muted); font-size:14px; }

.about{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.about-card{ border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px; background: #0e1117; }
.facts{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.facts li strong{ color: var(--text); }
.muted{ color: var(--muted); font-size: 14px; }

.ticks{ list-style:none; padding:0; margin:12px 0 0; }
.ticks li{ padding-left: 22px; position: relative; }
.ticks li::before{
  content: "✓"; position: absolute; left: 0; color: var(--primary);
}

.contact-columns{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.contact-form{ display:flex; flex-direction: column; gap: 14px; }
.contact-form .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label{ display:flex; flex-direction: column; gap: 8px; font-weight:600; color: var(--text); }
.contact-form input, .contact-form textarea{
  background: #0e1117; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; color: var(--text);
}
.contact-form input:focus, .contact-form textarea:focus{ outline: 2px solid var(--primary-10); border-color: var(--primary); }
.actions{ align-items: center; }
.form-msg{ color: var(--muted); min-height: 1.2em; }

.site-footer{
  border-top: 1px solid var(--border);
  background: #0b0c10;
  padding: 30px 0;
  color: var(--muted);
}
.footer-inner{
  display:flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.footer-nav{ display:flex; gap:16px; }
.footer-nav a{ color: var(--muted); text-decoration:none; }
.footer-nav a:hover{ color: var(--text); }

@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-art .card{ transform: none !important; }
  .about{ grid-template-columns: 1fr; }
  .contact-columns{ grid-template-columns: 1fr; }
  .contact-form .row{ grid-template-columns: 1fr; }
  .site-nav{ display:none; }
  .menu-btn{ display:block; }
  .site-nav.open{ display:flex; flex-direction: column; position:absolute; top:60px; right:14px; background: var(--surface); border:1px solid var(--border); padding:14px; border-radius: var(--radius); }
}