:root {
  /* NEW COLOR PALETTE */
  --primary: #1D4ED8;        /* Royal Blue */
  --secondary: #312E81;      /* Deep Indigo */
  --accent: #06B6D4;         /* Bright Cyan */
  --highlight: #F97316;      /* Orange */
  --bg-main: #F8FAFC;        /* Soft White Blue */
  --bg-section: #E0F2FE;     /* Light Sky */
  --bg-card: #FFFFFF;        /* Card Background */
  --text-main: #0F172A;      /* Main Text */
  --text-secondary: #475569; /* Secondary Text */

  /* NEW BORDER COLORS */
  --border-main: #94A3B8;
  --border-card: #CBD5E1;
  --border-highlight: #38BDF8;
  --border-warning: #FDBA74;

  /* DESIGN TOKENS */
  --radius-card: 20px;
  --radius-btn: 10px;
  --shadow-soft: 0 4px 15px -3px rgba(0, 0, 0, 0.05), 0 2px 6px -2px rgba(0, 0, 0, 0.025);
  --shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--secondary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* TYPOGRAPHY */
h1, h2, h3, h4 {
  color: var(--text-main);
  margin-bottom: 1rem;
  line-height: 1.2;
}

h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 600; }
p { margin-bottom: 1rem; color: var(--text-secondary); }

/* UTILITIES */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.py-4 { padding: 4rem 0; }
.bg-section { background-color: var(--bg-section); }

/* BUTTONS */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-btn);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--secondary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-accent {
  background-color: var(--accent);
  color: #fff;
}
.btn-accent:hover {
  background-color: #0891b2;
  color: #fff;
}

.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-outline:hover {
  background-color: var(--primary);
  color: #fff;
}

/* HEADER & NAV */
.site-header {
  background-color: #fff;
  border-bottom: 1px solid var(--border-main);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.brand {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.brand .domain {
  color: var(--accent);
  font-weight: 600;
}

.footer-brand .domain {
  color: #E2E8F0;
}

.brand-icon {
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  color: var(--text-main);
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--primary);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-main);
}

/* HERO SECTION */
.hero {
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  color: #fff;
  padding: 6rem 0;
  text-align: center;
}

.hero h1, .hero p {
  color: #fff;
}

.hero p {
  font-size: 1.25rem;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto 2rem;
}

/* CARDS */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-highlight);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* DASHBOARD COMPONENTS */
.dashboard-panel {
  background-color: #fff;
  border: 1px solid var(--border-main);
  border-radius: var(--radius-card);
  padding: 2rem;
  margin-bottom: 2rem;
}

.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

th, td {
  padding: 1rem;
  border-bottom: 1px solid var(--border-card);
}

th {
  background-color: var(--bg-section);
  color: var(--secondary);
  font-weight: 600;
}

/* INFO / WARNING PANELS */
.info-panel {
  background-color: #FFF7ED;
  border: 1px solid var(--border-warning);
  border-left: 5px solid var(--highlight);
  padding: 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.info-panel h3 {
  color: var(--highlight);
  margin-bottom: 0.5rem;
}

/* DISCLOSURE */
.affiliate-disclosure {
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--bg-section);
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 2rem;
  border: 1px solid var(--border-card);
}

/* ACCORDION */
.accordion-item {
  border: 1px solid var(--border-card);
  border-radius: 8px;
  margin-bottom: 1rem;
  background: #fff;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  text-align: left;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-main);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1.5rem;
}

.accordion-content p {
  padding: 1rem 0;
}

.accordion-header.active {
  background-color: var(--bg-section);
  color: var(--primary);
}

/* FORMS */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-main);
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: var(--border-highlight);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* BADGES */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.badge-gambling {
  background-color: #E0E7FF;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.badge-general {
  background-color: #CCFBF1;
  color: #0F766E;
  border: 1px solid #0F766E;
}

.badge-technical {
  background-color: #F1F5F9;
  color: #475569;
  border: 1px solid var(--border-main);
}

/* FILTERS */
.filter-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.filter-btn {
  background: #fff;
  border: 1px solid var(--border-card);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-secondary);
}

.filter-btn.active, .filter-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* FOOTER */
.site-footer {
  background-color: #0F172A;
  color: #E2E8F0;
  padding: 4rem 0 2rem;
  margin-top: 4rem;
  border-top: 4px solid #38BDF8;
}

.site-footer a {
  color: #E2E8F0;
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: #F97316;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-brand {
  color: #38BDF8 !important;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.footer-brand svg {
  stroke: #38BDF8;
}

.footer-subtitle {
  color: #E2E8F0;
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.footer-heading {
  color: #38BDF8;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.footer-desc {
  color: #E2E8F0;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  font-size: 0.95rem;
}

.footer-disclosure {
  background-color: rgba(15, 23, 42, 0.5);
  border: 1px solid #38BDF8;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 3rem;
}

.disclosure-heading {
  color: #38BDF8;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.footer-disclosure p {
  color: #E2E8F0;
  font-size: 0.85rem;
  margin-bottom: 0;
}

.footer-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-top: 1px solid #334155;
  padding-top: 2rem;
  gap: 1rem;
}

.footer-copyright p {
  margin-bottom: 0.25rem;
  color: #E2E8F0;
}

.educational-notice {
  font-size: 0.85rem;
  color: #94A3B8 !important;
}

.footer-bottom-links {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
  color: #94A3B8;
}

.footer-bottom-links a {
  color: #E2E8F0;
}

/* RESPONSIVE FOR FOOTER */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* COOKIE BANNER */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid var(--border-card);
  padding: 1.5rem;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.cookie-banner.show {
  transform: translateY(0);
}

.cookie-text {
  flex: 1;
  min-width: 300px;
}

.cookie-text p {
  margin: 0;
  font-size: 0.9rem;
}

.cookie-actions {
  display: flex;
  gap: 0.5rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 2rem;
    border-bottom: 1px solid var(--border-card);
    box-shadow: var(--shadow-soft);
  }
  
  .nav-links.active {
    display: flex;
  }
  
  .mobile-menu-toggle {
    display: block;
  }
  
  .hero h1 {
    font-size: 2rem;
  }
}
/* ENDFILE */

<!-- FILE: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>echoechome | Compare tools designed to help block gambling websites and apps</title>
  <meta name="description" content="Explore ethical comparisons of gambling blockers and digital boundary tools. echoechome reviews software that may help reduce access to betting apps and casino sites.">
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <link rel="stylesheet" href="style.css?v=99f2aaf9">
</head>
<body>

  <header class="site-header">
    <div class="container nav-container">
      <a href="./" class="brand">
        <svg width="28" height="28" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="echoechome.quest Brand Icon" class="brand-icon">
          <rect width="512" height="512" rx="120" fill="currentColor" />
          <path d="M 116 380 L 116 260 A 140 140 0 0 1 396 260 L 396 380" fill="none" stroke="#ffffff" stroke-width="48" stroke-linecap="round" stroke-linejoin="round" />
          <path d="M 186 260 A 70 70 0 0 1 326 260" fill="none" stroke="#ffffff" stroke-width="48" stroke-linecap="round" />
          <circle cx="256" cy="350" r="32" fill="#ffffff" />
        </svg>
        echoechome<span class="domain">.quest</span>
      </a>
      <button class="mobile-menu-toggle" aria-label="Toggle Menu">☰</button>
      <nav class="nav-links">
        <a href="./">Home</a>
        <a href="best-blockers.html">Tools</a>
        <a href="how-we-review.html">Guides</a>
        <a href="reviews.html">Directory</a>
        <a href="responsible-use.html">Responsible Use</a>
        <a href="contact.html">Contact</a>
        <a href="comparison.html" class="btn btn-primary" style="color: white;">Compare blockers</a>
      </nav>
    </div>
  </header>

  <section class="hero">
    <div class="container">
      <h1>Compare tools designed to help block gambling websites and apps</h1>
      <p>Explore ethical comparisons of gambling blockers and digital boundary tools.</p>
      <a href="comparison.html" class="btn btn-accent">Compare blockers</a>
    </div>
  </section>

  <div class="container">
    <div class="affiliate-disclosure mt-2">
      <strong>Editorial Disclosure:</strong> echoechome.quest is an independent editorial comparison platform. We may earn a commission if you purchase tools through our links. This helps fund our research.
    </div>
  </div>

  <section class="container mb-2">
    <div class="info-panel">
      <h3>Responsible Information</h3>
      <p>Blocking tools can help add friction and may reduce access to gambling sites, but <strong>blocking is not a complete solution</strong>. These tools can be one layer of a wider strategy. If gambling feels difficult to control, please seek qualified support.</p>
      <a href="responsible-use.html" class="btn btn-outline" style="margin-top: 1rem;">Read our ethics notice</a>
    </div>
  </section>

  <section class="container py-4 bg-section" style="border-radius: var(--radius-card); margin-bottom: 3rem;">
    <div class="text-center mb-2">
      <h2>Comparison Dashboard Overview</h2>
      <p>A quick look at the top categories of blocking tools.</p>
    </div>
    <div class="dashboard-panel">
      <div class="table-responsive">
        <table>
          <thead>
            <tr>
              <th>Tool Name</th>
              <th>Primary Category</th>
              <th>Key Feature</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><strong>Gamban</strong></td>
              <td>Gambling-specific blocker</td>
              <td>Designed specifically to block betting apps & sites</td>
              <td><a href="review-gamban.html">Read Review</a></td>
            </tr>
            <tr>
              <td><strong>BetBlocker</strong></td>
              <td>Gambling-specific blocker</td>
              <td>Free tool to restrict gambling access</td>
              <td><a href="review-betblocker.html">Read Review</a></td>
            </tr>
            <tr>
              <td><strong>Cold Turkey Blocker</strong></td>
              <td>General blocking tool</td>
              <td>Broad, customizable digital boundary scheduling</td>
              <td><a href="review-cold-turkey.html">Read Review</a></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="text-center mt-2">
        <a href="comparison.html" class="btn btn-primary">View Full Comparison Table</a>
      </div>
    </div>
  </section>

  <section class="container mb-2">
    <h2 class="text-center mb-2">Featured Tools Directory</h2>
    
    <div class="filter-bar justify-center" style="justify-content: center;">
      <button class="filter-btn active" data-filter="all">All Tools</button>
      <button class="filter-btn" data-filter="gambling">Gambling-Specific</button>
      <button class="filter-btn" data-filter="general">General Blocking</button>
    </div>

    <div class="grid-3">
      <!-- Gamban -->
      <div class="card filter-item" data-category="gambling">
        <span class="badge badge-gambling">Gambling-specific</span>
        <h3>Gamban</h3>
        <p>A gambling-specific blocking tool designed to block gambling websites and apps across devices.</p>
        <a href="review-gamban.html" class="btn btn-outline">Read Analysis</a>
      </div>

      <!-- BetBlocker -->
      <div class="card filter-item" data-category="gambling">
        <span class="badge badge-gambling">Gambling-specific</span>
        <h3>BetBlocker</h3>
        <p>A free gambling-blocking tool designed to restrict access to gambling websites and apps.</p>
        <a href="review-betblocker.html" class="btn btn-outline">Read Analysis</a>
      </div>

      <!-- GamBlock -->
      <div class="card filter-item" data-category="gambling">
        <span class="badge badge-gambling">Gambling-specific</span>
        <h3>GamBlock</h3>
        <p>Blocking software designed for gambling websites and apps. Vendor claims advanced technical restrictions.</p>
        <a href="review-gamblock.html" class="btn btn-outline">Read Analysis</a>
      </div>

      <!-- Betfilter -->
      <div class="card filter-item" data-category="gambling">
        <span class="badge badge-gambling">Gambling-specific</span>
        <h3>Betfilter</h3>
        <p>A gambling-site and app blocking tool referenced by support resources.</p>
        <a href="review-betfilter.html" class="btn btn-outline">Read Analysis</a>
      </div>

      <!-- Cold Turkey Blocker -->
      <div class="card filter-item" data-category="general">
        <span class="badge badge-general">General blocking</span>
        <h3>Cold Turkey Blocker</h3>
        <p>A general website and app blocker that can be configured as part of a broader digital boundary plan.</p>
        <a href="review-cold-turkey.html" class="btn btn-outline">Read Analysis</a>
      </div>

      <!-- Freedom -->
      <div class="card filter-item" data-category="general">
        <span class="badge badge-general">General blocking</span>
        <h3>Freedom</h3>
        <p>A website and app blocker designed around scheduled digital boundaries across platforms.</p>
        <a href="reviews.html" class="btn btn-outline">View Profile</a>
      </div>

      <!-- FocusMe -->
      <div class="card filter-item" data-category="general">
        <span class="badge badge-general">General blocking</span>
        <h3>FocusMe</h3>
        <p>A website and app blocker focused on scheduling and controlling distractions.</p>
        <a href="reviews.html" class="btn btn-outline">View Profile</a>
      </div>

      <!-- Tech Lockdown -->
      <div class="card filter-item" data-category="general">
        <span class="badge badge-technical">Technical resource</span>
        <h3>Tech Lockdown</h3>
        <p>A technical content-policy and device restriction resource for advanced management.</p>
        <a href="reviews.html" class="btn btn-outline">View Profile</a>
      </div>
    </div>
  </section>

  <section class="container py-4">
    <div class="grid-3" style="grid-template-columns: 1fr 1fr;">
      <div class="dashboard-panel">
        <h2>Device Compatibility</h2>
        <p>Before selecting a tool, consider the devices you use. Some tools are strictly mobile-focused, while others require desktop installation.</p>
        <ul style="padding-left: 1.5rem; color: var(--text-secondary);">
          <li style="margin-bottom: 0.5rem;"><strong>Windows & Mac:</strong> Best suited for robust software like Cold Turkey or Gamban.</li>
          <li style="margin-bottom: 0.5rem;"><strong>iOS (iPhone):</strong> Often relies on VPN or MDM profiles (e.g., Freedom, Tech Lockdown).</li>
          <li style="margin-bottom: 0.5rem;"><strong>Android:</strong> Offers deeper app-level restrictions.</li>
        </ul>
      </div>

      <div class="dashboard-panel">
        <h2>Maintenance & Limitations</h2>
        <p>A blocking tool requires maintenance. Here is what to expect:</p>
        <ul style="padding-left: 1.5rem; color: var(--text-secondary);">
          <li style="margin-bottom: 0.5rem;">Updates are required to block new sites.</li>
          <li style="margin-bottom: 0.5rem;">No tool is 100% impenetrable.</li>
          <li style="margin-bottom: 0.5rem;">You may need an accountability partner to secure settings.</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="bg-section py-4">
    <div class="container">
      <h2 class="text-center mb-2">Editorial Guides & Insights</h2>
      <div class="grid-3">
        <div class="card">
          <h4>Why blocking gambling sites can help create friction</h4>
          <p>Understanding how a pause in accessibility can disrupt habitual online behavior.</p>
          <a href="how-we-review.html">Read guide →</a>
        </div>
        <div class="card">
          <h4>Gambling-specific blockers vs general blockers</h4>
          <p>Deciding between a targeted blacklist or broad scheduling boundaries.</p>
          <a href="how-we-review.html">Read guide →</a>
        </div>
        <div class="card">
          <h4>Blocking gambling apps on mobile devices</h4>
          <p>Navigating the limitations and capabilities of iOS and Android ecosystems.</p>
          <a href="how-we-review.html">Read guide →</a>
        </div>
        <div class="card">
          <h4>Why DNS and app blockers can complement each other</h4>
          <p>Exploring layered technical approaches for digital environments.</p>
          <a href="how-we-review.html">Read guide →</a>
        </div>
        <div class="card">
          <h4>Why blockers should not be treated as a cure</h4>
          <p>Addressing the medical reality and limitations of software tools.</p>
          <a href="responsible-use.html">Read guide →</a>
        </div>
        <div class="card">
          <h4>How to talk about blockers with an accountability partner</h4>
          <p>Creating shared boundaries without compromising personal privacy.</p>
          <a href="responsible-use.html">Read guide →</a>
        </div>
      </div>
    </div>
  </section>

  <section class="container py-4">
    <div class="card" style="max-width: 600px; margin: 0 auto;">
      <h2 class="text-center">Contact Us</h2>
      <p class="text-center mb-2">Have a question about our editorial process?</p>
      <form id="contact-form" action="#" method="POST">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" id="name" class="form-control" required>
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" id="email" class="form-control" required>
        </div>
        <div class="form-group">
          <label for="subject">Subject</label>
          <input type="text" id="subject" class="form-control" required>
        </div>
        <div class="form-group">
          <label for="message">Message</label>
          <textarea id="message" class="form-control" rows="5" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary" style="width: 100%;">Send Message</button>
      </form>
    </div>
  </section>

  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <!-- Section 1: Brand -->
        <div class="footer-col">
          <a href="./" class="brand footer-brand">
            <svg width="28" height="28" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="echoechome.quest Brand Icon" class="brand-icon">
              <rect width="512" height="512" rx="120" fill="currentColor" />
              <path d="M 116 380 L 116 260 A 140 140 0 0 1 396 260 L 396 380" fill="none" stroke="#0F172A" stroke-width="48" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M 186 260 A 70 70 0 0 1 326 260" fill="none" stroke="#0F172A" stroke-width="48" stroke-linecap="round" />
              <circle cx="256" cy="350" r="32" fill="#0F172A" />
            </svg>
            echoechome<span class="domain">.quest</span>
          </a>
          <h4 class="footer-subtitle">Affiliate Toplist and Review Hub</h4>
          <p class="footer-desc">echoechome provides independent editorial information and comparisons of website blocking tools. We help adults explore digital boundary tools that may reduce access to gambling-related online triggers.</p>
        </div>

        <!-- Section 2: Explore Links -->
        <div class="footer-col">
          <h4 class="footer-heading">Explore</h4>
          <ul class="footer-links">
            <li><a href="./">Home</a></li>
            <li><a href="best-blockers.html">Tools</a></li>
            <li><a href="reviews.html">Reviews/Directory</a></li>
            <li><a href="comparison.html">Comparison</a></li>
            <li><a href="how-we-review.html">Guides</a></li>
            <li><a href="how-we-review.html">How We Review</a></li>
            <li><a href="responsible-use.html">Responsible Use</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>

        <!-- Section 3: Legal Links -->
        <div class="footer-col">
          <h4 class="footer-heading">Legal Information</h4>
          <ul class="footer-links">
            <li><a href="privacy.html">Privacy Policy</a></li>
            <li><a href="terms.html">Terms and Conditions</a></li>
            <li><a href="cookies.html">Cookie Policy</a></li>
            <li><a href="accessibility.html">Accessibility Statement</a></li>
          </ul>
        </div>

        <!-- Section 4: Responsible Information -->
        <div class="footer-col">
          <h4 class="footer-heading">Responsible Use</h4>
          <p class="footer-desc">Blocking tools can help add friction and may reduce access, but they are not a complete solution or a guarantee of recovery. If gambling feels difficult to control, consider seeking qualified professional support.</p>
        </div>
      </div>

      <!-- Affiliate Disclosure Box -->
      <div class="footer-disclosure">
        <h4 class="disclosure-heading">Affiliate Disclosure:</h4>
        <p>echoechome may include editorial references to products or services. Commercial relationships do not influence our comparisons or opinions. We do not operate gambling services, promote gambling operators, or provide gambling transactions.</p>
      </div>

      <!-- Bottom Footer Bar -->
      <div class="footer-bottom-bar">
        <div class="footer-copyright">
          <p>&copy; 2026 echoechome. All rights reserved.</p>
          <p class="educational-notice">Information provided by echoechome is for general educational purposes only.</p>
        </div>
        <div class="footer-bottom-links">
          <a href="privacy.html">Privacy Policy</a> | 
          <a href="terms.html">Terms</a> | 
          <a href="cookies.html">Cookies</a> | 
          <a href="accessibility.html">Accessibility</a>
        </div>
      </div>
    </div>
  </footer>

  <div id="cookie-banner" class="cookie-banner">
    <div class="cookie-text">
      <p>We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience and analyze website traffic. See our <a href="cookies.html">Cookie Policy</a>.</p>
    </div>
    <div class="cookie-actions">
      <button class="btn btn-outline" id="cookie-manage">Manage Preferences</button>
      <button class="btn btn-outline" id="cookie-reject">Reject Non-Essential</button>
      <button class="btn btn-primary" id="cookie-accept">Accept All</button>
    </div>
  </div>

  <script src="main.js?v=913e5fbd"></script>
</body>
</html>