    .cb-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: var(--font); }
    .cb-window { position: absolute; bottom: 68px; right: 0; width: 360px; max-height: 520px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: none; flex-direction: column; overflow: hidden; transform-origin: bottom right; }
    .cb-window.active { display: flex; animation: cbSlideIn 0.28s cubic-bezier(0.34,1.56,0.64,1); }
    @keyframes cbSlideIn { from { opacity: 0; transform: scale(0.88) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    .cb-window.closing { animation: cbSlideOut 0.2s ease forwards; }
    @keyframes cbSlideOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.88) translateY(12px); } }
    .cb-header { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
    .cb-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #ff6b00, #ff9a4d); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 2px var(--border); }
    .cb-header-info { flex: 1; min-width: 0; }
    .cb-header-info h3 { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cb-header-info p { font-size: 11px; color: var(--accent); display: flex; align-items: center; gap: 4px; }
    .cb-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: inline-block; box-shadow: 0 0 6px #4ade80; animation: cbPulse 2s infinite; }
    @keyframes cbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
    .cb-header-actions { display: flex; gap: 6px; }
    .cb-icon-btn { width: 30px; height: 30px; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.15s ease; font-family: var(--font); }
    .cb-icon-btn:hover { background: var(--bg-glass); color: var(--text); border-color: var(--border-hover); }
    .cb-minimize-btn::after { content: '−'; font-size: 18px; }
    .cb-messages { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); scroll-behavior: smooth; }
    .cb-messages::-webkit-scrollbar { width: 4px; }
    .cb-messages::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
    .cb-msg { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; animation: cbMsgIn 0.22s ease; word-break: break-word; }
    @keyframes cbMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    .cb-msg.bot { background: var(--bg-elevated); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; }
    .cb-msg.user { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 500; }
    .cb-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .cb-hint { background: var(--bg-glass); border: 1px solid var(--border); color: var(--text-muted); padding: 6px 12px; border-radius: 18px; font-size: 12px; cursor: pointer; transition: all 0.18s ease; font-family: var(--font); white-space: nowrap; }
    .cb-hint:hover { background: var(--accent-dim); color: var(--accent); border-color: rgba(255,107,0,0.3); }
    .cb-hint:active { transform: scale(0.96); }
    .cb-typing { display: flex; align-items: center; gap: 5px; padding: 12px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-bottom-left-radius: 4px; border-radius: 14px; width: fit-content; }
    .cb-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); animation: cbBounce 1.4s infinite ease-in-out; }
    .cb-typing span:nth-child(1) { animation-delay: 0s; }
    .cb-typing span:nth-child(2) { animation-delay: 0.2s; }
    .cb-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes cbBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
    .cb-footer { padding: 9px 16px; background: var(--bg-card); border-top: 1px solid var(--border); text-align: center; font-size: 11px; color: var(--text-dim); display: flex; align-items: center; justify-content: center; gap: 10px; }
    .cb-footer a { color: var(--text-dim); text-decoration: none; transition: color 0.15s; }
    .cb-footer a:hover { color: var(--accent); }
    .cb-input-area { padding: 12px 14px; background: var(--bg-elevated); border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
    .cb-input { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; padding: 10px 14px; font-size: 14px; color: var(--text); outline: none; font-family: var(--font); transition: border-color 0.2s ease; }
    .cb-input::placeholder { color: var(--text-dim); }
    .cb-input:focus { border-color: var(--accent); }
    .cb-send { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.18s ease; color: #fff; }
    .cb-send:hover { background: var(--accent-hover); transform: scale(1.06); }
    .cb-fab { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #ff6b00, #ff8533); border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(255,107,0,0.4); display: flex; align-items: center; justify-content: center; transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); position: relative; }
    .cb-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(255,107,0,0.5); }
    .cb-fab:active { transform: scale(0.95); }
    .cb-fab svg { width: 24px; height: 24px; fill: #fff; }
    .cb-fab .cb-badge { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; background: #ef4444; border-radius: 50%; border: 2px solid var(--bg-elevated); display: none; }
    .cb-fab.has-badge .cb-badge { display: block; }
    .cb-notif-dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; display: none; }
    .cb-notif-dot.show { display: block; }

    /* Custom Select Dropdowns */
    .cs-trigger {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      width: 100%; padding: 14px 16px;
      background: var(--bg-glass); border: 1px solid var(--border);
      border-radius: var(--radius-sm); cursor: pointer;
      font-family: var(--font); font-size: 0.95rem; color: var(--text);
      transition: border-color 200ms, background 200ms;
    }
    .cs-trigger:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.10); }
    .cs-trigger:focus { border-color: var(--accent); outline: none; }
    .cs-trigger .cs-value { flex: 1; text-align: left; }
    .cs-trigger .cs-arrow { color: var(--text-muted); flex-shrink: 0; transition: transform 200ms; }
    .custom-select.open .cs-arrow { transform: rotate(180deg); }
    .custom-select.open .cs-trigger { border-color: var(--accent); }
    .cs-options {
      display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: var(--bg-elevated); border: 1px solid var(--border);
      border-radius: var(--radius-sm); overflow: hidden; z-index: 200;
      box-shadow: var(--shadow); list-style: none; margin: 0; padding: 0;
    }
    .custom-select.open .cs-options { display: block; }
    .cs-option {
      padding: 12px 16px; cursor: pointer; font-size: 0.95rem; color: var(--text);
      transition: background 150ms;
    }
    .cs-option:hover { background: var(--accent-dim); color: var(--accent); }
    .cs-option.selected { background: var(--accent-dim); color: var(--accent); font-weight: 600; }

    /* ─── FOOTER ──────────────────────────────────────── */
    footer {
      background: var(--bg-elevated);
      border-top: 1px solid var(--border);
      padding: 64px 0 0;
      margin-top: auto;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1.2fr;
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid var(--border);
    }
    .footer-brand-col { display: flex; flex-direction: column; gap: 16px; }
    .footer-brand-col .footer-logo {
      display: flex; align-items: center; gap: 10px;
      font-weight: 800; font-size: 1.1rem; text-decoration: none; color: var(--text);
    }
    .footer-brand-col .footer-logo .logo-mark {
      width: 36px; height: 36px; background: var(--accent); border-radius: 8px;
      display: flex; align-items: center; justify-content: center; color: #fff;
    }
    .footer-tagline {
      font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; max-width: 280px;
    }
    .footer-social {
      display: flex; gap: 8px; margin-top: 4px;
    }
    .footer-social a {
      width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); text-decoration: none; transition: color 200ms, border-color 200ms, background 200ms;
    }
    .footer-social a:hover {
      color: var(--accent); border-color: rgba(255,107,0,0.3); background: var(--accent-dim);
    }
    .footer-social a .material-symbols-outlined { font-size: 18px; }

    .footer-nav-col h4, .footer-contact-col h4 {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-dim); margin-bottom: 16px;
    }
    .footer-nav-col h4::before { content: ''; display: block; width: 16px; height: 2px; background: var(--accent); border-radius: 2px; margin-bottom: 10px; }
    .footer-nav-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .footer-nav-links a {
      color: var(--text-muted); text-decoration: none; font-size: 0.9rem;
      transition: color 200ms; display: flex; align-items: center; gap: 6px;
    }
    .footer-nav-links a:hover { color: var(--text); }
    .footer-nav-links a::before { content: '›'; color: var(--accent); font-weight: 700; }

    .footer-contact-col h4::before { content: ''; display: block; width: 16px; height: 2px; background: var(--accent); border-radius: 2px; margin-bottom: 10px; }
    .footer-contact-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .footer-contact-list li {
      display: flex; align-items: flex-start; gap: 10px;
      border-radius: var(--radius-sm);
      transition: background 200ms;
      cursor: pointer;
      position: relative;
      z-index: 1;
    }
    .footer-contact-list li:hover { background: var(--bg-glass); }
    .footer-contact-list li:hover a.fci-value { color: var(--accent); }
    .footer-contact-list .fci-icon {
      width: 32px; height: 32px; background: var(--accent-dim); border-radius: 8px;
      display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; margin-top: 2px;
    }
    .footer-contact-list .fci-icon .material-symbols-outlined { font-size: 16px; }
    .footer-contact-list .fci-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
    .footer-contact-list .fci-value { font-size: 0.88rem; font-weight: 600; color: var(--text); text-decoration: none; transition: color 200ms; flex: 1; }
    a.fci-value:hover { color: var(--accent); }

    /* Trust bar */
    .trust-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 32px;
      padding: 28px 0;
      border-bottom: 1px solid var(--border);
    }
    .trust-item {
      display: flex; align-items: center; gap: 8px;
      font-size: 0.82rem; color: var(--text-muted); font-weight: 500; white-space: nowrap;
    }
    .trust-item .material-symbols-outlined { color: var(--accent); font-size: 18px; }

    /* Bottom bar */
    .footer-bottom {
      display: flex; justify-content: space-between; align-items: center;
      padding: 20px 0; flex-wrap: wrap; gap: 12px;
    }
    .footer-copy { font-size: 0.82rem; color: var(--text-dim); }
    .footer-bottom-links { display: flex; gap: 20px; }
    .footer-bottom-links a { font-size: 0.78rem; color: var(--text-dim); text-decoration: none; transition: color 200ms; }
    .footer-bottom-links a:hover { color: var(--text-muted); }

    @media (max-width: 900px) {
      .footer-top { grid-template-columns: 1fr 1fr; }
      .footer-brand-col { grid-column: 1 / -1; }
      .footer-social { margin-bottom: 8px; }
    }
    @media (max-width: 600px) {
      .footer-top { grid-template-columns: 1fr; gap: 32px; }
      .footer-bottom { justify-content: center; text-align: center; }
      .trust-bar { gap: 16px; }
    }

    /* ─── ANIMATIONS ──────────────────────────────────── */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity 600ms ease, transform 600ms ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ─── RESPONSIVE ──────────────────────────────────── */
    @media (max-width: 1024px) {
      .hero-grid { grid-template-columns: 1fr; gap: 60px; }
      .hero-visual { display: none; }
      .hero h1 { font-size: 3rem; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .service-card.full-width { grid-column: 1 / -1; }
      .steps-grid { grid-template-columns: 1fr; gap: 16px; }
      .steps-grid::before { display: none; }
      .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
      .contact-wrapper { grid-template-columns: 1fr; gap: 48px; }
      .boundaries-grid { grid-template-columns: 1fr; }
      .area-grid { grid-template-columns: 1fr; }
      .area-map-wrap { min-height: 240px; }
      .area-info { padding: 32px; }
      .testimonial-grid { grid-template-columns: 1fr; max-width: 480px; }
    }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-mobile-toggle { display: block; }
      .hero { padding: 100px 0 60px; }
      .hero h1 { font-size: 2.4rem; }
      .hero-stats { gap: 24px; }
      .services-grid { grid-template-columns: 1fr; }
      .form-grid { grid-template-columns: 1fr; }
      .contact-form-card { padding: 24px; }
      section { padding: 70px 0; }
    }

    /* Mobile nav */
    .mobile-nav {
      position: fixed;
      inset: 0;
      background: var(--bg);
      backdrop-filter: blur(20px);
      z-index: 200;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 300ms;
    }
    .mobile-nav.open { opacity: 1; pointer-events: all; }
    .mobile-nav a {
      color: var(--text);
      text-decoration: none;
      font-size: 1.5rem;
      font-weight: 700;
      padding: 12px 32px;
      border-radius: var(--radius-sm);
      transition: background 200ms;
    }
    .mobile-nav a:hover { background: var(--bg-glass); }
    .mobile-nav .mobile-nav-close {
      position: absolute;
      top: 20px; right: 24px;
      background: none;
      border: none;
      color: var(--text);
      font-size: 1.5rem;
      cursor: pointer;
      width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
    }
  </style>
</head>
<body>

<!-- NAV -->
<nav id="navbar">
  <div class="container">
    <a href="#" class="nav-logo">
      <img src="/logos/03_cleanboot_logo_icon_color_transparent.png" alt="CleanBoot" class="logo-img" width="36" height="36">
      CleanBoot
    </a>
    <ul class="nav-links">
      <li><a href="#how-it-works">How It Works</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="#faq">FAQ</a></li>
      <li><a href="#contact" class="nav-cta">Book Now</a></li>
    </ul>
    <div class="nav-right">
      <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode">
        <span class="material-symbols-outlined" id="themeIcon">dark_mode</span>
      </button>
      <button class="nav-mobile-toggle" onclick="document.querySelector('.mobile-nav').classList.add('open')">
        <span class="material-symbols-outlined">menu</span>
      </button>
    </div>
  </div>
</nav>

<!-- MOBILE NAV -->
<div class="mobile-nav" onclick="this.classList.remove('open')">
  <button class="mobile-nav-close" onclick="this.closest('.mobile-nav').classList.remove('open')">
    <span class="material-symbols-outlined">close</span>
  </button>
  <a href="#how-it-works" onclick="this.closest('.mobile-nav').classList.remove('open')">How It Works</a>
  <a href="#services" onclick="this.closest('.mobile-nav').classList.remove('open')">Services</a>
  <a href="#pricing" onclick="this.closest('.mobile-nav').classList.remove('open')">Pricing</a>
  <a href="#faq" onclick="this.closest('.mobile-nav').classList.remove('open')">FAQ</a>
  <a href="#contact" onclick="this.closest('.mobile-nav').classList.remove('open')">Book Now</a>
</div>

<!-- HERO -->
<section class="hero">
  <div class="hero-bg" aria-hidden="true"></div>
  <div class="container">
    <div class="hero-grid">
      <div class="hero-content">
        <div class="hero-badge">Same-Day Service Available</div>

        <h1>Your PC, <span class="accent">Pickled Up.</span> Returned Fresh.</h1>
        <p class="hero-sub">We pick up your Windows PC, tune it up professionally, and bring it back same day. No waiting rooms. No tech jargon. No drama.</p>
        <div class="hero-trust">
          <span class="trust-item"><span class="material-symbols-outlined mi-18">verified_user</span> Background-checked techs</span>
          <span class="trust-item"><span class="material-symbols-outlined mi-18">workspace_premium</span> 90-day service warranty</span>
          <span class="trust-item"><span class="material-symbols-outlined mi-18">local_shipping</span> Free pickup & return</span>
        </div>
        <div class="hero-actions">
          <a href="#contact" class="btn-primary">
            <span class="material-symbols-outlined mi-20">calendar_month</span>
            Book Pickup
          </a>
          <a href="tel:7205077846" class="btn-ghost">
            <span class="material-symbols-outlined mi-20">call</span>
            (720) 507-7846
          </a>
        </div>
        <div class="hero-stats" role="list" aria-label="Key stats">
          <div role="listitem">
            <div class="hero-stat-value">Same Day</div>
            <div class="hero-stat-label">Turnaround</div>
          </div>
          <div role="listitem">
            <div class="hero-stat-value">Denver</div>
            <div class="hero-stat-label">Metro Area</div>
          </div>
          <div role="listitem">
            <div class="hero-stat-value">Windows</div>
            <div class="hero-stat-label">Only</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- SERVICE STRIP -->
<div class="service-strip">
  <div class="strip-inner">
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> PC Tune-Ups</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> Malware Removal</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> RAM Installation</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> GPU Upgrades</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> Backup Service</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> Driver Updates</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> Bloatware Removal</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> File Cleanup</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> PC Tune-Ups</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> Malware Removal</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> RAM Installation</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> GPU Upgrades</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> Backup Service</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> Driver Updates</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> Bloatware Removal</span>
    <span class="strip-item"><span class="check material-symbols-outlined mi-18">check_circle</span> File Cleanup</span>
  </div>
</div>

<!-- HOW IT WORKS -->
<section class="how-it-works" id="how-it-works">
  <div class="container">
    <div class="section-label">Process</div>
    <h2 class="section-title">Simple from start<br>to finish</h2>
    <p class="section-sub">No confusing repair shop process. No vague drop-off timeline. Just a clear, convenient service that works around your schedule.</p>
    <div class="steps-grid">
      <div class="step-card reveal">
        <div class="step-num">01</div>
        <h3>Book Pickup</h3>
        <p>Tell us your PC type, the issue, your city, and the service you need. We'll confirm the job and pickup window same day.</p>
        <div class="step-icon-wrap"><span class="material-symbols-outlined mi-32">calendar_month</span></div>
      </div>
      <div class="step-card reveal">
        <div class="step-num">02</div>
        <h3>We Service It</h3>
        <p>We clean, update, back up, optimize, or install approved hardware. You get a simple summary of everything done.</p>
        <div class="step-icon-wrap"><span class="material-symbols-outlined mi-32">build</span></div>
      </div>
      <div class="step-card reveal">
        <div class="step-num">03</div>
        <h3>Return Same Day</h3>
        <p>Your Windows PC is returned to your door with a clear recap. Most jobs are done the same day you schedule.</p>
        <div class="step-icon-wrap"><span class="material-symbols-outlined mi-32">local_shipping</span></div>
      </div>
    </div>
  </div>
</section>

<!-- SERVICES -->
<section class="services-section" id="services">
  <div class="services-bg" aria-hidden="true"></div>
  <div class="container" style="position:relative;z-index:1;">
    <div class="section-label">Services</div>
    <h2 class="section-title">Focused Windows<br>computer service</h2>
    <p class="section-sub">Built around common, high-demand jobs that people actually need. No bloated service menu. No repair-shop sprawl.</p>

    <div class="services-grid">
      <div class="service-card reveal">
        <span class="svc-price">From $99</span>
        <div class="svc-icon-wrap"><span class="material-symbols-outlined mi-28">speed</span></div>
        <h3>PC Tune-Up</h3>
        <p>For slow but usable systems. We clean up the clutter, optimize startup, and get things running snappy again.</p>
        <ul>
          <li>Startup optimization</li>
          <li>Junk & temp file removal</li>
          <li>Driver check & updates</li>
          <li>Windows updates</li>
          <li>Bloatware removal</li>
        </ul>
        <a href="#contact" class="svc-cta">Book This →</a>
      </div>
      <div class="service-card reveal">
        <span class="svc-price">From $129</span>
        <div class="svc-icon-wrap"><span class="material-symbols-outlined mi-28">shield</span></div>
        <h3>Malware & Adware Cleanup</h3>
        <p>For systems bogged down by pop-ups, toolbars, and suspicious software. We root it out and lock things down.</p>
        <ul>
          <li>Malware detection & removal</li>
          <li>Browser hijack cleanup</li>
          <li>Adware & toolbar removal</li>
          <li>Security hardening</li>
        </ul>
        <a href="#contact" class="svc-cta">Book This →</a>
      </div>
      <div class="service-card reveal">
        <span class="svc-price">From $149</span>
        <div class="svc-icon-wrap"><span class="material-symbols-outlined mi-28">cloud_upload</span></div>
        <h3>Backup Service</h3>
        <p>We set up reliable backups so your files are safe. Customer-supplied or approved storage required.</p>
        <ul>
          <li>Full system backup</li>
          <li>Customer-supplied drive</li>
          <li>Backup verification</li>
          <li>Restore testing</li>
        </ul>
        <a href="#contact" class="svc-cta">Book This →</a>
      </div>
      <div class="service-card reveal">
        <span class="svc-price">$40+ labor</span>
        <div class="svc-icon-wrap"><span class="material-symbols-outlined mi-28">memory</span></div>
        <h3>RAM Installation</h3>
        <p>We install RAM you've already purchased — if it's compatible with your system. Simple, fast labor.</p>
        <ul>
          <li>Compatibility check</li>
          <li>RAM installation</li>
          <li>Verification & stress test</li>
          <li>$40 labor + parts</li>
        </ul>
        <a href="#contact" class="svc-cta">Get Quote →</a>
      </div>
      <div class="service-card reveal">
        <span class="svc-price">$60+ labor</span>
        <div class="svc-icon-wrap"><span class="material-symbols-outlined mi-28">videogame_asset</span></div>
        <h3>Graphics Card Installation</h3>
        <p>Gaming upgrade? We handle the GPU install, driver setup, and basic benchmarking for your new card.</p>
        <ul>
          <li>GPU installation</li>
          <li>Driver setup & tuning</li>
          <li>Performance verification</li>
          <li>$60 labor + parts</li>
        </ul>
        <a href="#contact" class="svc-cta">Get Quote →</a>
      </div>
      <div class="service-card reveal">
        <span class="svc-price">Best Value</span>
        <div class="svc-icon-wrap"><span class="material-symbols-outlined mi-28">auto_fix_high</span></div>
        <h3>Tune-Up + Malware Combo</h3>
        <p>The best all-around package for slow, cluttered systems with junk software, pop-ups, or light infections.</p>
        <ul>
          <li>Full tune-up included</li>
          <li>Full malware cleanup</li>
          <li>Same-day in most cases</li>
          <li>Strongest value bundle</li>
        </ul>
        <a href="#contact" class="svc-cta">Book This →</a>
      </div>
    </div>

    <div class="boundaries reveal">
      <h3>What we don't do</h3>
      <p>Strict boundaries keep our service fast, predictable, and lower-risk for everyone.</p>
      <div class="boundaries-grid">
        <div class="boundary-item"><span class="x-icon material-symbols-outlined">cancel</span> Mac or Linux service</div>
        <div class="boundary-item"><span class="x-icon material-symbols-outlined">cancel</span> Windows reinstalls</div>
        <div class="boundary-item"><span class="x-icon material-symbols-outlined">cancel</span> Windows version upgrades</div>
        <div class="boundary-item"><span class="x-icon material-symbols-outlined">cancel</span> Liquid damage repair</div>
        <div class="boundary-item"><span class="x-icon material-symbols-outlined">cancel</span> Data recovery guarantees</div>
        <div class="boundary-item"><span class="x-icon material-symbols-outlined">cancel</span> Unapproved hardware</div>
      </div>
    </div>
  </div>
</section>

<!-- PRICING -->
<section class="pricing-section" id="pricing">
  <div class="container">
    <div class="section-label">Pricing</div>
    <h2 class="section-title">Clear starting prices</h2>
    <p class="section-sub">Final cost depends on device condition, travel distance, and parts. You'll always know the estimate before we start.</p>

    <div class="pricing-grid">
      <div class="pricing-card reveal">
        <div class="pricing-tier">Core Service</div>
        <div class="pricing-name">PC Tune-Up</div>
        <div class="pricing-price"><span class="amount">$99</span><span class="suffix">starting</span></div>
        <p class="pricing-desc">Cleanup, optimization, and maintenance for slow but functional Windows systems.</p>
        <ul class="pricing-features">
          <li><span class="check-icon material-symbols-outlined">check_circle</span> Startup optimization</li>
          <li><span class="check-icon material-symbols-outlined">check_circle</span> Junk removal & file cleanup</li>
          <li><span class="check-icon material-symbols-outlined">check_circle</span> Driver & Windows updates</li>
          <li><span class="check-icon material-symbols-outlined">check_circle</span> Bloatware removal</li>
        </ul>
        <a href="#contact" class="btn-ghost">Book This</a>
      </div>

      <div class="pricing-card featured reveal">
        <div class="pricing-tier">Most Popular</div>
        <div class="pricing-name">Tune-Up + Malware</div>
        <div class="pricing-price"><span class="amount">$159</span><span class="suffix">starting</span></div>
        <p class="pricing-desc">The complete package for systems that are slow, cluttered, and compromised.</p>
        <ul class="pricing-features">
          <li><span class="check-icon material-symbols-outlined">check_circle</span> Everything in Tune-Up</li>
          <li><span class="check-icon material-symbols-outlined">check_circle</span> Full malware &amp;adware cleanup</li>
          <li><span class="check-icon material-symbols-outlined">check_circle</span> Browser security reset</li>
          <li><span class="check-icon material-symbols-outlined">check_circle</span> Same-day in most cases</li>
        </ul>
        <a href="#contact" class="btn-primary">
          <span class="material-symbols-outlined mi-20">bolt</span>
          Book This
        </a>
      </div>

      <div class="pricing-card reveal">
        <div class="pricing-tier">Upgrades</div>
        <div class="pricing-name">RAM & GPU Install</div>
        <div class="pricing-price"><span class="amount">$40</span><span class="suffix">+ labor</span></div>
        <p class="pricing-desc">Professional installation of customer-supplied RAM or graphics card upgrades.</p>
        <ul class="pricing-features">
          <li><span class="check-icon material-symbols-outlined">check_circle</span> RAM: $40 labor + parts</li>
          <li><span class="check-icon material-symbols-outlined">check_circle</span> GPU: $60 labor + parts</li>
          <li><span class="check-icon material-symbols-outlined">check_circle</span> Backup: from $69</li>
          <li><span class="check-icon material-symbols-outlined">check_circle</span> Parts must be approved</li>
        </ul>
        <a href="#contact" class="btn-ghost">Get a Quote</a>
      </div>
    </div>
  </div>
</section>

<!-- AREA -->
<section id="area">
  <div class="container">
    <div class="section-label">Coverage</div>
    <h2 class="section-title">Serving Glendale,<br>Denver & nearby areas</h2>
    <div class="area-grid">
      <div class="area-map-wrap">
        <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=900&q=85" alt="Denver metro area service coverage" loading="lazy">
        <div class="area-map-overlay">
          <div class="area-map-label">
            <span class="material-symbols-outlined mi-20">location_on</span>
            Denver Metro Area
          </div>
        </div>
      </div>
      <div class="area-info reveal">
        <h3>Local, door-to-door service</h3>
        <p>We come to you. Your PC gets picked up from your home, serviced, and returned the same day in most cases. Travel outside the core zone may add a small fee — we'll tell you upfront.</p>
        <div class="area-tags">
          <span class="area-tag">
            <span class="material-symbols-outlined mi-18">home</span> Glendale
          </span>
          <span class="area-tag">
            <span class="material-symbols-outlined mi-18">location_city</span> Denver
          </span>
          <span class="area-tag">
            <span class="material-symbols-outlined mi-18">forest</span> Aurora
          </span>
          <span class="area-tag">
            <span class="material-symbols-outlined mi-18">house</span> Lakewood
          </span>
          <span class="area-tag">
            <span class="material-symbols-outlined mi-18">home_work</span> Englewood
          </span>
          <span class="area-tag">
            <span class="material-symbols-outlined mi-18">local_shipping</span> Pickup Available
          </span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- TESTIMONIALS -->
<section class="testimonial-section">
  <div class="container">
    <div class="section-label">Reviews</div>
    <h2 class="section-title">What customers say</h2>
    <div class="review-badge"><span class="material-symbols-outlined mi-16">star</span> 100% satisfaction across verified customers</div>
    <div class="testimonial-grid">
      <div class="testimonial-card reveal">
        <div class="stars">★★★★★</div>
        <blockquote>"My laptop was so slow I was ready to buy a new one. CleanBoot had it running like new the same day. picked up from my house and returned that afternoon."</blockquote>
        <div class="author">— Marcus T., Denver</div>
      </div>
      <div class="testimonial-card reveal">
        <div class="stars">★★★★★</div>
        <blockquote>"Had three different toolbar add-ons and pop-ups driving me crazy. Tune-Up + Malware combo cleared everything out. Should've done this months ago."</blockquote>
        <div class="author">— Jessica R., Glendale</div>
      </div>
      <div class="testimonial-card reveal">
        <div class="stars">★★★★★</div>
        <blockquote>"Booked on a Tuesday morning, had my PC back by 4pm same day. The before/after speed difference was honestly shocking. Worth every penny."</blockquote>
        <div class="author">— David K., Aurora</div>
      </div>
    </div>
  </div>
</section>

<!-- FAQ -->
<section id="faq">
  <div class="container">
    <div class="section-label">FAQ</div>
    <h2 class="section-title">What customers<br>ask first</h2>
    <div class="faq-list">
      <div class="faq-item">
        <button class="faq-question">
          How long does it take?
          <span class="arrow material-symbols-outlined">add</span>
        </button>
        <div class="faq-answer"><p>Most jobs are completed same day — typically within 4–8 hours of pickup, depending on the service and our schedule. You'll get a specific time window when we confirm your booking.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">
          Do you work on Macs?
          <span class="arrow material-symbols-outlined">add</span>
        </button>
        <div class="faq-answer"><p>No. CleanBoot is Windows-only. This keeps our service fast and focused — we're experts at Windows systems, not generalists.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">
          Do you reinstall Windows?
          <span class="arrow material-symbols-outlined">add</span>
        </button>
        <div class="faq-answer"><p>No. We don't perform Windows reinstalls or version upgrades. We focus on cleanup, optimization, and hardware upgrades that don't require a full OS rebuild.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">
          Is same-day service guaranteed?
          <span class="arrow material-symbols-outlined">add</span>
        </button>
        <div class="faq-answer"><p>Not guaranteed, but offered in most cases. Same-day turnaround depends on job complexity and our schedule. We'll give you a clear window when you book.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">
          Can you install parts I already bought?
          <span class="arrow material-symbols-outlined">add</span>
        </button>
        <div class="faq-answer"><p>Yes — for approved RAM and graphics cards that are compatible with your system. We check compatibility before we install anything.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">
          Can you guarantee all my files will be saved?
          <span class="arrow material-symbols-outlined">add</span>
        </button>
        <div class="faq-answer"><p>No. We strongly recommend backing up your data before any service. We handle your files with care, but no data recovery guarantee is possible with any repair service.</p></div>
      </div>
      <div class="faq-item">
        <button class="faq-question">
          How do I get a quote?
          <span class="arrow material-symbols-outlined">add</span>
        </button>
        <div class="faq-answer"><p>Fill out the form below with your PC details and the service you need. We'll get back to you quickly with a confirmed price and pickup window.</p></div>
      </div>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section class="contact-section" id="contact">
  <div class="contact-bg" aria-hidden="true"></div>
  <div class="container" style="position:relative;z-index:1;">
    <div class="contact-wrapper">
      <div class="contact-info">
        <div class="section-label">Book Now</div>
        <h2>Ready to get your<br>PC sorted?</h2>
        <p>Fill out the form and we'll confirm your service and pickup window fast. Usually within the hour during business hours.</p>
        <div class="contact-details">
          <div class="contact-detail">
            <div class="cd-icon"><span class="material-symbols-outlined mi-20">call</span></div>
            <div>
              <div class="cd-label">Phone</div>
              <div class="cd-value">(720) 507-7846</div>
            </div>
          </div>
          <div class="contact-detail">
            <div class="cd-icon"><span class="material-symbols-outlined mi-20">mail</span></div>
            <div>
              <div class="cd-label">Email</div>
              <div class="cd-value">cleanbootpcservices@outlook.com</div>
            </div>
          </div>
          <div class="contact-detail">
            <div class="cd-icon"><span class="material-symbols-outlined mi-20">schedule</span></div>
            <div>
              <div class="cd-label">Response Time</div>
              <div class="cd-value">Usually within 1 hour</div>
            </div>
          </div>
        </div>
      </div>
      <div class="contact-form-card">
        <form action="https://formspree.io/f/xjgjkpwk" method="POST" id="contactForm">
          <div class="form-grid">
            <div class="form-group">
              <label for="name">Your Name</label>
              <input type="text" id="name" name="name" placeholder="Full name" autocomplete="name" required>
            </div>
            <div class="form-group">
              <label for="phone">Phone</label>
              <input type="tel" id="phone" name="phone" placeholder="(555) 000-0000" autocomplete="tel" required>
            </div>
            <div class="form-group full">
              <label for="email">Email</label>
              <input type="email" id="email" name="email" placeholder="you@example.com" required>
            </div>
            <div class="form-group">
              <label for="city">City</label>
              <input type="text" id="city" name="city" placeholder="Denver, Glendale, etc." required>
            </div>
            <div class="form-group">
              <label for="device">Device Type</label>
              <div class="custom-select" id="device-select" data-name="device">
                <button type="button" class="cs-trigger" aria-haspopup="listbox" aria-expanded="false">
                  <span class="cs-value">Desktop or Laptop?</span>
                  <span class="cs-arrow"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg></span>
                </button>
                <ul class="cs-options" role="listbox">
                  <li class="cs-option" data-value="Desktop" role="option">Desktop</li>
                  <li class="cs-option" data-value="Laptop" role="option">Laptop</li>
                </ul>
              </div>
              <input type="hidden" id="device" name="device" value="">
            </div>
            <div class="form-group full">
              <label for="service">Service Needed</label>
              <div class="custom-select" id="service-select" data-name="service">
                <button type="button" class="cs-trigger" aria-haspopup="listbox" aria-expanded="false">
                  <span class="cs-value">Select a service</span>
                  <span class="cs-arrow"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg></span>
                </button>
                <ul class="cs-options" role="listbox">
                  <li class="cs-option" data-value="PC Tune-Up" role="option">PC Tune-Up — $99+</li>
                  <li class="cs-option" data-value="Tune-Up + Malware" role="option">Tune-Up + Malware Cleanup — $159+</li>
                  <li class="cs-option" data-value="RAM Install" role="option">RAM Installation — $40+ labor</li>
                  <li class="cs-option" data-value="GPU Install" role="option">GPU Installation — $60+ labor</li>
                  <li class="cs-option" data-value="Backup" role="option">Backup Service — $69+</li>
                  <li class="cs-option" data-value="Not Sure" role="option">Not sure — help me pick</li>
                </ul>
              </div>
              <input type="hidden" id="service" name="service" value="">
            </div>
            <div class="form-group full">
              <label for="message">Anything else we should know?</label>
              <textarea id="message" name="message" placeholder="PC model, specific issues, parts you already have..." rows="3"></textarea>
            </div>
            <div class="form-group full form-submit">
              <button type="submit" class="btn-primary" id="formSubmitBtn">
                <span class="material-symbols-outlined mi-20">send</span>
                <span id="submitText">Send Request</span>
              </button>
            </div>
            <div class="form-success" id="formSuccess" style="display:none;">
              <span class="material-symbols-outlined mi-32">check_circle</span>
              <h3>Request sent!</h3>
              <p>We'll get back to you within the hour during business hours.</p>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <!-- ─── Main footer columns ─── -->
  <div class="container">
    <div class="footer-top">

      <!-- Brand + social -->
      <div class="footer-brand-col">
        <a href="/" class="footer-logo">
          <img src="/logos/03_cleanboot_logo_icon_color_transparent.png" alt="CleanBoot" class="logo-img" width="36" height="36">
          CleanBoot
        </a>
        <p class="footer-tagline">Denver's Windows-only PC repair specialists. Pickup, clean, return — same day.</p>
        <div class="footer-social">
          <a href="tel:7205077846" title="Call us" aria-label="Call CleanBoot">
            <span class="material-symbols-outlined mi">call</span>
          </a>
          <a href="mailto:cleanbootpcservices@outlook.com" title="Email us" aria-label="Email CleanBoot">
            <span class="material-symbols-outlined mi">mail</span>
          </a>
          <a href="sms:7205077846" title="Text us" aria-label="Text CleanBoot">
            <span class="material-symbols-outlined mi">sms</span>
          </a>
          <a href="/#contact" title="Book service" aria-label="Book service">
            <span class="material-symbols-outlined mi">calendar_month</span>
          </a>
        </div>
        <a href="https://www.google.com/maps/search/CleanBoot+PC+Services+Glendale+CO" target="_blank" rel="noopener" class="google-review-badge">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
          <span>Find us on Google</span>
        </a>
      </div>

      <!-- Services nav -->
      <div class="footer-nav-col">
        <h4>Services</h4>
        <ul class="footer-nav-links">
          <li><a href="/pc-tune-up.html">PC Tune-Up</a></li>
          <li><a href="/malware-adware-removal.html">Malware &amp; Adware Removal</a></li>
          <li><a href="/tune-up-+-malware-combo.html">Tune-Up + Malware Combo</a></li>
          <li><a href="/backup-service.html">Backup Service</a></li>
          <li><a href="/windows-driver-updates.html">Windows &amp; Driver Updates</a></li>
          <li><a href="/ram-&-gpu-upgrades.html">RAM &amp; GPU Upgrades</a></li>
        </ul>
      </div>

      <!-- Contact info -->
      <div class="footer-contact-col">
        <h4>Contact</h4>
        <ul class="footer-contact-list">
          <li>
            <div class="fci-icon"><span class="material-symbols-outlined mi">call</span></div>
            <div>
              <div class="fci-label">Phone</div>
              <a href="tel:7205077846" class="fci-value">(720) 507-7846</a>
            </div>
          </li>
          <li>
            <div class="fci-icon"><span class="material-symbols-outlined mi">mail</span></div>
            <div>
              <div class="fci-label">Email</div>
              <a href="mailto:cleanbootpcservices@outlook.com" class="fci-value">cleanbootpcservices@outlook.com</a>
            </div>
          </li>
          <li>
            <div class="fci-icon"><span class="material-symbols-outlined mi">location_on</span></div>
            <div>
              <div class="fci-label">Location</div>
              <a href="https://www.google.com/maps/search/CleanBoot+PC+Services+Glendale+CO" target="_blank" rel="noopener" class="fci-value" style="font-weight:400;">Glendale &amp; Denver, CO</a>
            </div>
          </li>
          <li>
            <div class="fci-icon"><span class="material-symbols-outlined mi">schedule</span></div>
            <div>
              <div class="fci-label">Response Time</div>
              <span class="fci-value" style="font-weight:400;cursor:default;">Usually within 1 hour</span>
            </div>
          </li>
        </ul>
      </div>

    </div><!-- /footer-top -->

    <!-- Trust bar -->
    <div class="trust-bar">
      <div class="trust-item"><span class="material-symbols-outlined mi">verified_user</span> Windows-Only Specialists</div>
      <div class="trust-item"><span class="material-symbols-outlined mi">local_shipping</span> Free Pickup &amp; Return</div>
      <div class="trust-item"><span class="material-symbols-outlined mi">schedule</span> Same-Day Service</div>
      <div class="trust-item"><span class="material-symbols-outlined mi">payments</span> Transparent Pricing</div>
      <div class="trust-item"><span class="material-symbols-outlined mi">shield</span> No Reinstalls Guaranteed</div>
    </div>

    <!-- Bottom bar -->
    <div class="footer-bottom">
      <div class="footer-copy">© 2026 CleanBoot PC Services. All rights reserved. Glendale &amp; Denver, CO.</div>
      <div class="footer-bottom-links">
        <a href="/#how-it-works">How It Works</a>
        <a href="/#faq">FAQ</a>
        <a href="/#services">Services</a>
        <a href="/#contact">Book Now</a>
      </div>
    </div>
  </div>
</footer>

<script>
  // ─── Theme toggle ───────────────────────────────────────
  const html = document.documentElement;
  const themeToggle = document.getElementById('themeToggle');
  const themeIcon = document.getElementById('themeIcon');

  const saved = localStorage.getItem('cb-theme');
  if (saved === 'light') {
    html.setAttribute('data-theme', 'light');
    themeIcon.textContent = 'light_mode';
  }

  themeToggle.addEventListener('click', () => {
    const isDark = html.getAttribute('data-theme') !== 'light';
    if (isDark) {
      html.setAttribute('data-theme', 'light');
      themeIcon.textContent = 'light_mode';
      localStorage.setItem('cb-theme', 'light');
    } else {
      html.setAttribute('data-theme', 'dark');
      themeIcon.textContent = 'dark_mode';
      localStorage.setItem('cb-theme', 'dark');
    }
  });

  // ─── Nav scroll ───────────────────────────────────────
  const nav = document.getElementById('navbar');
  window.addEventListener('scroll', () => {
    nav.classList.toggle('scrolled', window.scrollY > 30);
  });

  // ─── FAQ accordion ───────────────────────────────────────
  document.querySelectorAll('.faq-question').forEach(btn => {
    btn.addEventListener('click', () => {
      const item = btn.closest('.faq-item');
      document.querySelectorAll('.faq-item').forEach(i => { if (i !== item) i.classList.remove('open'); });
      item.classList.toggle('open');
    });
  });

  // ─── Scroll reveal ───────────────────────────────────────
  const reveals = document.querySelectorAll('.reveal');
  const io = new IntersectionObserver((entries) => {
    entries.forEach((entry, i) => {
      if (entry.isIntersecting) {
        setTimeout(() => entry.target.classList.add('visible'), i * 100);
        io.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1 });
  reveals.forEach(el => io.observe(el));

  // ─── Custom Select Dropdowns ─────────────────────────────────
  document.querySelectorAll('.custom-select').forEach(select => {
    const trigger = select.querySelector('.cs-trigger');
    const optionsList = select.querySelector('.cs-options');
    const options = select.querySelectorAll('.cs-option');
    const hiddenInput = select.querySelector('input[type="hidden"]');
    const dataName = select.getAttribute('data-name');

    trigger.addEventListener('click', () => {
      const isOpen = select.classList.contains('open');
      // Close all others
      document.querySelectorAll('.custom-select.open').forEach(s => s.classList.remove('open'));
      if (!isOpen) select.classList.add('open');
      trigger.setAttribute('aria-expanded', !isOpen);
    });

    options.forEach(opt => {
      opt.addEventListener('click', () => {
        const val = opt.getAttribute('data-value');
        const text = opt.textContent;
        select.querySelector('.cs-value').textContent = text;
        hiddenInput.value = val;
        options.forEach(o => o.classList.remove('selected'));
        opt.classList.add('selected');
        select.classList.remove('open');
        trigger.setAttribute('aria-expanded', 'false');
      });
    });

    // Keyboard nav
    trigger.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); trigger.click(); }
      if (e.key === 'Escape') { select.classList.remove('open'); trigger.setAttribute('aria-expanded', 'false'); }
    });
  });

  // Close dropdowns on outside click
  document.addEventListener('click', e => {
    if (!e.target.closest('.custom-select')) {
      document.querySelectorAll('.custom-select.open').forEach(s => s.classList.remove('open'));
    }
  });

  // ─── Form submit UX ─────────────────────────────────────
  const contactForm = document.getElementById('contactForm');
  const submitBtn = document.getElementById('formSubmitBtn');
  const submitText = document.getElementById('submitText');
  const formSuccess = document.getElementById('formSuccess');

  if (contactForm) {
    contactForm.addEventListener('submit', () => {
      submitBtn.classList.add('loading');
      submitText.textContent = 'Sending...';
    });
    contactForm.addEventListener('submit', async () => {
      try {
        const fd = new FormData(contactForm);
        const res = await fetch(contactForm.action, { method: 'POST', body: fd, headers: { 'Accept': 'application/json' } });
        if (res.ok) {
          contactForm.querySelector('.form-grid').style.display = 'none';
          formSuccess.style.display = 'flex';
        }
      } catch (_) {}
    }, { once: true });
  }
</script>

