:root {
      --bg: #F7F6F3;
      --bg-alt: #EFEEEB;
      --fg: #1A1A1A;
      --muted: #5C5C5C;
      --accent: #0F766E; /* Deep Teal */
      --accent-light: #CCFBF1;
      --accent-dark: #0D9488;
      --card: #FFFFFF;
      --border: #E0DFDC;
    }

    * { font-family: 'Roboto', sans-serif; }
    code, .mono { font-family: 'JetBrains Mono', monospace; }
    body { background-color: var(--bg); color: var(--fg); }

    .accent-text { color: var(--accent); }
    .accent-bg { background-color: var(--accent); }
    .muted-text { color: var(--muted); }
    .card-bg { background-color: var(--card); }
    .border-color { border-color: var(--border); }

    .grid-bg {
      background-image: 
        linear-gradient(rgba(15, 118, 110, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 118, 110, 0.05) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes pulse-ring {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(1.5); opacity: 0; }
    }

    .animate-in { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; }
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }

    .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s ease; }
    .reveal.active { opacity: 1; transform: translateY(0); }

    .btn-primary {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(15, 118, 110, 0.25);
    }

    .service-card { transition: all 0.3s ease; }
    .service-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

    .blog-card { transition: all 0.3s ease; }
    .blog-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

    .status-dot::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      border-radius: 50%;
      background: var(--accent);
      animation: pulse-ring 2s infinite;
    }

    .nav-scrolled { background: rgba(247,246,243,0.95); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--border); }
    
    *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* Category Filter Buttons */
    .category-filter {
      background-color: var(--card);
      border: 1px solid var(--border);
      color: var(--muted);
    }
    .category-filter:hover {
      background-color: var(--bg-alt);
      color: var(--fg);
    }
    .category-filter.active {
      background-color: var(--accent);
      border-color: var(--accent);
      color: white;
    }

    /* Pagination */
    .pagination-btn {
      background-color: var(--card);
      transition: all 0.2s ease;
      color: var(--fg);
    }
    .pagination-btn:hover:not([disabled]):not(.accent-bg) {
      background-color: var(--bg-alt);
    }
    .pagination-btn.accent-bg {
      background-color: var(--accent) !important;
      color: white !important;
      border-color: var(--accent) !important;
    }

    /* Search Input */
    #search-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }