azcomputerguru/claudetools
1
0
Fork 0
Code Issues 58 Pull Requests Actions Packages Projects Releases Wiki Activity

acg-website: per-service detail sub-pages + clickable index (Opus)

Browse Source 
Add a detail sub-page for each of the 8 services in "THE FULL INDEX"
(managed-it, backup-recovery, projects-block-time, cybersecurity,
vcio-compliance, microsoft-365, business-phones, web-hosting) in the v2 design
language, and make every index card clickable through to it (homepage "THE
INDEX" rows + all services.html rows; name is a stretched row link, price stays
a secondary link to pricing).

Each page: page-head (Anton name + mono kicker + FROM-price + duotone figure),
what-it-is, what's-included (dark band ledger), how-we-deliver (concierge/human
angle), who-it's-for + real pricing, CTA. Voice is straightforward-IT balanced
with warm/personal, matching the About page. All prices grounded from
pricing.html; scope confirmed against the live site; no fabricated specifics.
All 10 pages 200, styled, zero console errors, responsive to 390px.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mike Swanson
2026-07-23 10:01:52 -07:00
parent 4a7d55014d
commit 36f2bd5da7
12 changed files with 2221 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
projects/acg-website/TODO.md
View File

@@ -20,9 +20,16 @@
- [x] **Real ACG logo integrated** — the power-button "G" mark faithfully vectorized (`v2/assets/acg-g-mark.svg`, geometry measured off the real logo) as the header icon + theme-adaptive SVG favicon on all 6 pages; Anton wordmark kept. Source wordmark logos (full-color/dark/white/header) saved to `v2/assets/brand/`. Mark recolored to the v2 palette (orange `#E24A12` + ink) vs the logo's original orange `#F58921` + navy `#244878` — 2-line swap if the original inks are wanted.
- [x] **Service detail sub-pages (Opus)** — 8 per-service pages (`managed-it`, `backup-recovery`, `projects-block-time`, `cybersecurity`, `vcio-compliance`, `microsoft-365`, `business-phones`, `web-hosting`) in the v2 design language, straightforward-IT + warm/personal voice. Every index card (homepage THE INDEX + `services.html`) is now clickable through to its page. All 200, verified live.
## In progress / next
- Nothing actively in progress. Next up is the go-live backlog below.
## Small follow-ups (from the detail-pages build)
- [ ] Detail-page figures reuse the 5 existing stock images (some repeat across the 8 pages) — bespoke per-service imagery would lift them (ties into image finals).
- [ ] "vCIO & Compliance" and "Projects & Block Time" have no card on the homepage "THE INDEX" (only on `services.html`) — add homepage cards if wanted.
- [ ] Detail cards have a secondary price→pricing link nested in the row-wide link; can collapse to a single undivided row link if preferred.
## Backlog — toward go-live on azcomputerguru.com
- [ ] Real AI image finals for remaining slots (see `v2/IMAGE-SPEC.md`) — blocked on Grok image-gen cooperating.
- [ ] Wire the **contact form** to a real mailbox (currently a demo stub, unchanged from v1).

268
projects/acg-website/v2/backup-recovery.html Normal file
View File

@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Backup & Recovery | Arizona Computer Guru</title>
<meta name="description" content="Tested backups, offsite copies, and ransomware rollback for Arizona businesses. A bad day becomes an inconvenience, not a closure. Included in GPS-Pro and up." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" type="image/svg+xml" href="assets/acg-g-mark.svg" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 101 96" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="currentColor" stroke-width="19.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g><g stroke="var(--accent, #E24A12)" stroke-width="7.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<a class="nav__link" href="index.html">Home</a>
<a class="nav__link" href="services.html" aria-current="page">Services</a>
<a class="nav__link" href="pricing.html">Pricing</a>
<a class="nav__link" href="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.02.2 / BACKUP &amp; RECOVERY</span>
<span>RUN YOUR SYSTEMS / SYS.RUN</span>
<span class="page-head__meta-wide">IN GPS-PRO &amp; UP</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Backup &amp;</span>
<span class="accent-word reveal">recovery.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">Backups that we have actually restored from, kept in more than one place, and ready for the worst day. So the fire, the flood, the stolen laptop, or the ransomware note is a rough afternoon instead of the end of the business.</p>
<div class="page-head__aside reveal">
<a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
</div>
</div>
<figure class="page-head__figure frame frame--duo reveal">
<img src="assets/field-gen.png" width="1248" height="832" alt="A technician's hands terminating network cable at a dense patch panel." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.012 / VAULT</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
</figure>
</section>
<!-- ============ 01 WHAT IT IS ============ -->
<section class="sect grid-bg" aria-labelledby="wi-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">What it is / in plain English</p>
</div>
<div class="story__grid">
<div class="story__copy">
<h2 id="wi-h" class="sect__title reveal">A backup you have never restored is just a guess.</h2>
<p class="reveal">Most businesses think they have backups. Far fewer have ever tried to bring one back. We have sat with three Tucson companies who found out their backups were corrupt only after ransomware hit, and that is a conversation nobody should have to have.</p>
<p class="reveal">Backup and recovery done right means copies in more than one place, restores that we test on a schedule, and a written plan for what comes back first and how long it takes. The point is not the backup. The point is the recovery.</p>
<p class="pull reveal">A bad day should be an inconvenience, not a closure. That is the entire reason we do this the careful way.</p>
</div>
<figure class="story__figure frame frame--duo reveal">
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.022 / LIGHT</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
</figure>
</div>
</div>
</section>
<!-- ============ 02 WHAT'S INCLUDED ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="inc-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">02</span>
<p class="kicker mono">What's included / the concrete list</p>
</div>
<h2 id="inc-h" class="band-title reveal">Copies you can count on.</h2>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h3 class="svc__name">Tested restores</h3>
<p class="svc__desc">We verify recoveries on a schedule, not just that a backup ran. When you need the data back, we already know it comes back.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h3 class="svc__name">Offsite copies</h3>
<p class="svc__desc">Your data lives in more than one location, so a single fire, flood, or stolen server never takes the whole business with it.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h3 class="svc__name">Local and cloud</h3>
<p class="svc__desc">Fast local restores for the everyday oops, cloud copies for the real disasters. You get speed and safety, not one or the other.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h3 class="svc__name">Ransomware rollback</h3>
<p class="svc__desc">When something encrypts a machine, we roll it back to a clean point in time instead of negotiating with a stranger.</p>
</div>
<div class="svc__meta mono">GPS-Advanced</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h3 class="svc__name">A written recovery plan</h3>
<p class="svc__desc">Everyone knows what gets restored first and roughly how long it takes, decided calmly ahead of time, not invented during the emergency.</p>
</div>
</article>
</div>
<p class="band-punch reveal">We would rather prove a restore on a quiet Tuesday than promise one on the worst day of your year.</p>
</div>
</section>
</div>
<!-- ============ 03 HOW WE DELIVER ============ -->
<section class="sect sect--surface" aria-labelledby="hd-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">03</span>
<p class="kicker mono">How we deliver it / why it is different</p>
</div>
<h2 id="hd-h" class="sect__title reveal">We test it so you are never surprised.</h2>
<p class="lead reveal">Anyone can sell you backup software. The difference is whether someone is actually watching it succeed and quietly fixing it when it does not.</p>
<p class="reveal">We monitor every backup job and follow up on the ones that fail, so a silent backup does not sit broken for months until you need it. And because we are local, a serious recovery can mean a real person at your office with a drive in hand, not a support ticket and a shrug.</p>
<p class="reveal">When something does go wrong, you get a straight answer about what we can bring back and when. No spin, no hiding the ball. Just the plan, and a Tucson team executing it.</p>
<div class="onair-grid reveal">
<div class="onair-cell">
<div class="trust__num">3&middot;2&middot;1</div>
<div class="trust__label">Copies, media, offsite: the rule we keep</div>
<span class="trust__tag mono" aria-hidden="true">PT.01</span>
</div>
<div class="onair-cell">
<div class="trust__num">TESTED</div>
<div class="trust__label">Restores we verify, not assume</div>
<span class="trust__tag mono" aria-hidden="true">PT.02</span>
</div>
<div class="onair-cell">
<div class="trust__num">24/7</div>
<div class="trust__label">Backup jobs monitored</div>
<span class="trust__tag mono" aria-hidden="true">PT.03</span>
</div>
</div>
</div>
</section>
<!-- ============ 04 WHO IT'S FOR + PRICING ============ -->
<section class="sect grid-bg" aria-labelledby="wp-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">04</span>
<p class="kicker mono">Who it is for / and where it lives</p>
</div>
<h2 id="wp-h" class="sect__title reveal">For anyone who cannot afford to lose the data.</h2>
<p class="lead reveal">Practices with patient records, firms with case files, shops with years of QuickBooks history. If losing it would hurt, this is for you. Backup and disaster recovery is built into GPS-Pro, and ransomware rollback comes with GPS-Advanced.</p>
<div class="table-slab reveal">
<table class="data-table">
<caption>Where backup lives / per endpoint, per month</caption>
<thead><tr><th scope="col">Tier</th><th class="num" scope="col">Per endpoint / mo</th><th scope="col">Backup coverage</th></tr></thead>
<tbody>
<tr><td>GPS-Basic</td><td class="num">$19</td><td>Monitoring and patching</td></tr>
<tr class="pop"><td>GPS-Pro</td><td class="num">$26</td><td>Backup &amp; disaster recovery included</td></tr>
<tr><td>GPS-Advanced</td><td class="num">$39</td><td>Adds ransomware rollback</td></tr>
</tbody>
</table>
</div>
<p class="note reveal">Standalone and project-based backup is available too. The estimator prices the whole thing in seconds.</p>
<div class="inline-actions reveal" style="margin-top:2rem;">
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ CTA BAND (DARK) ============ -->
<div class="band-ink band-ink--cta">
<section class="cta cta--compact" aria-labelledby="cta-h">
<div class="band-wrap">
<p class="kicker mono reveal">No pressure / no fear-mongering / just the plan</p>
<h2 id="cta-h" class="cta__title">
<span class="reveal">Test the restore</span>
<span class="cta__accent reveal">before you need it.</span>
</h2>
<p class="cta__sub reveal">Let us look at how you are backed up today and tell you honestly whether it would hold. Even if the answer is "you are in good shape, change one thing."</p>
<div class="cta__actions reveal">
<a class="btn btn--primary btn--band" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost btn--band-ghost mono" href="calculator.html">Estimate your cost</a>
</div>
</div>
</section>
</div>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>

268
projects/acg-website/v2/business-phones.html Normal file
View File

@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Business Phones (GPS-Voice) | Arizona Computer Guru</title>
<meta name="description" content="Cloud phone systems with desk, desktop, and mobile apps, auto-attendants, free number porting for managed clients, and unlimited US calling. From $22 per user." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" type="image/svg+xml" href="assets/acg-g-mark.svg" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 101 96" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="currentColor" stroke-width="19.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g><g stroke="var(--accent, #E24A12)" stroke-width="7.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<a class="nav__link" href="index.html">Home</a>
<a class="nav__link" href="services.html" aria-current="page">Services</a>
<a class="nav__link" href="pricing.html">Pricing</a>
<a class="nav__link" href="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.02.7 / BUSINESS PHONES</span>
<span>CONNECT YOUR PEOPLE / COM.LINK</span>
<span class="page-head__meta-wide">FROM $22 / USER</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Business</span>
<span class="accent-word reveal">phones.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">GPS-Voice is a cloud phone system that travels with your team. The same number rings your desk, your laptop, and your cell, with auto-attendants, free porting for managed clients, and a flat per-user price. No per-minute surprises.</p>
<div class="page-head__aside reveal">
<a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
</div>
</div>
<figure class="page-head__figure frame frame--duo reveal">
<img src="assets/hero-gen.png" width="1248" height="832" alt="Monsoon light over the Tucson valley, saguaro silhouettes against the Santa Catalina mountains." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.017 / VOICE</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
</figure>
</section>
<!-- ============ 01 WHAT IT IS ============ -->
<section class="sect grid-bg" aria-labelledby="wi-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">What it is / in plain English</p>
</div>
<div class="story__grid">
<div class="story__copy">
<h2 id="wi-h" class="sect__title reveal">One number that follows your people everywhere.</h2>
<p class="reveal">A cloud phone system replaces the old box in the closet with software that runs on the phone on your desk, the app on your laptop, and the app in your pocket. Someone can answer the front-desk line from home and the caller never knows the difference.</p>
<p class="reveal">You get the grown-up features, auto-attendants, ring groups, voicemail-to-email, without a per-minute bill at the end of a busy month. It is a flat price per user, so the phone bill is finally something you can predict.</p>
<p class="pull reveal">Four tiers, no per-minute surprises. You know the bill before the month starts.</p>
</div>
<figure class="story__figure frame frame--duo reveal">
<img src="assets/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.027 / RACK</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
</figure>
</div>
</div>
</section>
<!-- ============ 02 WHAT'S INCLUDED ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="inc-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">02</span>
<p class="kicker mono">What's included / the concrete list</p>
</div>
<h2 id="inc-h" class="band-title reveal">A phone system that keeps up.</h2>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h3 class="svc__name">Desk, desktop, and mobile</h3>
<p class="svc__desc">The same number rings your desk phone, your computer, and your cell. Work from the office, the couch, or the truck on one line.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h3 class="svc__name">Auto-attendants and ring groups</h3>
<p class="svc__desc">"Press one for sales" and "ring the whole front desk" set up the way your business actually answers the phone.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h3 class="svc__name">Free number porting</h3>
<p class="svc__desc">Keep the number your customers have called for years. For managed clients, moving it over is on us.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h3 class="svc__name">Unlimited US calling</h3>
<p class="svc__desc">A flat rate per user with no metering, so a busy month does not turn into a scary invoice.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h3 class="svc__name">e911 and call recording</h3>
<p class="svc__desc">Emergency location handled correctly, and a call record where you need one, included on the tiers that call for it.</p>
</div>
</article>
</div>
<p class="band-punch reveal">The number your customers know does not change. Everything behind it just gets better.</p>
</div>
</section>
</div>
<!-- ============ 03 HOW WE DELIVER ============ -->
<section class="sect sect--surface" aria-labelledby="hd-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">03</span>
<p class="kicker mono">How we deliver it / why it is different</p>
</div>
<h2 id="hd-h" class="sect__title reveal">The same local team, from network to dial tone.</h2>
<p class="lead reveal">Phones sit on your network, so when the phone company and the IT company are two different vendors, you become the go-between the day something breaks.</p>
<p class="reveal">Because we handle both, there is no finger-pointing. If a call quality issue is really a network issue, the same team that runs your phones runs your network, and we just fix it. One number to call, one team that owns the whole path.</p>
<p class="reveal">We plan the port carefully so your lines never go dark mid-transition, and we are local, so on cutover day a real person can be there. No offshore support wrestling with your dial plan at midnight.</p>
<div class="onair-grid reveal">
<div class="onair-cell">
<div class="trust__num">$0</div>
<div class="trust__label">Porting for managed clients</div>
<span class="trust__tag mono" aria-hidden="true">PT.01</span>
</div>
<div class="onair-cell">
<div class="trust__num">1</div>
<div class="trust__label">Number across every device</div>
<span class="trust__tag mono" aria-hidden="true">PT.02</span>
</div>
<div class="onair-cell">
<div class="trust__num">911</div>
<div class="trust__label">Handled the right way</div>
<span class="trust__tag mono" aria-hidden="true">PT.03</span>
</div>
</div>
</div>
</section>
<!-- ============ 04 WHO IT'S FOR + PRICING ============ -->
<section class="sect grid-bg" aria-labelledby="wp-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">04</span>
<p class="kicker mono">Who it is for / and what it costs</p>
</div>
<h2 id="wp-h" class="sect__title reveal">For teams that are done babysitting the phones.</h2>
<p class="lead reveal">Offices with remote and in-person staff, shops that need a real auto-attendant, and anyone tired of a phone bill they cannot predict. Four tiers, from a simple line to a full call center, priced per user.</p>
<div class="table-slab reveal">
<table class="data-table">
<caption>GPS-Voice / per user, per month, no per-minute surprises</caption>
<thead><tr><th scope="col">Tier</th><th class="num" scope="col">Per user</th><th scope="col">Highlights</th></tr></thead>
<tbody>
<tr><td>Basic</td><td class="num">$22</td><td>Unlimited US, app, e911</td></tr>
<tr class="pop"><td>Standard</td><td class="num">$28</td><td>Ring groups, recording</td></tr>
<tr><td>Pro</td><td class="num">$35</td><td>SMS, analytics, CRM</td></tr>
<tr><td>Call Center</td><td class="num">$55</td><td>Queues, supervisor tools</td></tr>
</tbody>
</table>
</div>
<p class="note reveal">Number porting is free for managed clients. The estimator totals phones alongside the rest of your stack.</p>
<div class="inline-actions reveal" style="margin-top:2rem;">
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ CTA BAND (DARK) ============ -->
<div class="band-ink band-ink--cta">
<section class="cta cta--compact" aria-labelledby="cta-h">
<div class="band-wrap">
<p class="kicker mono reveal">No pressure / no per-minute bill / no runaround</p>
<h2 id="cta-h" class="cta__title">
<span class="reveal">Cut the cord</span>
<span class="cta__accent reveal">in the closet.</span>
</h2>
<p class="cta__sub reveal">Tell us how many people answer the phone and how you want calls to flow. We will price it flat and port your numbers for free if you are a managed client.</p>
<div class="cta__actions reveal">
<a class="btn btn--primary btn--band" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost btn--band-ghost mono" href="calculator.html">Estimate your cost</a>
</div>
</div>
</section>
</div>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>

41
projects/acg-website/v2/css/v2.css
View File

@@ -1186,3 +1186,44 @@ a.v:hover { color: var(--accent-ink); }
/* ---- Compact CTA band (interior pages) ----------------------------------------- */
.cta--compact { padding-block: clamp(3.2rem, 6.5vw, 5.5rem); }
.cta--compact .cta__title { font-size: clamp(2.6rem, 7vw, 6rem); }
/* ===========================================================================
v2.2 - CLICKABLE SERVICE INDEX ROWS -> detail sub-pages
The index rows on the homepage and the catalog become links to per-service
detail pages. The service NAME is the real anchor; a stretched ::after makes
the whole row clickable, while the price stays a separate secondary link to
pricing. Rows WITHOUT a link (about promises, detail-page ledgers) are left
completely untouched via :has() gating.
=========================================================================== */
.svc { position: relative; }
.svc__link {
color: inherit; text-decoration: none;
display: inline-flex; align-items: baseline; gap: 0.5rem;
}
/* stretched hit-area: whole row navigates to the detail page */
.svc__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.svc__go {
font-family: var(--f-mono); font-size: 0.72em; color: var(--band-accent-ink);
opacity: 0; transform: translateX(-4px);
transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
/* affordance: rows that link slide + warm on hover/focus, and reveal the arrow */
.svc:has(.svc__link):hover,
.svc:has(.svc__link:focus-visible) { padding-left: 0.6rem; }
.svc:has(.svc__link):hover .svc__link,
.svc:has(.svc__link:focus-visible) .svc__link { color: var(--band-accent-ink); }
.svc:has(.svc__link):hover .svc__go,
.svc:has(.svc__link:focus-visible) .svc__go { opacity: 1; transform: none; }
.svc:has(.svc__link:focus-visible) { background: color-mix(in srgb, var(--band-ink) 6%, transparent); }
.svc__link:focus-visible { outline: 3px solid var(--band-accent); outline-offset: 5px; }
/* secondary action: price chip links to pricing, sitting above the row overlay */
a.svc__meta {
position: relative; z-index: 3; text-decoration: none;
transition: color var(--t-med) var(--ease-out);
}
a.svc__meta:hover { color: var(--band-ink); }
a.svc__meta:focus-visible { outline: 3px solid var(--band-accent); outline-offset: 4px; }
/* graceful fallback for engines without :has() - the name anchor still works */
@supports not selector(:has(*)) {
.svc__go { opacity: 1; transform: none; }
}

267
projects/acg-website/v2/cybersecurity.html Normal file
View File

@@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cybersecurity | Arizona Computer Guru</title>
<meta name="description" content="Advanced EDR, email security, dark-web monitoring, and security-awareness training for Arizona businesses. Layered protection, because antivirus alone is not enough. In GPS-Pro and up." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" type="image/svg+xml" href="assets/acg-g-mark.svg" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 101 96" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="currentColor" stroke-width="19.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g><g stroke="var(--accent, #E24A12)" stroke-width="7.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<a class="nav__link" href="index.html">Home</a>
<a class="nav__link" href="services.html" aria-current="page">Services</a>
<a class="nav__link" href="pricing.html">Pricing</a>
<a class="nav__link" href="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.02.4 / CYBERSECURITY</span>
<span>PROTECT YOUR BUSINESS / SEC.OPS</span>
<span class="page-head__meta-wide">IN GPS-PRO &amp; UP</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Security that</span>
<span class="t-hollow reveal">does its job.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">Layered protection for the way businesses actually get attacked: through email, through stolen passwords, through the one person having a busy day. Advanced EDR, email security, dark-web monitoring, and training that turns your team into a defense.</p>
<div class="page-head__aside reveal">
<a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
</div>
</div>
<figure class="page-head__figure frame frame--duo reveal">
<img src="assets/field-gen.png" width="1248" height="832" alt="A technician's hands terminating network cable at a dense patch panel." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.014 / GUARD</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
</figure>
</section>
<!-- ============ 01 WHAT IT IS ============ -->
<section class="sect grid-bg" aria-labelledby="wi-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">What it is / in plain English</p>
</div>
<div class="story__grid">
<div class="story__copy">
<h2 id="wi-h" class="sect__title reveal">Basic antivirus stopped being enough years ago.</h2>
<p class="reveal">Attacks do not usually look like a virus anymore. They look like a normal login with a stolen password, or an email from the boss that is not really the boss, asking for a wire transfer that almost goes through. Old-style antivirus never sees those coming.</p>
<p class="reveal">Real security is layers. Something watching behavior on each machine, something filtering the email, something warning you when your passwords leak, and a team that knows the difference between a genuine phish and a false alarm. We do not sell fear. We just close the doors that get used.</p>
<p class="pull reveal">Basic antivirus alone is not enough anymore, so we do not pretend it is.</p>
</div>
<figure class="story__figure frame frame--duo reveal">
<img src="assets/hero-gen.png" width="1248" height="832" alt="Monsoon light over the Tucson valley, saguaro silhouettes against the Santa Catalina mountains." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.024 / WATCH</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
</figure>
</div>
</div>
</section>
<!-- ============ 02 WHAT'S INCLUDED ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="inc-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">02</span>
<p class="kicker mono">What's included / the concrete list</p>
</div>
<h2 id="inc-h" class="band-title reveal">Layers that actually stack.</h2>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h3 class="svc__name">Advanced EDR</h3>
<p class="svc__desc">Behavior-based detection that catches the attack antivirus misses, and can isolate a machine before whatever is on it spreads.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h3 class="svc__name">Email security</h3>
<p class="svc__desc">The front door for most attacks. We filter it hard and flag the wire-transfer request that looks just a little too much like your boss.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h3 class="svc__name">Dark-web monitoring</h3>
<p class="svc__desc">We watch for your company credentials turning up in breaches, so a leaked password is a heads-up to you instead of a way in for someone else.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h3 class="svc__name">Security-awareness training</h3>
<p class="svc__desc">Short, regular training so your team learns to spot the phish and hesitate before the click. The cheapest security you can buy.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h3 class="svc__name">MFA and hardening</h3>
<p class="svc__desc">The unglamorous settings that stop most attacks cold, turned on across your accounts and kept on.</p>
</div>
</article>
</div>
<p class="band-punch reveal">Most breaches walk through an unlocked door. Our job is to quietly lock the doors and keep them locked.</p>
</div>
</section>
</div>
<!-- ============ 03 HOW WE DELIVER ============ -->
<section class="sect sect--surface" aria-labelledby="hd-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">03</span>
<p class="kicker mono">How we deliver it / why it is different</p>
</div>
<h2 id="hd-h" class="sect__title reveal">Protection without the scare tactics.</h2>
<p class="lead reveal">Plenty of companies sell security by frightening you. We would rather explain the actual risk, in plain English, and then just handle it.</p>
<p class="reveal">We tune the tools so they protect you without burying your team in pop-ups and blocked emails. When an alert is real, a local tech looks at it and acts. When it is nothing, we make it quiet. You should feel safer, not more anxious.</p>
<p class="reveal">And we will always tell you the truth about where you stand. If your biggest risk is a shared password on a sticky note, we will say that before we sell you anything fancier. Honest first, then thorough.</p>
<div class="onair-grid reveal">
<div class="onair-cell">
<div class="trust__num">EDR</div>
<div class="trust__label">On every managed endpoint</div>
<span class="trust__tag mono" aria-hidden="true">PT.01</span>
</div>
<div class="onair-cell">
<div class="trust__num">DARK&nbsp;WEB</div>
<div class="trust__label">Credentials monitored</div>
<span class="trust__tag mono" aria-hidden="true">PT.02</span>
</div>
<div class="onair-cell">
<div class="trust__num">MFA</div>
<div class="trust__label">Enforced across accounts</div>
<span class="trust__tag mono" aria-hidden="true">PT.03</span>
</div>
</div>
</div>
</section>
<!-- ============ 04 WHO IT'S FOR + PRICING ============ -->
<section class="sect grid-bg" aria-labelledby="wp-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">04</span>
<p class="kicker mono">Who it is for / and where it lives</p>
</div>
<h2 id="wp-h" class="sect__title reveal">For any business with money, data, or a reputation.</h2>
<p class="lead reveal">Which is all of them. Especially anyone holding client records or answering a cyber-insurance questionnaire. Security is built into GPS-Pro and above, and GPS-Advanced adds compliance tooling and ransomware rollback.</p>
<div class="table-slab reveal">
<table class="data-table">
<caption>Security by tier / per endpoint, per month</caption>
<thead><tr><th scope="col">Tier</th><th class="num" scope="col">Per endpoint / mo</th><th scope="col">Security included</th></tr></thead>
<tbody>
<tr><td>GPS-Basic</td><td class="num">$19</td><td>Managed antivirus and patching</td></tr>
<tr class="pop"><td>GPS-Pro</td><td class="num">$26</td><td>EDR, email security, dark web, training</td></tr>
<tr><td>GPS-Advanced</td><td class="num">$39</td><td>Adds compliance and ransomware rollback</td></tr>
</tbody>
</table>
</div>
<p class="note reveal">Email security can be added on its own for <span class="mono">$3</span>/mailbox.</p>
<div class="inline-actions reveal" style="margin-top:2rem;">
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ CTA BAND (DARK) ============ -->
<div class="band-ink band-ink--cta">
<section class="cta cta--compact" aria-labelledby="cta-h">
<div class="band-wrap">
<p class="kicker mono reveal">No pressure / no fear-mongering / no jargon walls</p>
<h2 id="cta-h" class="cta__title">
<span class="reveal">Find the</span>
<span class="cta__accent reveal">open doors.</span>
</h2>
<p class="cta__sub reveal">Let us take an honest look at where you are exposed and what it would actually take to close it. No scare tactics, no obligation.</p>
<div class="cta__actions reveal">
<a class="btn btn--primary btn--band" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost btn--band-ghost mono" href="calculator.html">Estimate your cost</a>
</div>
</div>
</section>
</div>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>

24
projects/acg-website/v2/index.html
View File

@@ -181,50 +181,50 @@
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h3 class="svc__name">Managed IT (GPS)</h3>
<h3 class="svc__name"><a class="svc__link" href="managed-it.html">Managed IT (GPS) <span class="svc__go" aria-hidden="true">&rarr;</span></a></h3>
<p class="svc__desc">24/7 monitoring, automated patching, and a help desk that knows your name.</p>
</div>
<div class="svc__meta mono">from $19<span class="svc__per">/endpoint</span></div>
<a class="svc__meta mono" href="pricing.html">from $19<span class="svc__per">/endpoint</span></a>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h3 class="svc__name">Cybersecurity</h3>
<h3 class="svc__name"><a class="svc__link" href="cybersecurity.html">Cybersecurity <span class="svc__go" aria-hidden="true">&rarr;</span></a></h3>
<p class="svc__desc">EDR, email security, dark-web monitoring, and training that catch what antivirus misses.</p>
</div>
<div class="svc__meta mono">in GPS-Pro &amp; up</div>
<a class="svc__meta mono" href="pricing.html">in GPS-Pro &amp; up</a>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h3 class="svc__name">Backup &amp; Recovery</h3>
<h3 class="svc__name"><a class="svc__link" href="backup-recovery.html">Backup &amp; Recovery <span class="svc__go" aria-hidden="true">&rarr;</span></a></h3>
<p class="svc__desc">Tested backups, offsite copies, and ransomware rollback.</p>
</div>
<div class="svc__meta mono">in GPS-Pro &amp; up</div>
<a class="svc__meta mono" href="pricing.html">in GPS-Pro &amp; up</a>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h3 class="svc__name">Microsoft 365 &amp; Email</h3>
<h3 class="svc__name"><a class="svc__link" href="microsoft-365.html">Microsoft 365 &amp; Email <span class="svc__go" aria-hidden="true">&rarr;</span></a></h3>
<p class="svc__desc">Migrations, licensing, and email that is configured, secured, and supported.</p>
</div>
<div class="svc__meta mono">from $2<span class="svc__per">/mailbox</span></div>
<a class="svc__meta mono" href="pricing.html">from $2<span class="svc__per">/mailbox</span></a>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h3 class="svc__name">Business Phones</h3>
<h3 class="svc__name"><a class="svc__link" href="business-phones.html">Business Phones <span class="svc__go" aria-hidden="true">&rarr;</span></a></h3>
<p class="svc__desc">Cloud phone systems with mobile and desktop apps, porting, and no usage surprises.</p>
</div>
<div class="svc__meta mono">from $22<span class="svc__per">/user</span></div>
<a class="svc__meta mono" href="pricing.html">from $22<span class="svc__per">/user</span></a>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">06</div>
<div class="svc__body">
<h3 class="svc__name">Web &amp; Email Hosting</h3>
<h3 class="svc__name"><a class="svc__link" href="web-hosting.html">Web &amp; Email Hosting <span class="svc__go" aria-hidden="true">&rarr;</span></a></h3>
<p class="svc__desc">Managed hosting with free SSL, daily backups, and real humans on support.</p>
</div>
<div class="svc__meta mono">from $15<span class="svc__per">/mo</span></div>
<a class="svc__meta mono" href="pricing.html">from $15<span class="svc__per">/mo</span></a>
</article>
</div>
<a class="more-link more-link--band reveal" href="services.html">See all services <span class="arrow" aria-hidden="true">&rarr;</span></a>

274
projects/acg-website/v2/managed-it.html Normal file
View File

@@ -0,0 +1,274 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Managed IT (GPS) | Arizona Computer Guru</title>
<meta name="description" content="Guru Protection Services: 24/7 monitoring, automated patching, and a Tucson help desk that already knows your setup. Published per-endpoint pricing from $19." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" type="image/svg+xml" href="assets/acg-g-mark.svg" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 101 96" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="currentColor" stroke-width="19.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g><g stroke="var(--accent, #E24A12)" stroke-width="7.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<a class="nav__link" href="index.html">Home</a>
<a class="nav__link" href="services.html" aria-current="page">Services</a>
<a class="nav__link" href="pricing.html">Pricing</a>
<a class="nav__link" href="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.02.1 / MANAGED IT</span>
<span>RUN YOUR SYSTEMS / SYS.RUN</span>
<span class="page-head__meta-wide">FROM $19 / ENDPOINT</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Managed IT,</span>
<span class="accent-word reveal">always on.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">Guru Protection Services keeps every computer, server, and critical device healthy so downtime is the exception, not the routine. One flat per-endpoint price, and a team in Tucson that already knows your network.</p>
<div class="page-head__aside reveal">
<a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
</div>
</div>
<figure class="page-head__figure frame frame--duo reveal">
<img src="assets/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.011 / RACK</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
</figure>
</section>
<!-- ============ 01 WHAT IT IS ============ -->
<section class="sect grid-bg" aria-labelledby="wi-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">What it is / in plain English</p>
</div>
<div class="story__grid">
<div class="story__copy">
<h2 id="wi-h" class="sect__title reveal">Someone is watching your systems, so you do not have to.</h2>
<p class="reveal">Managed IT means we take responsibility for keeping your technology running. We monitor your machines around the clock, patch them on a schedule, and step in the moment something looks wrong, usually before you have noticed anything at all.</p>
<p class="reveal">It is the opposite of the old break-fix model. You are not paying us more when things go wrong. You pay one predictable price per computer, and our whole job is to keep those computers boring, quiet, and working.</p>
<p class="pull reveal">We charge the same whether your systems break or not, so our only incentive is to keep them running.</p>
</div>
<figure class="story__figure frame frame--duo reveal">
<img src="assets/field-gen.png" width="1248" height="832" alt="A technician's hands terminating network cable at a dense patch panel." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.021 / FIELD</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
</figure>
</div>
</div>
</section>
<!-- ============ 02 WHAT'S INCLUDED ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="inc-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">02</span>
<p class="kicker mono">What's included / the concrete list</p>
</div>
<h2 id="inc-h" class="band-title reveal">Everything under the hood.</h2>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h3 class="svc__name">24/7 monitoring</h3>
<p class="svc__desc">Every server, workstation, and critical device watched around the clock. Alerts reach us before they reach you.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h3 class="svc__name">Automated patching</h3>
<p class="svc__desc">Operating systems and core software kept current on a schedule, so the holes attackers use get closed before anyone can reach them.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h3 class="svc__name">A help desk that knows you</h3>
<p class="svc__desc">Call, email, or remote in and reach a Tucson tech who already has your setup documented. No re-explaining your network every single time.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h3 class="svc__name">Managed antivirus</h3>
<p class="svc__desc">Business-grade protection installed, updated, and watched on every endpoint. Not the free tool that shipped with the machine.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h3 class="svc__name">Monthly health reports</h3>
<p class="svc__desc">A plain-English summary of what we watched, what we patched, and what we fixed before it could become your problem.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">06</div>
<div class="svc__body">
<h3 class="svc__name">Onsite when it counts</h3>
<p class="svc__desc">Remote for the fast stuff, boots on the ground for the rest. Local clients typically see us within an hour or two.</p>
</div>
</article>
</div>
<p class="band-punch reveal">You pay per endpoint, so the bill follows your actual headcount. Add a person, add an endpoint. Downsize, and it drops the next month.</p>
</div>
</section>
</div>
<!-- ============ 03 HOW WE DELIVER ============ -->
<section class="sect sect--surface" aria-labelledby="hd-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">03</span>
<p class="kicker mono">How we deliver it / why it is different</p>
</div>
<h2 id="hd-h" class="sect__title reveal">Concierge, not a call center.</h2>
<p class="lead reveal">The technology is table stakes. What you actually feel day to day is who picks up the phone, how fast they get it, and whether they treat you like a person.</p>
<p class="reveal">When you call us, you reach a local tech who can see your environment and knows your history. No queue three time zones away, no reading your account number twice, no explaining what a workstation is. We answer our own phones, and we have since 2001.</p>
<p class="reveal">We also tell you the truth. If something is fine, we will say so. If a project can wait a quarter, we will say that too. Kind, direct, and honest is the whole standard, and we will never make you feel small for asking a question.</p>
<div class="onair-grid reveal">
<div class="onair-cell">
<div class="trust__num">2001</div>
<div class="trust__label">Serving Arizona businesses since</div>
<span class="trust__tag mono" aria-hidden="true">PT.01</span>
</div>
<div class="onair-cell">
<div class="trust__num">1&ndash;2HR</div>
<div class="trust__label">Typical onsite emergency response</div>
<span class="trust__tag mono" aria-hidden="true">PT.02</span>
</div>
<div class="onair-cell">
<div class="trust__num">24/7</div>
<div class="trust__label">Monitoring on every endpoint</div>
<span class="trust__tag mono" aria-hidden="true">PT.03</span>
</div>
</div>
</div>
</section>
<!-- ============ 04 WHO IT'S FOR + PRICING ============ -->
<section class="sect grid-bg" aria-labelledby="wp-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">04</span>
<p class="kicker mono">Who it is for / and what it costs</p>
</div>
<h2 id="wp-h" class="sect__title reveal">Built for businesses that just need it to work.</h2>
<p class="lead reveal">Small offices, busy medical and legal practices, job sites, and anyone tired of an IT company that only shows up to bill them. Three tiers, published to the dollar, so you can size it yourself before you ever call.</p>
<div class="table-slab reveal">
<table class="data-table">
<caption>GPS monitoring &amp; protection / per endpoint, per month</caption>
<thead><tr><th scope="col">Tier</th><th class="num" scope="col">Per endpoint / mo</th><th scope="col">Best for</th></tr></thead>
<tbody>
<tr><td>GPS-Basic</td><td class="num">$19</td><td>Small, simple environments</td></tr>
<tr class="pop"><td>GPS-Pro</td><td class="num">$26</td><td>Growing businesses that need security</td></tr>
<tr><td>GPS-Advanced</td><td class="num">$39</td><td>Compliance and enterprise-grade needs</td></tr>
</tbody>
</table>
</div>
<p class="note reveal">Add equipment monitoring (routers, switches, printers, NAS) for <span class="mono">$25/mo</span> up to 10 devices.</p>
<div class="inline-actions reveal" style="margin-top:2rem;">
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ CTA BAND (DARK) ============ -->
<div class="band-ink band-ink--cta">
<section class="cta cta--compact" aria-labelledby="cta-h">
<div class="band-wrap">
<p class="kicker mono reveal">No pressure / no pitch deck / no lock-in</p>
<h2 id="cta-h" class="cta__title">
<span class="reveal">Let us watch</span>
<span class="cta__accent reveal">the machines.</span>
</h2>
<p class="cta__sub reveal">Tell us how many computers you run and what has been frustrating you. We will give you an honest read and a real number, same business day.</p>
<div class="cta__actions reveal">
<a class="btn btn--primary btn--band" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost btn--band-ghost mono" href="calculator.html">Estimate your cost</a>
</div>
</div>
</section>
</div>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>

268
projects/acg-website/v2/microsoft-365.html Normal file
View File

@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Microsoft 365 & Email | Arizona Computer Guru</title>
<meta name="description" content="Microsoft 365 migrations, licensing, and budget-friendly hosted email, configured, secured, and supported by people you can call. From $2 per mailbox." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" type="image/svg+xml" href="assets/acg-g-mark.svg" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 101 96" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="currentColor" stroke-width="19.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g><g stroke="var(--accent, #E24A12)" stroke-width="7.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<a class="nav__link" href="index.html">Home</a>
<a class="nav__link" href="services.html" aria-current="page">Services</a>
<a class="nav__link" href="pricing.html">Pricing</a>
<a class="nav__link" href="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.02.6 / MICROSOFT 365 &amp; EMAIL</span>
<span>CONNECT YOUR PEOPLE / COM.LINK</span>
<span class="page-head__meta-wide">FROM $2 / MAILBOX</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Microsoft 365</span>
<span class="accent-word reveal">&amp; email.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">Email and the Microsoft apps, set up right, secured from day one, and supported by people you can actually call. Migrations, the license that fits what you use, or straightforward hosted email starting at $2 a mailbox.</p>
<div class="page-head__aside reveal">
<a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
</div>
</div>
<figure class="page-head__figure frame frame--duo reveal">
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.016 / MAIL</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
</figure>
</section>
<!-- ============ 01 WHAT IT IS ============ -->
<section class="sect grid-bg" aria-labelledby="wi-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">What it is / in plain English</p>
</div>
<div class="story__grid">
<div class="story__copy">
<h2 id="wi-h" class="sect__title reveal">The email works. The person behind it answers.</h2>
<p class="reveal">Microsoft 365 is email, Office, Teams, and file storage in one place. It is powerful, and it is easy to set up badly. We handle the setup, match you to the license you actually need, and secure it before anyone logs in.</p>
<p class="reveal">Not everyone needs the full Microsoft suite. If you just need reliable email, we offer hosted mailboxes that do the job for a fraction of the cost. Either way, the difference is not the software. It is that a real person configured it and a real person supports it.</p>
<p class="pull reveal">Configured, secured, and supported by people you can call. That last part is the whole difference.</p>
</div>
<figure class="story__figure frame frame--duo reveal">
<img src="assets/about.png" width="1248" height="832" alt="A friendly handshake over a wooden desk with a laptop and a handwritten notebook, an Arizona map framed on the wall." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.026 / CREW</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
</figure>
</div>
</div>
</section>
<!-- ============ 02 WHAT'S INCLUDED ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="inc-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">02</span>
<p class="kicker mono">What's included / the concrete list</p>
</div>
<h2 id="inc-h" class="band-title reveal">Set up the way it should be.</h2>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h3 class="svc__name">Migrations</h3>
<p class="svc__desc">Moved off an old host or another provider with the mail, contacts, and calendars intact, and almost no downtime for your team.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h3 class="svc__name">The right license</h3>
<p class="svc__desc">Basic, Standard, or Premium, matched to what your team actually uses instead of whichever bundle is biggest.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h3 class="svc__name">Hosted email option</h3>
<p class="svc__desc">If you do not need the full Microsoft suite, straightforward IMAP or POP email starting at $2 a mailbox, priced by storage.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h3 class="svc__name">Security from day one</h3>
<p class="svc__desc">MFA, safe-sender rules, and email filtering configured up front, not bolted on after something goes wrong.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h3 class="svc__name">A human on support</h3>
<p class="svc__desc">Locked out, a bad autocomplete, an inbox rule gone sideways. You call a person who can fix it, not a chatbot that cannot.</p>
</div>
</article>
</div>
<p class="band-punch reveal">We match you to the license you need, not the one with the best margin. Fewer surprises on the bill and in the inbox.</p>
</div>
</section>
</div>
<!-- ============ 03 HOW WE DELIVER ============ -->
<section class="sect sect--surface" aria-labelledby="hd-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">03</span>
<p class="kicker mono">How we deliver it / why it is different</p>
</div>
<h2 id="hd-h" class="sect__title reveal">A migration nobody dreads.</h2>
<p class="lead reveal">Email moves have a bad reputation for a reason. Done carelessly, people lose mail, lose calendars, and lose a workday. Done carefully, most people barely notice.</p>
<p class="reveal">We plan the cutover around your schedule, keep the old and new running in parallel where it helps, and stay on hand the morning after so the first "I cannot find an email" gets answered in minutes. Local techs, real phone number, same day.</p>
<p class="reveal">We also lock it down as we go. Default settings leak more than most owners realize, from over-shared documents to permissive forwarding rules. We tighten those quietly so security is the starting point, not an afterthought.</p>
<div class="onair-grid reveal">
<div class="onair-cell">
<div class="trust__num">$2</div>
<div class="trust__label">Where a hosted mailbox starts</div>
<span class="trust__tag mono" aria-hidden="true">PT.01</span>
</div>
<div class="onair-cell">
<div class="trust__num">MFA</div>
<div class="trust__label">On from the first login</div>
<span class="trust__tag mono" aria-hidden="true">PT.02</span>
</div>
<div class="onair-cell">
<div class="trust__num">1&nbsp;CALL</div>
<div class="trust__label">To reach a real person</div>
<span class="trust__tag mono" aria-hidden="true">PT.03</span>
</div>
</div>
</div>
</section>
<!-- ============ 04 WHO IT'S FOR + PRICING ============ -->
<section class="sect grid-bg" aria-labelledby="wp-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">04</span>
<p class="kicker mono">Who it is for / and what it costs</p>
</div>
<h2 id="wp-h" class="sect__title reveal">For teams that live in their inbox.</h2>
<p class="lead reveal">Offices moving off a clunky old mail host, businesses standardizing on Microsoft, and anyone who just wants email that works and a person to call when it does not. Pick a plan, or start with hosted email and grow into more.</p>
<div class="table-slab reveal">
<table class="data-table">
<caption>Microsoft 365 &amp; email / per user, per month</caption>
<thead><tr><th scope="col">Plan</th><th class="num" scope="col">Per user</th><th scope="col">For</th></tr></thead>
<tbody>
<tr><td>Hosted email</td><td class="num">$2&ndash;$10</td><td>IMAP/POP, priced by storage</td></tr>
<tr><td>M365 Basic</td><td class="num">$7</td><td>Web apps and Teams</td></tr>
<tr class="pop"><td>M365 Standard</td><td class="num">$14</td><td>Desktop Office</td></tr>
<tr><td>M365 Premium</td><td class="num">$24</td><td>Security and device management</td></tr>
</tbody>
</table>
</div>
<p class="note reveal">Email security add-on: <span class="mono">$3</span>/mailbox.</p>
<div class="inline-actions reveal" style="margin-top:2rem;">
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ CTA BAND (DARK) ============ -->
<div class="band-ink band-ink--cta">
<section class="cta cta--compact" aria-labelledby="cta-h">
<div class="band-wrap">
<p class="kicker mono reveal">No pressure / no lost email / no runaround</p>
<h2 id="cta-h" class="cta__title">
<span class="reveal">Move the mail,</span>
<span class="cta__accent reveal">keep the calm.</span>
</h2>
<p class="cta__sub reveal">Tell us where your email lives now and where you want it. We will plan the move, price the licenses, and answer the phone the morning after.</p>
<div class="cta__actions reveal">
<a class="btn btn--primary btn--band" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost btn--band-ghost mono" href="calculator.html">Estimate your cost</a>
</div>
</div>
</section>
</div>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>

267
projects/acg-website/v2/projects-block-time.html Normal file
View File

@@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Projects & Block Time | Arizona Computer Guru</title>
<meta name="description" content="Migrations, network buildouts, and new-office setups, billed against pre-paid hours that never expire. From $100/hr. We quote before we touch it." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" type="image/svg+xml" href="assets/acg-g-mark.svg" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 101 96" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="currentColor" stroke-width="19.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g><g stroke="var(--accent, #E24A12)" stroke-width="7.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<a class="nav__link" href="index.html">Home</a>
<a class="nav__link" href="services.html" aria-current="page">Services</a>
<a class="nav__link" href="pricing.html">Pricing</a>
<a class="nav__link" href="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.02.3 / PROJECTS &amp; BLOCK TIME</span>
<span>RUN YOUR SYSTEMS / SYS.RUN</span>
<span class="page-head__meta-wide">FROM $100 / HR</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Projects &amp;</span>
<span class="t-hollow reveal">block time.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">The bigger jobs and the one-off work: migrations, network buildouts, a whole new office. Bank hours at a better rate and draw them down whenever you need them. They never expire, and we quote the scope before we start.</p>
<div class="page-head__aside reveal">
<a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
</div>
</div>
<figure class="page-head__figure frame frame--duo reveal">
<img src="assets/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.013 / BUILD</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
</figure>
</section>
<!-- ============ 01 WHAT IT IS ============ -->
<section class="sect grid-bg" aria-labelledby="wi-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">What it is / in plain English</p>
</div>
<div class="story__grid">
<div class="story__copy">
<h2 id="wi-h" class="sect__title reveal">For the work that does not fit a monthly plan.</h2>
<p class="reveal">Some work is a project: moving email to a new platform, wiring a new suite, standing up a server, rolling out laptops for a growing team. It has a start, a finish, and a number, and we agree on all three before anyone touches a cable.</p>
<p class="reveal">Block time is for everything in between. You pre-pay a bank of hours at a lower rate and draw them down as things come up, on your schedule. The hours never expire, so there is no pressure to burn them and no penalty for saving them.</p>
<p class="pull reveal">There is never a charge to find out what something will cost. Ask, and you get a straight number.</p>
</div>
<figure class="story__figure frame frame--duo reveal">
<img src="assets/field-gen.png" width="1248" height="832" alt="A technician's hands terminating network cable at a dense patch panel." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.023 / FIELD</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
</figure>
</div>
</div>
</section>
<!-- ============ 02 WHAT'S INCLUDED ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="inc-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">02</span>
<p class="kicker mono">What we do / the concrete list</p>
</div>
<h2 id="inc-h" class="band-title reveal">The work, scoped and named.</h2>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h3 class="svc__name">Migrations</h3>
<p class="svc__desc">Email, servers, files, or a whole office moved with a plan and a rollback, usually after hours so nobody loses a working day.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h3 class="svc__name">Network buildouts</h3>
<p class="svc__desc">Cabling, switches, firewalls, and Wi-Fi that actually reaches the back office and the warehouse, not just the front desk.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h3 class="svc__name">New-office setups</h3>
<p class="svc__desc">From an empty suite to a working office: internet, phones, workstations, printers, and the network that ties it together.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h3 class="svc__name">Hardware and rollouts</h3>
<p class="svc__desc">Specced, ordered, imaged, and deployed. New machines that show up ready to work instead of ready to configure.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h3 class="svc__name">Block time</h3>
<p class="svc__desc">Pre-paid hours banked at a better rate and drawn down whenever you need them. No expiry, no use-it-or-lose-it.</p>
</div>
</article>
</div>
<p class="band-punch reveal">A fixed scope and a real number, every time. If it is not on the estimate, we will quote it before we do it.</p>
</div>
</section>
</div>
<!-- ============ 03 HOW WE DELIVER ============ -->
<section class="sect sect--surface" aria-labelledby="hd-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">03</span>
<p class="kicker mono">How we deliver it / why it is different</p>
</div>
<h2 id="hd-h" class="sect__title reveal">No surprise invoice at the end.</h2>
<p class="lead reveal">The worst part of hiring IT for a project is the mystery: the vague quote, the creeping hours, the bill that lands bigger than the conversation.</p>
<p class="reveal">We scope the work up front and tell you what it will cost. If we hit something unexpected mid-project, we stop and talk before the meter runs, not after. You are never handed a number you did not see coming.</p>
<p class="reveal">And because the same local team does your day-to-day support, whoever runs your project already understands your environment. The migration is planned by people who will still be answering your phone next year.</p>
<div class="onair-grid reveal">
<div class="onair-cell">
<div class="trust__num">$0</div>
<div class="trust__label">To get a scope and a quote</div>
<span class="trust__tag mono" aria-hidden="true">PT.01</span>
</div>
<div class="onair-cell">
<div class="trust__num">NEVER</div>
<div class="trust__label">Block time hours expire</div>
<span class="trust__tag mono" aria-hidden="true">PT.02</span>
</div>
<div class="onair-cell">
<div class="trust__num">FIXED</div>
<div class="trust__label">Scope agreed before we start</div>
<span class="trust__tag mono" aria-hidden="true">PT.03</span>
</div>
</div>
</div>
</section>
<!-- ============ 04 WHO IT'S FOR + PRICING ============ -->
<section class="sect grid-bg" aria-labelledby="wp-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">04</span>
<p class="kicker mono">Who it is for / and what it costs</p>
</div>
<h2 id="wp-h" class="sect__title reveal">For the move, the buildout, the big change.</h2>
<p class="lead reveal">Businesses opening a second location, leaving a provider that let them down, or finally replacing the server everyone is nervous about. Pay hourly, or bank block time at a better effective rate.</p>
<div class="table-slab reveal">
<table class="data-table">
<caption>Block time / pre-paid hours that never expire</caption>
<thead><tr><th scope="col">Block</th><th class="num" scope="col">Price</th><th class="num" scope="col">Effective rate</th><th scope="col">Notes</th></tr></thead>
<tbody>
<tr><td>10 hours</td><td class="num">$1,500</td><td class="num">$150/hr</td><td>Use anytime, no expiry</td></tr>
<tr><td>20 hours</td><td class="num">$2,600</td><td class="num">$130/hr</td><td>Bank &amp; draw down</td></tr>
<tr class="pop"><td>30 hours</td><td class="num">$3,000</td><td class="num">$100/hr</td><td>Best per-hour value</td></tr>
</tbody>
</table>
</div>
<p class="note reveal">Off-plan labor is <span class="mono">$175/hr</span>. Plans and block time bring that down, and there is never a charge to ask what something will cost.</p>
<div class="inline-actions reveal" style="margin-top:2rem;">
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ CTA BAND (DARK) ============ -->
<div class="band-ink band-ink--cta">
<section class="cta cta--compact" aria-labelledby="cta-h">
<div class="band-wrap">
<p class="kicker mono reveal">No pressure / no vague quotes / no meter anxiety</p>
<h2 id="cta-h" class="cta__title">
<span class="reveal">Tell us the</span>
<span class="cta__accent reveal">project.</span>
</h2>
<p class="cta__sub reveal">Describe the move or the buildout and we will scope it, price it, and tell you the honest timeline. No charge to find out.</p>
<div class="cta__actions reveal">
<a class="btn btn--primary btn--band" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost btn--band-ghost mono" href="calculator.html">Estimate your cost</a>
</div>
</div>
</section>
</div>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>

32
projects/acg-website/v2/services.html
View File

@@ -92,26 +92,26 @@
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h4 class="svc__name">Managed IT (GPS)</h4>
<h4 class="svc__name"><a class="svc__link" href="managed-it.html">Managed IT (GPS) <span class="svc__go" aria-hidden="true">&rarr;</span></a></h4>
<p class="svc__desc">Guru Protection Services keeps every endpoint healthy: 24/7 monitoring, automated patching, and a help desk that already knows your setup. You get monthly health reports showing what we fixed before it broke.</p>
</div>
<div class="svc__meta mono">from $19<span class="svc__per">/endpoint</span></div>
<a class="svc__meta mono" href="pricing.html">from $19<span class="svc__per">/endpoint</span></a>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h4 class="svc__name">Backup &amp; Recovery</h4>
<h4 class="svc__name"><a class="svc__link" href="backup-recovery.html">Backup &amp; Recovery <span class="svc__go" aria-hidden="true">&rarr;</span></a></h4>
<p class="svc__desc">Tested backups, offsite copies, and ransomware rollback. A bad day becomes an inconvenience instead of a closure, and we prove the restores actually work.</p>
</div>
<div class="svc__meta mono">in GPS-Pro &amp; up</div>
<a class="svc__meta mono" href="pricing.html">in GPS-Pro &amp; up</a>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h4 class="svc__name">Projects &amp; Block Time</h4>
<h4 class="svc__name"><a class="svc__link" href="projects-block-time.html">Projects &amp; Block Time <span class="svc__go" aria-hidden="true">&rarr;</span></a></h4>
<p class="svc__desc">Migrations, network buildouts, new-office setups, and one-off work, billed against pre-paid hours that never expire. Bank the hours, draw them down when you need them.</p>
</div>
<div class="svc__meta mono">from $100<span class="svc__per">/hr</span></div>
<a class="svc__meta mono" href="pricing.html">from $100<span class="svc__per">/hr</span></a>
</article>
</div>
</div>
@@ -122,18 +122,18 @@
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h4 class="svc__name">Cybersecurity</h4>
<h4 class="svc__name"><a class="svc__link" href="cybersecurity.html">Cybersecurity <span class="svc__go" aria-hidden="true">&rarr;</span></a></h4>
<p class="svc__desc">Advanced EDR, email security, dark-web monitoring, and security-awareness training. Basic antivirus alone is not enough anymore, so we do not pretend it is.</p>
</div>
<div class="svc__meta mono">in GPS-Pro &amp; up</div>
<a class="svc__meta mono" href="pricing.html">in GPS-Pro &amp; up</a>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h4 class="svc__name">vCIO &amp; Compliance</h4>
<h4 class="svc__name"><a class="svc__link" href="vcio-compliance.html">vCIO &amp; Compliance <span class="svc__go" aria-hidden="true">&rarr;</span></a></h4>
<p class="svc__desc">Strategy, budgeting, and cyber-insurance readiness. We help you check the boxes auditors and insurers ask for (HIPAA, SOC, MFA, documented backups) and hand you the paperwork.</p>
</div>
<div class="svc__meta mono">in GPS-Advanced</div>
<a class="svc__meta mono" href="pricing.html">in GPS-Advanced</a>
</article>
</div>
</div>
@@ -144,26 +144,26 @@
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">06</div>
<div class="svc__body">
<h4 class="svc__name">Microsoft 365 &amp; Email</h4>
<h4 class="svc__name"><a class="svc__link" href="microsoft-365.html">Microsoft 365 &amp; Email <span class="svc__go" aria-hidden="true">&rarr;</span></a></h4>
<p class="svc__desc">Migrations, Business Standard or Premium licensing, or budget-friendly hosted email. Configured, secured, and supported by people you can call.</p>
</div>
<div class="svc__meta mono">from $2<span class="svc__per">/mailbox</span></div>
<a class="svc__meta mono" href="pricing.html">from $2<span class="svc__per">/mailbox</span></a>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">07</div>
<div class="svc__body">
<h4 class="svc__name">Business Phones (GPS-Voice)</h4>
<h4 class="svc__name"><a class="svc__link" href="business-phones.html">Business Phones (GPS-Voice) <span class="svc__go" aria-hidden="true">&rarr;</span></a></h4>
<p class="svc__desc">Cloud phone systems with mobile and desktop apps, auto-attendants, and free number porting for managed clients. Four tiers, no per-minute surprises.</p>
</div>
<div class="svc__meta mono">from $22<span class="svc__per">/user</span></div>
<a class="svc__meta mono" href="pricing.html">from $22<span class="svc__per">/user</span></a>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">08</div>
<div class="svc__body">
<h4 class="svc__name">Web &amp; Email Hosting</h4>
<h4 class="svc__name"><a class="svc__link" href="web-hosting.html">Web &amp; Email Hosting <span class="svc__go" aria-hidden="true">&rarr;</span></a></h4>
<p class="svc__desc">Managed hosting with free SSL, daily backups, and a real person (not a ticket robot) when something needs a hand.</p>
</div>
<div class="svc__meta mono">from $15<span class="svc__per">/mo</span></div>
<a class="svc__meta mono" href="pricing.html">from $15<span class="svc__per">/mo</span></a>
</article>
</div>
</div>

266
projects/acg-website/v2/vcio-compliance.html Normal file
View File

@@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vCIO & Compliance | Arizona Computer Guru</title>
<meta name="description" content="Technology strategy, budgeting, cyber-insurance readiness, and HIPAA/SOC compliance support without hiring a full-time IT director. Included in GPS-Advanced." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" type="image/svg+xml" href="assets/acg-g-mark.svg" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 101 96" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="currentColor" stroke-width="19.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g><g stroke="var(--accent, #E24A12)" stroke-width="7.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<a class="nav__link" href="index.html">Home</a>
<a class="nav__link" href="services.html" aria-current="page">Services</a>
<a class="nav__link" href="pricing.html">Pricing</a>
<a class="nav__link" href="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.02.5 / vCIO &amp; COMPLIANCE</span>
<span>PROTECT YOUR BUSINESS / SEC.OPS</span>
<span class="page-head__meta-wide">IN GPS-ADVANCED</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">vCIO &amp;</span>
<span class="accent-word reveal">compliance.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">A technology plan and the paperwork to prove it, without hiring a full-time IT director. Strategy, budgeting, cyber-insurance readiness, and the documentation auditors and insurers keep asking you for.</p>
<div class="page-head__aside reveal">
<a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
</div>
</div>
<figure class="page-head__figure frame frame--duo reveal">
<img src="assets/about.png" width="1248" height="832" alt="A friendly handshake over a wooden desk with a laptop and a handwritten notebook, an Arizona map framed on the wall." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.015 / STRATEGY</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
</figure>
</section>
<!-- ============ 01 WHAT IT IS ============ -->
<section class="sect grid-bg" aria-labelledby="wi-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">What it is / in plain English</p>
</div>
<div class="story__grid">
<div class="story__copy">
<h2 id="wi-h" class="sect__title reveal">A seat at the table, minus the six-figure salary.</h2>
<p class="reveal">A vCIO is a virtual chief information officer: someone who thinks about your technology the way an owner does, plans a year and three years out, and makes sure the money you spend on IT is a plan instead of a series of surprises.</p>
<p class="reveal">Compliance is the other half. Whether it is HIPAA, SOC, or the ever-growing cyber-insurance questionnaire, someone has to turn on the right controls, keep the evidence, and hand it over when an auditor or an insurer asks. That is the unglamorous work we take off your desk.</p>
<p class="pull reveal">We help you check the boxes auditors and insurers ask for, and then we hand you the paperwork.</p>
</div>
<figure class="story__figure frame frame--duo reveal">
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.025 / LIGHT</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
</figure>
</div>
</div>
</section>
<!-- ============ 02 WHAT'S INCLUDED ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="inc-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">02</span>
<p class="kicker mono">What's included / the concrete list</p>
</div>
<h2 id="inc-h" class="band-title reveal">Strategy you can actually use.</h2>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h3 class="svc__name">Strategy and budgeting</h3>
<p class="svc__desc">A roadmap for the next year and the next three, so IT spend is planned on purpose instead of reacting to whatever broke.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h3 class="svc__name">Cyber-insurance readiness</h3>
<p class="svc__desc">We help you answer the questionnaire truthfully and turn on what it requires: MFA, EDR, training, and documented backups.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h3 class="svc__name">Compliance support</h3>
<p class="svc__desc">HIPAA, SOC, and the common frameworks. The controls, the documentation, and the evidence, prepared the way an auditor wants to see it.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h3 class="svc__name">Quarterly business reviews</h3>
<p class="svc__desc">We sit down, look at what actually happened, and plan what is next. In person, in plain English, with the numbers on the table.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h3 class="svc__name">A dedicated account manager</h3>
<p class="svc__desc">One person who knows your business and owns the relationship, so you are never explaining yourself to a stranger.</p>
</div>
</article>
</div>
<p class="band-punch reveal">The goal is simple: when your insurer or your auditor asks a hard question, you already have the answer and the proof.</p>
</div>
</section>
</div>
<!-- ============ 03 HOW WE DELIVER ============ -->
<section class="sect sect--surface" aria-labelledby="hd-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">03</span>
<p class="kicker mono">How we deliver it / why it is different</p>
</div>
<h2 id="hd-h" class="sect__title reveal">We translate, we do not lecture.</h2>
<p class="lead reveal">Compliance and strategy are where a lot of IT companies hide behind acronyms. We do the opposite, because a plan you do not understand is not really your plan.</p>
<p class="reveal">We have helped owners meet the cyber-insurance requirements that used to keep them up at night, and we work with local Tucson insurance agents regularly, so we know what they are really asking for. We explain the trade-offs in words that make sense and let you make the call.</p>
<p class="reveal">You get a partner who shows up to the review with the truth, not a sales pitch. Sometimes the honest advice is to spend less, and we will say that just as readily as anything else.</p>
<div class="onair-grid reveal">
<div class="onair-cell">
<div class="trust__num">HIPAA</div>
<div class="trust__label">And SOC frameworks supported</div>
<span class="trust__tag mono" aria-hidden="true">PT.01</span>
</div>
<div class="onair-cell">
<div class="trust__num">4&times;/YR</div>
<div class="trust__label">Business reviews, in person</div>
<span class="trust__tag mono" aria-hidden="true">PT.02</span>
</div>
<div class="onair-cell">
<div class="trust__num">1</div>
<div class="trust__label">Dedicated account manager</div>
<span class="trust__tag mono" aria-hidden="true">PT.03</span>
</div>
</div>
</div>
</section>
<!-- ============ 04 WHO IT'S FOR + PRICING ============ -->
<section class="sect grid-bg" aria-labelledby="wp-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">04</span>
<p class="kicker mono">Who it is for / and where it lives</p>
</div>
<h2 id="wp-h" class="sect__title reveal">For regulated shops and nervous renewals.</h2>
<p class="lead reveal">Medical, legal, and financial practices, and any owner staring down an insurance renewal or an audit. Full vCIO and compliance support is built into GPS-Advanced, and dedicated strategy time is also available as block time.</p>
<div class="table-slab reveal">
<table class="data-table">
<caption>vCIO &amp; compliance / where it lives</caption>
<thead><tr><th scope="col">Option</th><th class="num" scope="col">Rate</th><th scope="col">What you get</th></tr></thead>
<tbody>
<tr class="pop"><td>GPS-Advanced</td><td class="num">$39/endpoint</td><td>vCIO, compliance, dedicated account manager</td></tr>
<tr><td>Block time</td><td class="num">from $100/hr</td><td>Strategy and documentation, drawn down as needed</td></tr>
</tbody>
</table>
</div>
<p class="note reveal">Equipment monitoring and per-project compliance work price cleanly in the estimator alongside your endpoints.</p>
<div class="inline-actions reveal" style="margin-top:2rem;">
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ CTA BAND (DARK) ============ -->
<div class="band-ink band-ink--cta">
<section class="cta cta--compact" aria-labelledby="cta-h">
<div class="band-wrap">
<p class="kicker mono reveal">No pressure / no acronym soup / no upsell</p>
<h2 id="cta-h" class="cta__title">
<span class="reveal">Get ahead of</span>
<span class="cta__accent reveal">the audit.</span>
</h2>
<p class="cta__sub reveal">Bring us the insurance questionnaire or the compliance requirement and we will tell you honestly where you stand and what it takes to get there.</p>
<div class="cta__actions reveal">
<a class="btn btn--primary btn--band" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost btn--band-ghost mono" href="calculator.html">Estimate your cost</a>
</div>
</div>
</section>
</div>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>

267
projects/acg-website/v2/web-hosting.html Normal file
View File

@@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web & Email Hosting | Arizona Computer Guru</title>
<meta name="description" content="Managed web and email hosting with free SSL, daily backups, and a real person on support instead of a ticket robot. From $15 a month." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" type="image/svg+xml" href="assets/acg-g-mark.svg" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 101 96" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="currentColor" stroke-width="19.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g><g stroke="var(--accent, #E24A12)" stroke-width="7.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<a class="nav__link" href="index.html">Home</a>
<a class="nav__link" href="services.html" aria-current="page">Services</a>
<a class="nav__link" href="pricing.html">Pricing</a>
<a class="nav__link" href="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.02.8 / WEB &amp; EMAIL HOSTING</span>
<span>CONNECT YOUR PEOPLE / COM.LINK</span>
<span class="page-head__meta-wide">FROM $15 / MO</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Web &amp; email</span>
<span class="accent-word reveal">hosting.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">Managed hosting with the boring, important parts handled: free SSL, daily backups, and a real person when something needs a hand. Your site stays up, stays secure, and stays somebody else's job to worry about.</p>
<div class="page-head__aside reveal">
<a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
</div>
</div>
<figure class="page-head__figure frame frame--duo reveal">
<img src="assets/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.018 / HOST</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
</figure>
</section>
<!-- ============ 01 WHAT IT IS ============ -->
<section class="sect grid-bg" aria-labelledby="wi-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">What it is / in plain English</p>
</div>
<div class="story__grid">
<div class="story__copy">
<h2 id="wi-h" class="sect__title reveal">Your website, handled by people, not a queue.</h2>
<p class="reveal">Your website is usually the first way a customer meets your business, so it should not be running on the cheapest shared box with support that lives in a ticket queue. Managed hosting means we keep the server patched, the certificate current, and the backups running.</p>
<p class="reveal">When something needs attention, you reach a person who can actually look at your site, not a script that asks you to clear your cache and close the ticket. It is hosting where the hard parts are quietly taken care of before you ever notice them.</p>
<p class="pull reveal">A real person, not a ticket robot, when something needs a hand.</p>
</div>
<figure class="story__figure frame frame--duo reveal">
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.028 / LIGHT</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
</figure>
</div>
</div>
</section>
<!-- ============ 02 WHAT'S INCLUDED ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="inc-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">02</span>
<p class="kicker mono">What's included / the concrete list</p>
</div>
<h2 id="inc-h" class="band-title reveal">The unglamorous parts, done.</h2>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h3 class="svc__name">Free SSL</h3>
<p class="svc__desc">The padlock in the address bar, renewed automatically, so your visitors never hit a scary security warning.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h3 class="svc__name">Daily backups</h3>
<p class="svc__desc">Your site copied every day, so a bad plugin update or a broken edit is an undo, not a weekend rebuild.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h3 class="svc__name">Managed updates</h3>
<p class="svc__desc">The server kept patched and healthy, so you think about your business instead of your web host.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h3 class="svc__name">Real support</h3>
<p class="svc__desc">A person who can look at your actual site and help, not a canned reply from a queue three time zones away.</p>
</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h3 class="svc__name">Room to grow</h3>
<p class="svc__desc">From a single brochure site to commerce with unlimited sites, all on the same managed platform. Move up when you are ready.</p>
</div>
</article>
</div>
<p class="band-punch reveal">Hosting should be something you never think about. That is exactly what we are selling.</p>
</div>
</section>
</div>
<!-- ============ 03 HOW WE DELIVER ============ -->
<section class="sect sect--surface" aria-labelledby="hd-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">03</span>
<p class="kicker mono">How we deliver it / why it is different</p>
</div>
<h2 id="hd-h" class="sect__title reveal">One partner for the whole stack.</h2>
<p class="lead reveal">When your hosting, your email, and your IT are three different companies, every problem starts with an argument about whose problem it is.</p>
<p class="reveal">We host your site, run your email, and manage your computers, so there is one team and one number for the whole thing. A DNS change, a new mailbox, a site that suddenly loads slow: it is all us, and we already know how your pieces fit together.</p>
<p class="reveal">And beyond keeping the lights on, we do the rest of the web work too, from design and development to SEO, when you want it. Start with hosting that just works, and grow into whatever your web presence needs next.</p>
<div class="onair-grid reveal">
<div class="onair-cell">
<div class="trust__num">SSL</div>
<div class="trust__label">Free and auto-renewed</div>
<span class="trust__tag mono" aria-hidden="true">PT.01</span>
</div>
<div class="onair-cell">
<div class="trust__num">DAILY</div>
<div class="trust__label">Backups of your site</div>
<span class="trust__tag mono" aria-hidden="true">PT.02</span>
</div>
<div class="onair-cell">
<div class="trust__num">REAL</div>
<div class="trust__label">People on support</div>
<span class="trust__tag mono" aria-hidden="true">PT.03</span>
</div>
</div>
</div>
</section>
<!-- ============ 04 WHO IT'S FOR + PRICING ============ -->
<section class="sect grid-bg" aria-labelledby="wp-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">04</span>
<p class="kicker mono">Who it is for / and what it costs</p>
</div>
<h2 id="wp-h" class="sect__title reveal">For sites that need to just stay up.</h2>
<p class="lead reveal">Small businesses with a brochure site, offices that outgrew a hobby host, and shops running a storefront that cannot afford downtime. Three tiers, published, from a single site to unlimited commerce.</p>
<div class="table-slab reveal">
<table class="data-table">
<caption>Managed web hosting / with free SSL &amp; daily backups</caption>
<thead><tr><th scope="col">Tier</th><th class="num" scope="col">Monthly</th><th scope="col">Includes</th></tr></thead>
<tbody>
<tr><td>Starter</td><td class="num">$15</td><td>5 GB, 1 site</td></tr>
<tr class="pop"><td>Business</td><td class="num">$35</td><td>25 GB, 5 sites</td></tr>
<tr><td>Commerce</td><td class="num">$65</td><td>50 GB, unlimited</td></tr>
</tbody>
</table>
</div>
<p class="note reveal">Design, development, and SEO are available when you want them. The estimator prices hosting alongside the rest of your stack.</p>
<div class="inline-actions reveal" style="margin-top:2rem;">
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ CTA BAND (DARK) ============ -->
<div class="band-ink band-ink--cta">
<section class="cta cta--compact" aria-labelledby="cta-h">
<div class="band-wrap">
<p class="kicker mono reveal">No pressure / no ticket robots / no runaround</p>
<h2 id="cta-h" class="cta__title">
<span class="reveal">Let hosting</span>
<span class="cta__accent reveal">disappear.</span>
</h2>
<p class="cta__sub reveal">Point us at your current site and we will tell you honestly whether moving it is worth it, and handle the whole migration if it is.</p>
<div class="cta__actions reveal">
<a class="btn btn--primary btn--band" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost btn--band-ghost mono" href="calculator.html">Estimate your cost</a>
</div>
</div>
</section>
</div>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>