:root{
      --samarkand-gold: #D4AF37;
      --gold-dark: #b3862b;
      --white: #ffffff;
      --muted: #faf9f6;
      --text: #1b1b1b;
      --card-radius: 16px;
      --hero-image: url('src/hero.webp');
    }
    *{
        box-sizing:border-box;
        margin:0;
        padding:0;
        text-decoration: none;
        list-style: none;
    }
    body{
      font-family: 'Inter', sans-serif;
      background: var(--muted);
      color:var(--text);
      line-height:1.5;
    }
    header{
      background:var(--white);
      padding:20px 40px;
      display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
      box-shadow:0 4px 20px rgba(0,0,0,0.08);
      position:sticky;top:0;z-index:50;
    }
    .logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
    .logo-img{
      width:50px;height:50px;object-fit:contain;
      background:transparent;
      background-color:var(--white);
    }
    .site-title{font-family:'Playfair Display',serif;font-weight:700;font-size:22px}
    nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
    nav a{margin-left:0;text-decoration:none;color:var(--text);font-weight:500;transition:color .2s}
    nav a:hover{color:var(--samarkand-gold)}
    .hero{
      background-image: url('./src/1674-1692186472.webp');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      min-height:70vh;display:flex;align-items:center;justify-content:center;
      text-align:center;color:#fff;position:relative;
    }
    .hero::after{
      content:'';position:absolute;inset:0;background:rgba(0,0,0,0.45);
    }
    .hero-content{position:relative;z-index:1;max-width:900px;padding:20px}
    .hero h1{font-family:'Playfair Display',serif;font-size:38px;margin-bottom:18px}
    .hero p{font-size:18px;line-height:1.6}

    .section{padding:60px 20px;max-width:1200px;margin:auto}
    .section h2{text-align:center;font-size:30px;font-family:'Playfair Display',serif;margin-bottom:40px;color:var(--gold-dark)}

    .tours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
    img, video{max-width:100%;height:auto;display:block}
    .card{
      background:var(--white);
      border-radius:var(--card-radius);
      overflow:hidden;display:flex;flex-direction:column;
      box-shadow:0 8px 28px rgba(0,0,0,0.08);
      transition:transform .25s ease, box-shadow .25s ease;
      text-decoration:none;color:inherit;
    }
    .card:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(0,0,0,0.12)}
    .card img{width:100%;height:200px;object-fit:cover}
    .card-body{padding:20px;display:flex;flex-direction:column;flex:1;gap:10px}
    .card-title{font-weight:600;font-size:18px;margin-bottom:4px;display:inline-block;color:inherit}
    .card-price{margin-top:auto;font-weight:700;font-size:18px;color:var(--samarkand-gold)}
    .btn{display:inline-block;border-radius:999px;padding:10px 16px;font-weight:700}
    .btn-telegram{background:linear-gradient(135deg,var(--samarkand-gold),var(--gold-dark));color:#fff;align-self:flex-start;transition:transform .2s, box-shadow .2s}
    .btn-telegram:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,0.12)}

    footer{
      background:#111;color:#ddd;padding:40px 20px;margin-top:60px;
    }
    .footer-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px}
    .footer-col h3{font-family:'Playfair Display',serif;font-size:20px;color:var(--samarkand-gold);margin-bottom:16px}
    .footer-col p,.footer-col a{color:#bbb;text-decoration:none;display:block;margin-bottom:8px;font-size:14px}
    .footer-col p a{display:inline}
    .footer-col a:hover{color:#fff}
    .copyright{text-align:center;color:#666;font-size:13px;margin-top:30px}

    /* Responsive breakpoints */
    @media (max-width:1200px){
      .section{padding:56px 20px}
      .hero-content{max-width:820px}
    }
    @media (max-width:992px){
      header{padding:16px 24px}
      nav{gap:16px}
      .hero{min-height:60vh}
      .hero h1{font-size:32px}
      .hero p{font-size:16px}
      .section{padding:48px 20px}
    }
    @media (max-width:768px){
      header{padding:14px 18px}
      .logo-img{width:44px;height:44px}
      .site-title{font-size:20px}
      nav{width:100%;justify-content:flex-start}
      .hero-content{padding:16px}
      .section h2{font-size:26px;margin-bottom:28px}
      .card img{height:180px}
    }
    @media (max-width:480px){
      header{padding:12px 14px}
      nav{gap:12px}
      .hero{min-height:56vh;padding:16px}
      .hero h1{font-size:24px}
      .hero p{font-size:14px}
      .btn{padding:9px 14px}
      .card-body{padding:16px}
    }