:root {
  --bg:#FBF8F6;
  --card:#FFFFFF;
  --accent:#B08B4F;
  --muted:#7A6A5A;
  --text:#2E2A28;
  --radius:14px;
  --shadow:0 8px 24px rgba(46,42,40,0.08);
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, -apple-system, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg) 0%, #FFFDFB 100%);
  color: var(--text);
  line-height: 1.6;
}

.container {
  width: 90%;
  margin: 0 auto;
  max-width: 1600px;
}

/* Header */
header {
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(46,42,40,0.08);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo .mark {
  width: 52px;
  height: 52px;
  background: var(--accent);
  color: white;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  font-size: 24px;
}

.logo h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.muted {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Navigation */
nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu {
  display: flex;
  gap: 18px;
  align-items: center;
}

.menu a {
  color: var(--muted);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  transition: all .2s ease;
}

.menu a:hover {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.cta {
  background: linear-gradient(90deg, var(--accent), #D3A86A);
  color: white;
  font-weight: 600;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  z-index: 99;
  padding: 8px 0;
  margin-top: 2px;
}

.dropdown-content a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

.dropdown-content a:hover {
  background: rgba(176, 139, 79, 0.08);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Search Bar */
.search-container {
  margin: 24px 0;
}

#search {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  border-radius: var(--radius);
  border: 2px solid rgba(46,42,40,0.15);
  outline: none;
  box-shadow: 0 6px 18px rgba(46,42,40,0.1);
  background: var(--card);
  color: var(--text);
  transition: all 0.25s ease;
}

#search::placeholder {
  color: var(--muted);
}

#search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(176,139,79,0.25);
}

/* Services */
.search-services {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 24px 0 28px;
}

.service-card {
  flex: 1;
  min-width: 200px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: all .25s ease;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* Responsive */
@media (max-width: 680px) {
  .menu {
    display: none;
  }

  .topbar {
    flex-direction: column;
    gap: 10px;
  }
}


.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo .mark {
  width: 52px;
  height: 52px;
  background: var(--accent);
  color: white;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  font-size: 24px;
}

.logo h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.muted {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Navigation */
nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu {
  display: flex;
  gap: 18px;
  align-items: center;
}

.menu a {
  color: var(--muted);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  transition: all .2s ease;
}

.menu a:hover {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.cta {
  background: linear-gradient(90deg, var(--accent), #D3A86A);
  color: white;
  font-weight: 600;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  z-index: 99;
  padding: 8px 0;
  margin-top: 2px;
}

.dropdown-content a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

.dropdown-content a:hover {
  background: rgba(176, 139, 79, 0.08);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Search Bar */
.search-container {
  margin: 24px 0;
}

#search {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  border-radius: var(--radius);
  border: 2px solid rgba(46,42,40,0.15);
  outline: none;
  box-shadow: 0 6px 18px rgba(46,42,40,0.1);
  background: var(--card);
  color: var(--text);
  transition: all 0.25s ease;
}

#search::placeholder {
  color: var(--muted);
}

#search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(176,139,79,0.25);
}

/* Services */
.search-services {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 24px 0 28px;
}

.service-card {
  flex: 1;
  min-width: 200px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: all .25s ease;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* Responsive */
@media (max-width: 680px) {
  .menu {
    display: none;
  }

  .topbar {
    flex-direction: column;
    gap: 10px;
  }
}


.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo .mark {
  width: 52px;
  height: 52px;
  background: var(--accent);
  color: white;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  font-size: 24px;
}

.logo h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.muted {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Navigation */
nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu {
  display: flex;
  gap: 18px;
  align-items: center;
}

.menu a {
  color: var(--muted);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  transition: all .2s ease;
}

.menu a:hover {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.cta {
  background: linear-gradient(90deg, var(--accent), #D3A86A);
  color: white;
  font-weight: 600;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  z-index: 99;
  padding: 8px 0;
  margin-top: 2px;
}

.dropdown-content a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

.dropdown-content a:hover {
  background: rgba(176, 139, 79, 0.08);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Search Bar */
.search-container {
  margin: 24px 0;
}

#search {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  border-radius: var(--radius);
  border: 2px solid rgba(46,42,40,0.15);
  outline: none;
  box-shadow: 0 6px 18px rgba(46,42,40,0.1);
  background: var(--card);
  color: var(--text);
  transition: all 0.25s ease;
}

#search::placeholder {
  color: var(--muted);
}

#search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(176,139,79,0.25);
}

/* Services */
.search-services {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 24px 0 28px;
}

.service-card {
  flex: 1;
  min-width: 200px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: all .25s ease;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* Responsive */
@media (max-width: 680px) {
  .menu {
    display: none;
  }

  .topbar {
    flex-direction: column;
    gap: 10px;
  }
}

    .logo{display:flex; align-items:center; gap:12px;}
    .logo .mark{
      width:52px;
      height:52px;
      background:var(--accent);
      color:white;
      display:grid;
      place-items:center;
      border-radius:14px;
      font-size:24px;
    }
    .logo h1{font-size:22px; font-weight:700; margin:0;}
    .muted{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:1px;}

    /* Navigation */
    nav{display:flex; align-items:center; gap:16px;}
    .menu{display:flex; gap:18px; align-items:center;}
    .menu a{
      color:var(--muted);
      text-decoration:none;
      padding:10px 16px;
      border-radius:10px;
      font-weight:600;
      transition:all .2s ease;
    }
    .menu a:hover{
      background:var(--card);
      color:var(--text);
      box-shadow:0 6px 16px rgba(0,0,0,0.08);
    }
    .cta{
      background:linear-gradient(90deg,var(--accent),#D3A86A);
      color:white;
      font-weight:600;
    }

    /* Dropdown */
    .dropdown{position:relative;}
    .dropdown-content{
   display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  z-index: 99;
  padding: 8px 0;
  /* მცირე ზღვარი hover gap-ის ასაცილებლად */
  margin-top: 2px;
    }
    .dropdown-content a{
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
    }
    .dropdown-content a:hover{
background: rgba(176, 139, 79, 0.08);
    }
    .dropdown:hover .dropdown-content{display:block;}

    @keyframes fadeIn{
      from{opacity:0; transform:translateY(10px);}
      to{opacity:1; transform:translateY(0);}
    }

    /* Search */
    .search-container{margin:16px 0;}
    #search{
      width:100%;
      padding:14px 20px;
      font-size:16px;
      border-radius:var(--radius);
      border:2px solid rgba(46,42,40,0.15);
      outline:none;
      box-shadow:0 6px 18px rgba(46,42,40,0.1);
    }
    #search:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 4px rgba(176,139,79,0.25);
    }

    /* Services */
    .search-services{
      display:flex;
      flex-wrap:wrap;
      gap:18px;
      margin-bottom:28px;
    }
    .service-card{
      flex:1;
      min-width:200px;
      background:var(--card);
      border-radius:var(--radius);
      padding:20px;
      text-align:center;
      font-weight:700;
      box-shadow:var(--shadow);
      transition:all .25s ease;
      cursor:pointer;
    }
    .service-card:hover{
      transform:translateY(-6px);
      box-shadow:0 14px 30px rgba(0,0,0,0.12);
    }
        /* Cute Dog Section */
    .cute-dog {
      display: flex;
      justify-content: center;
      margin: 40px 0;
    }

    .cute-dog img {
      width: 90%;
      max-width: 900px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .cute-dog img:hover {
      transform: scale(1.03);
      box-shadow: 0 18px 40px rgba(0,0,0,0.15);
    }

    /* Articles */
    main{margin:30px 0;}
    h2{font-size:24px; margin-bottom:20px;}
    .articles{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
      gap:24px;
    }
    article.card{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      transition:transform .3s ease, box-shadow .3s ease;
    }
    article.card:hover{
      transform:translateY(-8px);
      box-shadow:0 18px 40px rgba(46,42,40,0.12);
    }
    .thumb{
      width:100%;
      height:200px;
      object-fit:cover;
    }
    .card-body{padding:18px;}
    .meta{font-size:13px; color:var(--muted); margin-bottom:8px;}
    .card h3{margin:0 0 8px 0; font-size:18px;}
    .card p{color:var(--muted);}
    .read{
      display:inline-block;
      margin-top:12px;
      color:var(--accent);
      font-weight:700;
      text-decoration:none;
    }

    /* Footer */
    footer{
      margin:60px 0 40px;
      border-top:1px solid rgba(46,42,40,0.08);
      padding-top:22px;
      text-align:center;
    }
    .small{font-size:13px; color:var(--muted);}

    /* Responsive */
    @media (max-width:680px){
      .menu{display:none;}
      .topbar{flex-direction:column; gap:10px;}
    }