Home Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Tint Shop — DIY Pre-Cut Window Tint Kits</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Store",
"name": "The Tint Shop",
"url": "https://www.thetintshopco.com",
"telephone": "+1-970-999-0474",
"address": {
"@type": "PostalAddress",
"addressCountry": "US"
},
"sameAs": ["https://www.thetintshopco.com"],
"makesOffer": [
{ "@type": "Offer", "name": "DIY Automotive Window Tint Kit" },
{ "@type": "Offer", "name": "DIY Residential Window Tint Kit" }
]
}
</script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--pink: #f472b6;
--pink-deep: #ec4899;
--fuchsia: #a855f7;
--bg: #0a0a0a;
--bg-card: #111111;
--bg-card2: rgba(17,17,17,0.6);
--border: rgba(255,255,255,0.08);
--text: #ffffff;
--muted: rgba(255,255,255,0.65);
--subtle: rgba(255,255,255,0.45);
}

html { scroll-behavior: smooth; }

body {
background: var(--bg);
color: var(--text);
font-family: 'DM Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Syne', sans-serif; line-height: 1.15; }

a { color: inherit; text-decoration: none; }

::selection { background: rgba(244,114,182,0.3); }

/* ─── Layout ─── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

/* ─── Header ─── */
header {
position: sticky; top: 0; z-index: 50;
background: rgba(10,10,10,0.75);
backdrop-filter: blur(18px);
border-bottom: 1px solid var(--border);
}
.header-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 0.75rem 1.25rem; max-width: 1200px; margin: 0 auto;
}
.logo-wrap { display: flex; align-items: center; gap: 0.75rem; }
.logo-icon {
height: 38px; width: 38px; border-radius: 50%;
background: linear-gradient(135deg, #f472b6, #a855f7);
box-shadow: 0 0 18px rgba(244,114,182,0.35);
display: grid; place-items: center;
font-family: 'Syne', sans-serif; font-weight: 800; font-size: 0.7rem;
}
.logo-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.05rem; }
.logo-sub { font-size: 0.7rem; color: var(--muted); margin-top: -3px; }

nav { display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; }
nav a { color: var(--muted); transition: color 0.2s; }
nav a:hover { color: var(--pink); }

.btn-outline-pink {
display: inline-flex; align-items: center; gap: 0.4rem;
border: 1px solid rgba(244,114,182,0.45);
background: rgba(244,114,182,0.08);
padding: 0.5rem 1rem; border-radius: 999px;
font-size: 0.875rem; font-weight: 600;
transition: background 0.2s;
white-space: nowrap;
}
.btn-outline-pink:hover { background: rgba(244,114,182,0.18); }

@media (max-width: 768px) { nav { display: none; } }

/* ─── Hero ─── */
.hero {
position: relative; overflow: hidden;
padding: 5rem 1.25rem 4rem;
}
.hero-blob1 {
position: absolute; top: -8rem; left: -8rem;
height: 24rem; width: 24rem; border-radius: 50%;
background: rgba(244,114,182,0.18); filter: blur(80px);
pointer-events: none;
}
.hero-blob2 {
position: absolute; bottom: -8rem; right: -8rem;
height: 24rem; width: 24rem; border-radius: 50%;
background: rgba(168,85,247,0.18); filter: blur(80px);
pointer-events: none;
}
.hero-inner {
max-width: 1200px; margin: 0 auto; position: relative;
display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
@media (max-width: 768px) { .hero-inner { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; }
.hero h1 span { color: var(--pink); }
.hero p { margin-top: 1.1rem; color: var(--muted); font-size: 1.05rem; max-width: 480px; }

.hero-btns { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-primary {
background: var(--pink-deep); color: #fff;
padding: 0.75rem 1.4rem; border-radius: 999px;
font-weight: 600; transition: background 0.2s;
border: none; cursor: pointer; font-size: 0.95rem;
}
.btn-primary:hover { background: var(--pink); }
.btn-secondary {
border: 1px solid rgba(255,255,255,0.2);
padding: 0.75rem 1.4rem; border-radius: 999px;
font-weight: 600; transition: background 0.2s;
background: transparent; color: var(--text); cursor: pointer; font-size: 0.95rem;
}
.btn-secondary:hover { background: rgba(255,255,255,0.08); }

.hero-meta { margin-top: 1.4rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: var(--muted); }
.dot-green { height: 8px; width: 8px; border-radius: 50%; background: #34d399; display: inline-block; margin-right: 6px; }

.hero-img-wrap {
position: relative;
}
.hero-img-frame {
aspect-ratio: 4/3; border-radius: 1.5rem;
border: 1px solid var(--border);
background: linear-gradient(135deg, #1a1a1a, #0f0f0f);
padding: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.hero-img {
width: 100%; height: 100%; border-radius: 1.1rem;
background: url('https://images.unsplash.com/photo-1542362567-b07e54358753?q=80&w=1600&auto=format&fit=crop') center/cover;
}
.hero-badge {
position: absolute; bottom: -1.4rem; right: -1rem;
background: rgba(17,17,17,0.85); border: 1px solid var(--border);
backdrop-filter: blur(10px);
padding: 0.6rem 1rem; border-radius: 0.9rem;
font-size: 0.8rem; box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

/* ─── Section titles ─── */
.section-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.5rem; }
.section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
.section-sub { margin-top: 0.5rem; color: var(--muted); }

/* ─── Kits ─── */
#kits { padding: 5rem 1.25rem; max-width: 1200px; margin: 0 auto; }
.kits-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 768px) { .kits-header .btn-outline-pink { display: none; } }

.kits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 768px) { .kits-grid { grid-template-columns: 1fr; } }

.kit-card {
border: 1px solid var(--border); border-radius: 1.5rem;
background: var(--bg-card2); padding: 1.5rem;
transition: border-color 0.25s;
}
.kit-card:hover { border-color: rgba(244,114,182,0.4); }
.kit-img {
aspect-ratio: 16/9; border-radius: 1rem;
background-size: cover; background-position: center;
}
.kit-img-auto { background-image: url('https://images.unsplash.com/photo-1619767886558-efdc259cde1a?q=80&w=1600&auto=format&fit=crop'); }
.kit-img-home { background-image: url('https://images.unsplash.com/photo-1598928506311-c55ded91a20c?q=80&w=1600&auto=format&fit=crop'); }
.kit-head { margin-top: 1.25rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.kit-head h3 { font-size: 1.4rem; font-weight: 700; }
.kit-head p { margin-top: 0.3rem; color: var(--muted); font-size: 0.9rem; }
.badge {
border-radius: 999px; padding: 0.25rem 0.75rem;
font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.badge-pink { background: rgba(244,114,182,0.15); color: #fbcfe8; }
.badge-fuchsia { background: rgba(168,85,247,0.15); color: #e9d5ff; }
.kit-features {
margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
list-style: none;
}
.kit-features li {
border: 1px solid var(--border); border-radius: 0.6rem;
padding: 0.45rem 0.75rem; font-size: 0.82rem; color: var(--muted);
}
.btn-white {
margin-top: 1.25rem; display: inline-flex;
background: #fff; color: #000;
padding: 0.6rem 1.2rem; border-radius: 999px;
font-weight: 600; font-size: 0.875rem;
transition: opacity 0.2s;
}
.btn-white:hover { opacity: 0.88; }

/* ─── Builder ─── */
#builder {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: rgba(17,17,17,0.45);
padding: 5rem 1.25rem;
}
.builder-inner { max-width: 1200px; margin: 0 auto; }
.field-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 768px) { .field-grid { grid-template-columns: 1fr; } }

.field-box { border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; }
.field-box label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.5rem; }
.field-box select, .field-box input {
width: 100%; background: #1a1a1a; border: 1px solid var(--border);
border-radius: 0.7rem; padding: 0.75rem 0.9rem;
color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
appearance: none; -webkit-appearance: none;
outline: none; transition: border-color 0.2s;
}
.field-box select:focus, .field-box input:focus { border-color: rgba(244,114,182,0.5); }
.field-box input::placeholder { color: var(--subtle); }

.builder-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.builder-cta p { font-size: 0.875rem; color: var(--muted); }
.builder-cta a { color: #f9a8d4; text-decoration: underline; text-underline-offset: 3px; }

/* ─── How It Works ─── */
#how { max-width: 1200px; margin: 0 auto; padding: 5rem 1.25rem; }
.steps-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card { border: 1px solid var(--border); border-radius: 1.5rem; background: rgba(17,17,17,0.5); padding: 1.5rem; }
.step-num {
height: 40px; width: 40px; border-radius: 0.75rem;
background: rgba(244,114,182,0.15);
display: grid; place-items: center;
font-family: 'Syne', sans-serif; font-weight: 700; color: #f9a8d4;
}
.step-card h3 { margin-top: 1rem; font-size: 1.15rem; font-weight: 700; }
.step-card p { margin-top: 0.3rem; font-size: 0.875rem; color: var(--muted); }

/* ─── Benefits ─── */
#benefits {
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: rgba(17,17,17,0.4); padding: 5rem 1.25rem;
}
.benefits-inner { max-width: 1200px; margin: 0 auto; }
.benefits-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
@media (max-width: 900px) { .benefits-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .benefits-grid { grid-template-columns: 1fr; } }
.benefit-card { border: 1px solid var(--border); border-radius: 1.5rem; background: rgba(17,17,17,0.55); padding: 1.5rem; }
.benefit-card h3 { font-size: 1.05rem; font-weight: 700; }
.benefit-card p { margin-top: 0.35rem; font-size: 0.875rem; color: var(--muted); }
.footnote { margin-top: 1rem; font-size: 0.72rem; color: var(--subtle); }

/* ─── Reviews ─── */
#reviews { max-width: 1200px; margin: 0 auto; padding: 5rem 1.25rem; }
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; }
.reviews-stat { font-size: 0.875rem; color: var(--muted); }
@media (max-width: 600px) { .reviews-stat { display: none; } }
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
@media (max-width: 768px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-card { border: 1px solid var(--border); border-radius: 1.5rem; background: rgba(17,17,17,0.55); padding: 1.5rem; }
.review-card blockquote { font-size: 0.95rem; color: var(--muted); font-style: italic; }
.review-card blockquote::before { content: '"'; color: var(--pink); font-size: 1.4rem; font-style: normal; line-height: 1; display: block; margin-bottom: 0.4rem; }
.review-card figcaption { margin-top: 1rem; font-size: 0.8rem; color: var(--subtle); }

/* ─── Pro CTA ─── */
#pro {
position: relative; padding: 5rem 1.25rem;
}
.pro-bg {
position: absolute; inset: 0; opacity: 0.15;
background: url('https://images.unsplash.com/photo-1537459452650-9ac51f058b83?q=80&w=1600&auto=format&fit=crop') center/cover;
}
.pro-inner { position: relative; max-width: 1200px; margin: 0 auto; }
.pro-box {
border: 1px solid var(--border); border-radius: 2rem;
background: rgba(10,10,10,0.75); backdrop-filter: blur(16px);
padding: 2.5rem;
}
.pro-box h2 { font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 800; }
.pro-box p { margin-top: 0.6rem; color: var(--muted); }
.pro-btns { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ─── FAQ ─── */
#faq { max-width: 1200px; margin: 0 auto; padding: 5rem 1.25rem; }
.faq-grid { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item { border: 1px solid var(--border); border-radius: 1.5rem; background: rgba(17,17,17,0.55); padding: 1.5rem; }
.faq-item h3 { font-size: 1rem; font-weight: 700; }
.faq-item p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted); }

/* ─── Contact ─── */
#contact {
border-top: 1px solid var(--border);
background: rgba(17,17,17,0.35); padding: 5rem 1.25rem;
}
.contact-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 768px) { .contact-inner { grid-template-columns: 1fr; } }
.contact-info h2 { font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 800; }
.contact-info p { margin-top: 0.5rem; color: var(--muted); }
.contact-list { margin-top: 1.5rem; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.contact-list li { color: var(--muted); font-size: 0.9rem; }
.trust-badges { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.trust-badge { border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.72rem; color: var(--subtle); }
.contact-form {
border: 1px solid var(--border); border-radius: 1.5rem;
background: rgba(10,10,10,0.65); padding: 1.75rem;
display: grid; gap: 1rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }
.contact-form input, .contact-form textarea {
width: 100%; background: #1a1a1a; border: 1px solid var(--border);
border-radius: 0.7rem; padding: 0.75rem 0.9rem;
color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
outline: none; transition: border-color 0.2s; resize: none;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--subtle); }
.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(244,114,182,0.5); }
.form-note { font-size: 0.72rem; color: var(--subtle); }

/* ─── Footer ─── */
footer { border-top: 1px solid var(--border); padding: 3rem 1.25rem 2rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-col p { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.footer-col .col-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.9rem; }
.footer-col ul { margin-top: 0.75rem; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col ul li a { font-size: 0.85rem; color: var(--muted); transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--pink); }
.footer-bottom { max-width: 1200px; margin: 2rem auto 0; text-align: center; font-size: 0.75rem; color: var(--subtle); }
</style>
</head>
<body>

<header>
<div class="header-inner">
<div class="logo-wrap">
<div class="logo-icon">TS</div>
<div>
<div class="logo-name">The Tint Shop</div>
<div class="logo-sub">www.thetintshopco.com</div>
</div>
</div>
<nav>
<a href="#kits">Kits</a>
<a href="#how">How it Works</a>
<a href="#benefits">Benefits</a>
<a href="#reviews">Reviews</a>
<a href="#faq">FAQ</a>
</nav>
<a href="#builder" class="btn-outline-pink">Build Your Kit <span aria-hidden>→</span></a>
</div>
</header>

<section class="hero">
<div class="hero-blob1"></div>
<div class="hero-blob2"></div>
<div class="hero-inner">
<div>
<h1>Pro‑Level Tint.<br><span>DIY Easy.</span></h1>
<p>Pre‑cut car and home window tint kits designed for a perfect fit. Premium film, precision cutting, and step‑by‑step guidance included.</p>
<div class="hero-btns">
<a href="#builder" class="btn-primary">Build Your Kit</a>
<a href="#how" class="btn-secondary">See How It Works</a>
</div>
<div class="hero-meta">
<span><span class="dot-green"></span>Same‑day processing on most kits</span>
<span>•</span>
<span>Free U.S. shipping on $99+</span>
</div>
</div>
<div class="hero-img-wrap">
<div class="hero-img-frame">
<div class="hero-img" role="img" aria-label="Sleek sports car with tinted windows"></div>
</div>
<div class="hero-badge">Trusted by thousands • 4.9★</div>
</div>
</div>
</section>

<section id="kits">
<div class="kits-header">
<div>
<div class="section-label">Products</div>
<h2 class="section-title">Choose Your DIY Kit</h2>
<p class="section-sub">Pre‑cut to your exact vehicle or trimmed‑to‑fit for residential windows.</p>
</div>
<a href="#builder" class="btn-outline-pink">Open Kit Builder</a>
</div>
<div class="kits-grid">

<div class="kit-card">
<div class="kit-img kit-img-auto"></div>
<div class="kit-head">
<div>
<h3>Automotive Tint Kits</h3>
<p>Exact‑fit, computer‑cut film for your make, model & year. 5%, 20%, 35%, 50% VLT options.</p>
</div>
<span class="badge badge-pink">Most Popular</span>
</div>
<ul class="kit-features">
<li>Fronts / Full Vehicle</li>
<li>Sunstrip / Visor</li>
<li>Dyed / Ceramic / IR+</li>
<li>Squeegee + Slip Kit</li>
</ul>
<a href="#builder" class="btn-white">Build Automotive Kit</a>
</div>

<div class="kit-card">
<div class="kit-img kit-img-home"></div>
<div class="kit-head">
<div>
<h3>Home & Office Tint Kits</h3>
<p>Cut‑to‑size or standard rolls with grid backing. Privacy, heat‑rejection, UV‑blocking, decorative.</p>
</div>
<span class="badge badge-fuchsia">New</span>
</div>
<ul class="kit-features">
<li>Clear UV / Neutral</li>
<li>Dual‑Reflective</li>
<li>Frost / Blackout</li>
<li>Tools + Install Guide</li>
</ul>
<a href="#builder" class="btn-white">Build Home Kit</a>
</div>
</div>
</section>

<section id="builder">
<div class="builder-inner">
<div class="section-label">Configure</div>
<h2 class="section-title">Start Your Build</h2>
<p class="section-sub">Pick your platform, shade, and film type. We'll handle the precision cutting.</p>

<div class="field-grid">
<div class="field-box">
<label for="kitType">Select Kit Type</label>
<select id="kitType">
<option value="automotive">Automotive</option>
<option value="home">Home / Office</option>
</select>
</div>
<div class="field-box">
<label for="kitShade">Shade (VLT)</label>
<select id="kitShade">
<option>5% (Limo)</option>
<option>20%</option>
<option>25%</option>
<option>30%</option>
<option>50%</option>
<option>70% (High‑IR)</option>
</select>
</div>
<div class="field-box" id="filmSeriesBox">
<label for="kitFilm">Film Series</label>
<select id="kitFilm">
<option value="carbon">Carbon</option>
<option value="ceramic">Ceramic</option>
</select>
</div>
</div>

<div id="autoFields">

<div class="field-grid" style="margin-top:0;">
<div class="field-box">
<label>Vehicle Make</label>
<input type="text" id="autoMake" placeholder="e.g., Chevrolet" />
</div>
<div class="field-box">
<label>Model</label>
<input type="text" id="autoModel" placeholder="e.g., Corvette" />
</div>
<div class="field-box">
<label>Year</label>
<input type="text" id="autoYear" placeholder="e.g., 2023" />
</div>
</div>

<div style="margin-top:1.5rem;">
<p style="font-size:0.8rem;color:var(--muted);margin-bottom:1rem;">Select a package — price updates based on your film choice above.</p>
<div class="pkg-grid" id="pkgGrid">

<div class="pkg-card" data-pkg="windshield" id="pkg-windshield">
<div class="pkg-top">
<div>
<div class="pkg-name">Windshield Only</div>
<div class="pkg-film-tag">Ceramic only</div>
</div>
<div class="pkg-price" id="price-windshield">$94</div>
</div>
<ul class="pkg-includes">
<li>Full windshield pattern, precision cut</li>
<li>Ceramic film — blocks heat & UV</li>
<li>Squeegee + slip solution included</li>
</ul>
</div>

<div class="pkg-card" data-pkg="two" id="pkg-two">
<div class="pkg-top">
<div>
<div class="pkg-name">2 Windows</div>
<div class="pkg-film-tag" id="filmtag-two">Carbon</div>
</div>
<div class="pkg-price" id="price-two">$50</div>
</div>
<ul class="pkg-includes">
<li>Front driver & passenger windows</li>
<li>Match your rear tint shade</li>
<li>Squeegee + slip solution included</li>
</ul>
</div>

<div class="pkg-card" data-pkg="full" id="pkg-full">
<div class="pkg-top">
<div>
<div class="pkg-name">Full Sides & Back</div>
<div class="pkg-film-tag" id="filmtag-full">Carbon</div>
</div>
<div class="pkg-price" id="price-full">$94</div>
</div>
<ul class="pkg-includes">
<li>All side windows + rear glass</li>
<li>Computer-cut for exact fit</li>
<li>Squeegee + slip solution included</li>
</ul>
</div>

</div>
</div>

<div class="field-box field-box--summary" id="autoPriceSummary" style="display:none; margin-top:1.25rem;">
<label>Your Selection</label>
<div class="price-summary">
<div class="price-row"><span>Vehicle</span><span id="autoSummaryVehicle">—</span></div>
<div class="price-row"><span>Package</span><span id="autoSummaryPkg">—</span></div>
<div class="price-row"><span>Film</span><span id="autoSummaryFilm">—</span></div>
<div class="price-row"><span>Shade</span><span id="autoSummaryShade">—</span></div>
<div class="price-row price-row--total"><span>Kit Price</span><span id="autoSummaryTotal">—</span></div>
</div>
</div>
</div>

<div id="homeFields" style="display:none;">
<div class="field-grid" style="margin-top:0;">
<div class="field-box">
<label for="measWidth">Width (inches)</label>
<input type="number" id="measWidth" placeholder="e.g., 48" min="0" step="0.01" />
<span class="field-hint" id="widthHint"></span>
</div>
<div class="field-box">
<label for="measLength">Length (inches)</label>
<input type="number" id="measLength" placeholder="e.g., 48" min="0" step="0.01" />
<span class="field-hint" id="lengthHint"></span>
</div>
<div class="field-box">
<label for="measQty">Number of Panes</label>
<input type="number" id="measQty" placeholder="e.g., 4" min="1" step="1" value="1" />
</div>
</div>
<div class="field-box field-box--summary" id="priceSummaryBox" style="display:none; margin-top:1.25rem;">
<label>Estimated Total</label>
<div class="price-summary">
<div class="price-row"><span>Dimensions (per pane)</span><span id="summaryDims">—</span></div>
<div class="price-row"><span>Sq Ft per Pane</span><span id="summarySqft">—</span></div>
<div class="price-row"><span>Number of Panes</span><span id="summaryQty">—</span></div>
<div class="price-row"><span>Total Sq Ft</span><span id="summaryTotalSqft">—</span></div>
<div class="price-row"><span>Rate</span><span id="summaryRate">—</span></div>
<div class="price-row price-row--total"><span>Estimated Total</span><span id="summaryTotal">—</span></div>
</div>
</div>
<p class="field-note">Measurements are rounded up to the nearest whole inch. Price shown is for film only.</p>
</div>

<div class="builder-cta" style="margin-top:1.75rem;">
<button class="btn-primary" id="addToCartBtn" onclick="addToShopifyCart()">Add to Cart 🛒</button>
<span id="cartMsg" style="font-size:0.85rem; color:var(--pink); display:none; margin-left:0.5rem;"></span>
<p>Need pro install instead? <a href="#pro">Request a professional install quote</a>.</p>
</div>
</div>
</section>

/* Package cards */
.pkg-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 768px) { .pkg-grid { grid-template-columns: 1fr; } }

.pkg-card {
border: 2px solid var(--border); border-radius: 1.25rem;
background: rgba(17,17,17,0.6); padding: 1.25rem;
cursor: pointer; transition: border-color 0.2s, background 0.2s;
user-select: none;
}
.pkg-card:hover { border-color: rgba(244,114,182,0.35); background: rgba(244,114,182,0.04); }
.pkg-card.selected {
border-color: var(--pink);
background: rgba(244,114,182,0.08);
}
.pkg-card.unavailable { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.pkg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.pkg-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; }
.pkg-film-tag { font-size: 0.7rem; color: var(--pink); margin-top: 0.2rem; }
.pkg-price {
font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.4rem;
color: var(--text); white-space: nowrap;
}
.pkg-includes {
margin-top: 0.9rem; list-style: none;
display: flex; flex-direction: column; gap: 0.35rem;
}
.pkg-includes li { font-size: 0.8rem; color: var(--muted); padding-left: 1rem; position: relative; }
.pkg-includes li::before { content: '✓'; position: absolute; left: 0; color: var(--pink); }
</style>

function addToShopifyCart() {
const type = kitType.value;
const cartMsg = document.getElementById('cartMsg');

if (type === 'automotive') {
if (!selectedPkg) {
cartMsg.textContent = '⚠️ Please select a package first.';
cartMsg.style.display = 'inline'; return;
}
const film = kitFilm.value;
const variantId = VARIANT_IDS[selectedPkg]?.[film];
if (!variantId) {
cartMsg.textContent = '⚠️ That combination isn\'t available.';
cartMsg.style.display = 'inline'; return;
}
// Build note with vehicle + shade info
const make = document.getElementById('autoMake').value.trim();
const model = document.getElementById('autoModel').value.trim();
const year = document.getElementById('autoYear').value.trim();
const shade = kitShade.value;
const note = [year, make, model].filter(Boolean).join(' ');
const noteParam = note ? `&note=Vehicle: ${encodeURIComponent(note)} | Shade: ${encodeURIComponent(shade)}` : '';
window.location.href = `${SHOPIFY_STORE}/cart/${variantId}:1?${noteParam}`;

} else {
// Home/Office — send to Shopify catalog page for now
// (custom sq ft pricing needs a Shopify app or quote flow)
cartMsg.textContent = '→ Redirecting to store for Home/Office film…';
cartMsg.style.display = 'inline';
setTimeout(() => {
window.location.href = `${SHOPIFY_STORE}/collections/all`;
}, 1200);
}
}
const AUTO_PRICES = {
windshield: { carbon: null, ceramic: 94 }, // windshield = ceramic only
two: { carbon: 50, ceramic: 80 },
full: { carbon: 94, ceramic: 160 },
};
const HOME_PRICES = { carbon: 6, ceramic: 8, nano: 10 };

// ── Element refs ────────────────────────────────────────────
const kitType = document.getElementById('kitType');
const kitFilm = document.getElementById('kitFilm');
const kitShade = document.getElementById('kitShade');
const autoFields = document.getElementById('autoFields');
const homeFields = document.getElementById('homeFields');

// Automotive
const pkgCards = document.querySelectorAll('.pkg-card');
const autoPriceSummary = document.getElementById('autoPriceSummary');
const autoSummaryVehicle = document.getElementById('autoSummaryVehicle');
const autoSummaryPkg = document.getElementById('autoSummaryPkg');
const autoSummaryFilm = document.getElementById('autoSummaryFilm');
const autoSummaryShade = document.getElementById('autoSummaryShade');
const autoSummaryTotal = document.getElementById('autoSummaryTotal');

// Home
const widthInput = document.getElementById('measWidth');
const lengthInput = document.getElementById('measLength');
const qtyInput = document.getElementById('measQty');
const widthHint = document.getElementById('widthHint');
const lengthHint = document.getElementById('lengthHint');
const priceSummaryBox = document.getElementById('priceSummaryBox');
const summaryDims = document.getElementById('summaryDims');
const summarySqft = document.getElementById('summarySqft');
const summaryQty = document.getElementById('summaryQty');
const summaryTotalSqft = document.getElementById('summaryTotalSqft');
const summaryRate = document.getElementById('summaryRate');
const summaryTotal = document.getElementById('summaryTotal');

let selectedPkg = null;

// ── Switch between kit types ─────────────────────────────────
function updateKitType() {
if (kitType.value === 'home') {
autoFields.style.display = 'none';
homeFields.style.display = 'block';
// Home uses carbon/ceramic/nano — restore nano option if missing
if (!document.querySelector('#kitFilm option[value="nano"]')) {
const opt = document.createElement('option');
opt.value = 'nano'; opt.textContent = 'IR+ Nano Ceramic (Best)';
kitFilm.appendChild(opt);
}
} else {
autoFields.style.display = 'block';
homeFields.style.display = 'none';
// Remove nano option for automotive (not offered)
const nanoOpt = document.querySelector('#kitFilm option[value="nano"]');
if (nanoOpt) nanoOpt.remove();
// If nano was selected, reset to carbon
if (kitFilm.value === 'nano') kitFilm.value = 'carbon';
}
updateAutoPackages();
calcHomePrice();
}

// ── Update package cards when film changes ───────────────────
function updateAutoPackages() {
const film = kitFilm.value;

pkgCards.forEach(card => {
const pkg = card.dataset.pkg;
const price = AUTO_PRICES[pkg][film];

// Windshield is ceramic-only
if (pkg === 'windshield') {
if (film !== 'ceramic') {
card.classList.add('unavailable');
card.querySelector('.pkg-price').textContent = 'Ceramic only';
if (selectedPkg === 'windshield') {
card.classList.remove('selected');
selectedPkg = null;
}
} else {
card.classList.remove('unavailable');
card.querySelector('.pkg-price').textContent = `$${price}`;
}
return;
}

// Update film tag and price for other packages
const filmTag = card.querySelector('.pkg-film-tag');
if (filmTag) filmTag.textContent = film === 'ceramic' ? 'Ceramic' : 'Carbon';
card.querySelector('.pkg-price').textContent = `$${price}`;
});

updateAutoSummary();
}

// ── Package card click ───────────────────────────────────────
pkgCards.forEach(card => {
card.addEventListener('click', () => {
pkgCards.forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
selectedPkg = card.dataset.pkg;
updateAutoSummary();
});
});

// ── Build automotive summary ─────────────────────────────────
function updateAutoSummary() {
if (!selectedPkg) { autoPriceSummary.style.display = 'none'; return; }

const film = kitFilm.value;
const price = AUTO_PRICES[selectedPkg][film];
if (!price) { autoPriceSummary.style.display = 'none'; return; }

const make = document.getElementById('autoMake').value.trim();
const model = document.getElementById('autoModel').value.trim();
const year = document.getElementById('autoYear').value.trim();
const vehicleStr = [year, make, model].filter(Boolean).join(' ') || '—';

const pkgLabels = { windshield: 'Windshield Only', two: '2 Windows', full: 'Full Sides & Back' };
const filmLabels = { carbon: 'Carbon', ceramic: 'Ceramic', nano: 'IR+ Nano Ceramic' };

autoSummaryVehicle.textContent = vehicleStr;
autoSummaryPkg.textContent = pkgLabels[selectedPkg];
autoSummaryFilm.textContent = filmLabels[film];
autoSummaryShade.textContent = kitShade.value;
autoSummaryTotal.textContent = `$${price}`;
autoPriceSummary.style.display = 'block';
}

// ── Home price calculator ────────────────────────────────────
function ceilInch(val) { return Math.ceil(val); }

function calcHomePrice() {
if (kitType.value !== 'home') return;

const rawW = parseFloat(widthInput.value);
const rawL = parseFloat(lengthInput.value);
const qty = Math.max(1, parseInt(qtyInput.value) || 1);

widthHint.textContent = (!isNaN(rawW) && rawW > 0)
? (rawW % 1 !== 0 ? `Rounded up to ${ceilInch(rawW)}"` : `${ceilInch(rawW)}"`) : '';
lengthHint.textContent = (!isNaN(rawL) && rawL > 0)
? (rawL % 1 !== 0 ? `Rounded up to ${ceilInch(rawL)}"` : `${ceilInch(rawL)}"`) : '';

if (isNaN(rawW) || isNaN(rawL) || rawW <= 0 || rawL <= 0) {
priceSummaryBox.style.display = 'none'; return;
}

const w = ceilInch(rawW);
const l = ceilInch(rawL);
const sqFtPerPane = (w * l) / 144;
const totalSqFt = sqFtPerPane * qty;
const rate = HOME_PRICES[kitFilm.value] || 8;
const total = totalSqFt * rate;

summaryDims.textContent = `${w}" × ${l}"`;
summarySqft.textContent = `${sqFtPerPane.toFixed(2)} sq ft`;
summaryQty.textContent = `${qty} pane${qty !== 1 ? 's' : ''}`;
summaryTotalSqft.textContent = `${totalSqFt.toFixed(2)} sq ft`;
summaryRate.textContent = `$${rate}.00 / sq ft`;
summaryTotal.textContent = `$${total.toFixed(2)}`;
priceSummaryBox.style.display = 'block';
}

// ── Event listeners ──────────────────────────────────────────
kitType.addEventListener('change', updateKitType);
kitFilm.addEventListener('change', () => { updateAutoPackages(); calcHomePrice(); });
kitShade.addEventListener('change', updateAutoSummary);
widthInput.addEventListener('input', calcHomePrice);
lengthInput.addEventListener('input', calcHomePrice);
qtyInput.addEventListener('input', calcHomePrice);
document.getElementById('autoMake').addEventListener('input', updateAutoSummary);
document.getElementById('autoModel').addEventListener('input', updateAutoSummary);
document.getElementById('autoYear').addEventListener('input', updateAutoSummary);

// Init
updateKitType();

document.getElementById('yr').textContent = new Date().getFullYear();
</script>

<div class="section-label">Process</div>
<h2 class="section-title">How It Works</h2>
<div class="steps-grid">
<div class="step-card"><div class="step-num">1</div><h3>Choose</h3><p>Pick vehicle or home kit, film type, and shade.</p></div>
<div class="step-card"><div class="step-num">2</div><h3>We Cut</h3><p>Computer‑cut patterns for perfect fit—no guessing.</p></div>
<div class="step-card"><div class="step-num">3</div><h3>Install</h3><p>Follow our pro video & printed guide. Tools included.</p></div>
<div class="step-card"><div class="step-num">4</div><h3>Enjoy</h3><p>Cooler cabin, UV protection, a sleek look—guaranteed.</p></div>
</div>
</section>

<section id="benefits">
<div class="benefits-inner">
<div class="section-label">Why Us</div>
<h2 class="section-title">Why Tint with Us</h2>
<div class="benefits-grid">
<div class="benefit-card"><h3>Premium Films Only</h3><p>Color‑stable, no‑fade, ceramic IR heat rejection up to 95%*.</p></div>
<div class="benefit-card"><h3>Precision Pre‑Cut</h3><p>Automotive patterns matched to your VIN range for a factory‑fit edge.</p></div>
<div class="benefit-card"><h3>Lifetime Support</h3><p>Install videos, chat support, and replacement piece options.</p></div>
<div class="benefit-card"><h3>UV & Skin Safety</h3><p>Blocks up to 99% of UVA/UVB to help protect passengers & interiors.</p></div>
<div class="benefit-card"><h3>Home Energy Savings</h3><p>Reduce glare & cooling costs while keeping views clear.</p></div>
<div class="benefit-card"><h3>Pro‑Install Option</h3><p>Prefer drop‑off? We'll apply it at our certified shop.</p></div>
</div>
<p class="footnote">*Heat rejection values vary by film series and VLT.</p>
</div>
</section>

<section id="reviews">
<div class="reviews-head">
<div>
<div class="section-label">Testimonials</div>
<h2 class="section-title">Real Results. Happy Customers.</h2>
</div>
<div class="reviews-stat">4.9 ★ average • 1,000+ installs supported</div>
</div>
<div class="reviews-grid">
<figure class="review-card">
<blockquote>Perfect cut for my Hummer EV. Install was way easier than I expected.</blockquote>
<figcaption>— Ken H.</figcaption>
</figure>
<figure class="review-card">
<blockquote>Home office glare is gone. Loved the step‑by‑step guide and tools.</blockquote>
<figcaption>— Anna S.</figcaption>
</figure>
<figure class="review-card">
<blockquote>Ceramic kit looks factory. Great support when I needed a replacement piece.</blockquote>
<figcaption>— Mike N.</figcaption>
</figure>
</div>
</section>

<section id="pro">
<div class="pro-bg"></div>
<div class="pro-inner">
<div class="pro-box">
<h2>Want It Installed For You?</h2>
<p>Prefer to have it done for you? Connect with a certified installer in your area—professional workmanship with warranty paperwork.</p>
<div class="pro-btns">
<a href="#builder" class="btn-white">Buy DIY Kit</a>
<a href="#contact" class="btn-secondary">Request Install Quote</a>
</div>
</div>
</div>
</section>

<section id="faq">
<div class="section-label">Help</div>
<h2 class="section-title">FAQs</h2>
<div class="faq-grid">
<div class="faq-item"><h3>Is DIY tint legal in my state?</h3><p>We include a quick legality guide by VLT, but always verify local laws. Choose 35–50% for safer compliance.</p></div>
<div class="faq-item"><h3>What if I mess up a window?</h3><p>No stress—order replacement pieces at a discount. Our guides minimize risk.</p></div>
<div class="faq-item"><h3>How long does install take?</h3><p>Most full cars take 2–3 hours for a first‑timer. A single home window can take 10–20 minutes.</p></div>
<div class="faq-item"><h3>What's included?</h3><p>Pre‑cut film (auto) or measured film (home), tool kit, slip solution concentrate, squeegee, and link to install videos.</p></div>
</div>
</section>

<section id="contact">
<div class="contact-inner">
<div class="contact-info">
<div class="section-label">Get in Touch</div>
<h2>Questions? We're Here.</h2>
<p>Chat with a tint expert or send us a message — we're happy to help.</p>
<ul class="contact-list">
<li>📞 (970) 999‑0474</li>
<li>🌐 <a href="https://www.thetintshopco.com" target="_blank">www.thetintshopco.com</a></li>
<li>📱 @thetintshopco on Instagram, Facebook & TikTok</li>
<li>🕒 Mon–Fri 8:00–4:30 (MT)</li>
</ul>
<div class="trust-badges">
<span class="trust-badge">Premium Film Quality</span>
<span class="trust-badge">Lifetime Film Warranty</span>
<span class="trust-badge">Secure Checkout</span>
</div>
</div>
<form class="contact-form" onsubmit="return false;">
<div class="form-row">
<input type="text" placeholder="Full Name" />
<input type="email" placeholder="Email" />
</div>
<input type="tel" placeholder="Phone" />
<textarea rows="4" placeholder="Tell us what you're tinting (car or home)"></textarea>
<button type="submit" class="btn-primary">Send</button>
<p class="form-note">By submitting, you agree to be contacted about your request.</p>
</form>
</div>
</section>

<footer>
<div class="footer-inner">
<div class="footer-col">
<div class="col-title">The Tint Shop</div>
<p>DIY pre‑cut tint kits for cars & homes. Restore. Restyle. Protect.</p>
</div>
<div class="footer-col">
<div class="col-title">Shop</div>
<ul>
<li><a href="#kits">Automotive Kits</a></li>
<li><a href="#kits">Home/Office Kits</a></li>
<li><a href="#builder">Kit Builder</a></li>
</ul>
</div>
<div class="footer-col">
<div class="col-title">Support</div>
<ul>
<li><a href="#faq">FAQs</a></li>
<li><a href="#how">Install Guides</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-col">
<div class="col-title">Legal</div>
<ul>
<li><a href="#">Warranty</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">© <span id="yr"></span> The Tint Shop LLC. All rights reserved.</div>
</footer>

</body>
</html>