:root {
      --primary: #2E3C56;
      --light: #f0f2ef;
      --dark: #222;
      --accent: #FBAF00;
    }

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

    html, body {
      height: 100%;
      display: flex;
      flex-direction: column;
      font-family: "Segoe UI", sans-serif;
      background: var(--light);
      color: var(--dark);
      line-height: 1.6;
    }
 
    header {
      background: var(--primary);
      color: white;
      padding: 20px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 {
      font-size: 1.8rem;
    }

    header a {
      outline: 0
    }

    header a, a:visited, a:hover, a:active {
      color: inherit;
    }

    header button {
      padding: 10px 20px;
      background: white;
      color: var(--primary);
      border: none;
      border-radius: 5px;
      font-weight: bold;
      cursor: pointer;
    }

    header button:hover {
      background: #f0f0f0;
    }

    section {
      padding: 60px 20px;
    }

    .about {
      background: url('data:image/svg+xml;utf8,<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="960" height="540" fill="%23F0F2EF"></rect><path d="M631 540L622 540L622 491L643 491L643 442L623 442L623 393L634 393L634 344L666 344L666 295L613 295L613 245L625 245L625 196L652 196L652 147L640 147L640 98L634 98L634 49L639 49L639 0L960 0L960 49L960 49L960 98L960 98L960 147L960 147L960 196L960 196L960 245L960 245L960 295L960 295L960 344L960 344L960 393L960 393L960 442L960 442L960 491L960 491L960 540L960 540Z" fill="%23e7f265"></path><path d="M750 540L752 540L752 491L727 491L727 442L751 442L751 393L731 393L731 344L724 344L724 295L733 295L733 245L715 245L715 196L724 196L724 147L735 147L735 98L718 98L718 49L743 49L743 0L960 0L960 49L960 49L960 98L960 98L960 147L960 147L960 196L960 196L960 245L960 245L960 295L960 295L960 344L960 344L960 393L960 393L960 442L960 442L960 491L960 491L960 540L960 540Z" fill="%23daeb00"></path><path d="M841 540L845 540L845 491L857 491L857 442L830 442L830 393L830 393L830 344L849 344L849 295L823 295L823 245L823 245L823 196L818 196L818 147L822 147L822 98L853 98L853 49L857 49L857 0L960 0L960 49L960 49L960 98L960 98L960 147L960 147L960 196L960 196L960 245L960 245L960 295L960 295L960 344L960 344L960 393L960 393L960 442L960 442L960 491L960 491L960 540L960 540Z" fill="%23a0ac02"></path></svg>') no-repeat center center;
      background-size: cover;
    }

    .main {
      background: url('data:image/svg+xml;utf8,<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="960" height="540" fill="%23F0F2EF"></rect><path d="M631 540L622 540L622 491L643 491L643 442L623 442L623 393L634 393L634 344L666 344L666 295L613 295L613 245L625 245L625 196L652 196L652 147L640 147L640 98L634 98L634 49L639 49L639 0L960 0L960 49L960 49L960 98L960 98L960 147L960 147L960 196L960 196L960 245L960 245L960 295L960 295L960 344L960 344L960 393L960 393L960 442L960 442L960 491L960 491L960 540L960 540Z" fill="%23e7f265"></path><path d="M750 540L752 540L752 491L727 491L727 442L751 442L751 393L731 393L731 344L724 344L724 295L733 295L733 245L715 245L715 196L724 196L724 147L735 147L735 98L718 98L718 49L743 49L743 0L960 0L960 49L960 49L960 98L960 98L960 147L960 147L960 196L960 196L960 245L960 245L960 295L960 295L960 344L960 344L960 393L960 393L960 442L960 442L960 491L960 491L960 540L960 540Z" fill="%23daeb00"></path><path d="M841 540L845 540L845 491L857 491L857 442L830 442L830 393L830 393L830 344L849 344L849 295L823 295L823 245L823 245L823 196L818 196L818 147L822 147L822 98L853 98L853 49L857 49L857 0L960 0L960 49L960 49L960 98L960 98L960 147L960 147L960 196L960 196L960 245L960 245L960 295L960 295L960 344L960 344L960 393L960 393L960 442L960 442L960 491L960 491L960 540L960 540Z" fill="%23a0ac02"></path></svg>') no-repeat center center;
      background-size: cover;
      padding: 60px 20px;
      text-align: center;
    }

    .main p {
      max-width: 700px;
      margin: auto;
      font-size: 1.2rem;
    }


   .highlight {
  background: url('data:image/svg+xml;utf8,<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="960" height="540" fill="%23F0F2EF"></rect><path d="M331 0L340 0L340 49L319 49L319 98L339 98L339 147L328 147L328 196L296 196L296 245L349 245L349 295L337 295L337 344L310 344L310 393L322 393L322 442L328 442L328 491L323 491L323 540L0 540L0 491L0 491L0 442L0 442L0 393L0 393L0 344L0 344L0 295L0 295L0 245L0 245L0 196L0 196L0 147L0 147L0 98L0 98L0 49L0 49L0 0L0 0Z" fill="%23e7f265"></path><path d="M212 0L210 0L210 49L235 49L235 98L211 98L211 147L231 147L231 196L238 196L238 245L229 245L229 295L247 295L247 344L238 344L238 393L227 393L227 442L244 442L244 491L219 491L219 540L0 540L0 491L0 491L0 442L0 442L0 393L0 393L0 344L0 344L0 295L0 295L0 245L0 245L0 196L0 196L0 147L0 147L0 98L0 98L0 49L0 49L0 0L0 0Z" fill="%23daeb00"></path><path d="M121 0L117 0L117 49L105 49L105 98L132 98L132 147L132 147L132 196L113 196L113 245L139 245L139 295L139 295L139 344L144 344L144 393L140 393L140 442L109 442L109 491L105 491L105 540L0 540L0 491L0 491L0 442L0 442L0 393L0 393L0 344L0 344L0 295L0 295L0 245L0 245L0 196L0 196L0 147L0 147L0 98L0 98L0 49L0 49L0 0L0 0Z" fill="%23a0ac02"></path></svg>') no-repeat center center;
  background-size: cover;
  text-align: center;
  padding: 60px 20px;
}
 

    .highlight h2 {
      font-size: 1.6rem;
      margin-bottom: 20px;
    }

    .highlight p {
      margin: auto;
      margin-bottom: 20px;
    }

    .highlight img {
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .highlight button {
      margin-top: 20px;
      background: var(--primary);
      color: white;
      border: none;
      padding: 10px 18px;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
    }

    .highlight button:hover {
      background: var(--accent);
    }

    .domain-list {
    }

    .domain-list h2{
      text-align: center;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 20px;
      padding: 20px;
    }

    .domain-tile {
      background: var(--light);
      border: 1px solid #ddd;
      padding: 20px;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;     
      text-align: center;
      max-width: 100%;        
      box-sizing: border-box;
    }

    .domain-tile:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .domain-tile a {
      text-decoration: none;
      color: var(--primary);
    }

    #categories {
      padding: 40px 20px;
      background: #f9f9f9;
      text-align: center;
    }
   
    .section-title {
      font-size: 2rem;
      margin-bottom: 20px;
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      justify-items: center;
      align-items: stretch;
    }
    
    .category-tile {
      background: white;
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s;
      width: 100%;
      max-width: 280px;
      text-align: center;
    }
    
    .category-tile:hover {
      transform: translateY(-5px);
    }
    
    .category-tile a {
      text-decoration: none;
      font-weight: bold;
      color: #1a73e8;
      display: block;
      margin-bottom: 10px;
    }
    
    .category-tile p {
      color: #555;
      font-size: 0.95em;
      text-align: justify;
    }

    footer {
      margin-top: auto;
      background: var(--primary);
      color: white;
      padding: 30px 20px;
      text-align: center;
    }

    footer a {
      color: white;
      text-decoration: underline;
    }

    .blog-container {
      display: flex;
      justify-content: center;
      padding: 40px 20px;
      gap: 40px;
      max-width: 1200px;
      margin: auto;
    }

   .blog-content {
      max-width: 700px;
      flex: 1;
      font-family: 'Segoe UI', sans-serif;
      line-height: 1.7;
      color: #333;
    }
    
    .blog-content h1 {
      font-size: 2.4rem;
      margin-bottom: 0.5em;
      color: var(--primary);
    }
    
    .blog-content h2 {
      font-size: 1.8rem;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      color: var(--primary);
      border-bottom: 2px solid #eee;
      padding-bottom: 5px;
    }
    
    .blog-content h3 {
      font-size: 1.3rem;
      margin-top: 1.2em;
      margin-bottom: 0.3em;
      color: #555;
    }
    
    .blog-content p {
      margin-bottom: 1em;
    }
    
    .blog-content ul {
      margin-left: 1.2em;
      margin-bottom: 1em;
    }
    
    .blog-sidebar {
      width: 450px;
      flex-shrink: 0;
      position: relative;
      top: 10px;
    }
    
    .blog-sidebar h3 {
      font-size: 1.1rem;
      margin-bottom: 0.5em;
      color: var(--primary);
    }
    
    .blog-sidebar ul {
      list-style: none;
      padding: 0;
    }
    
    .blog-sidebar li {
      margin-bottom: 10px;
    }
    
    .blog-sidebar a {
      text-decoration: none;
      color: #0066cc;
    }
    
    .blog-sidebar a:hover {
      text-decoration: underline;
    }
    
    /* Responsive tweaks */
    @media (max-width: 900px) {
      .blog-container {
        flex-direction: column;
      }
    
      .blog-sidebar {
        width: 100%;
        margin-top: 40px;
      }
    }
    
    .sidebar {
      width: 250px;
      background: #f4f4f4;
      border-right: 1px solid #ccc;
      padding: 1rem;
      height: 100vh;
      overflow-y: auto;
      position: fixed;
      left: 0;
      top: 0;
    }

  .search-bar {
    display: flex;
    justify-content: center;
    margin: 2rem auto;
    padding: 1rem;
  }
  
  #domainSearch {
    padding: 15px 20px;
    width: 70%;
    max-width: 500px;
    font-size: 1.1rem;
    border: 2px solid var(--primary, #0077cc);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  
  #domainSearch:focus {
    outline: none;
    border-color: #ffaa00;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
  }