<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ColorCoral Elementor Adaptation</title>
  <style>
    @font-face {
      font-family: "Inter";
      src: url("/assets/fonts/InterVariable.woff2") format("woff2");
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
    }

    :root {
      --ink: #101820;
      --muted: #5b6678;
      --paper: #f7faf9;
      --white: #ffffff;
      --teal: #19b9b4;
      --deep-teal: #087b7a;
      --coral: #ff6f59;
      --graphite: #1f2933;
      --cool: #eaf4f3;
      --line: #dce7e6;
      --dark: #111b22;
      --radius: 8px;
      --shadow: 0 20px 56px rgba(20, 36, 43, .12);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
    }

    body.page-id-962 #content-wrap.container {
      width: 100% !important;
      max-width: none !important;
      padding: 0 !important;
    }

    .cc-home02 {
      width: 100%;
      overflow: clip;
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .cc-home02 img {
      max-width: 100%;
      display: block;
    }

    .cc-home02 a:not(.cc-button) {
      color: inherit;
      text-decoration: none;
    }

    .cc-container {
      width: min(1180px, calc(100% - 40px));
      max-width: none;
      margin: 0 auto;
    }

    .cc-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 20px;
      border-radius: 999px;
      background: var(--ink);
      color: var(--white);
      border: 1px solid var(--ink);
      font-size: 14px;
      font-weight: 780;
      font-family: inherit;
      text-transform: none;
      letter-spacing: 0;
      line-height: 1.2;
      text-decoration: none;
      white-space: nowrap;
    }

    .cc-button.secondary {
      background: transparent;
      color: var(--ink);
      border-color: rgba(16, 24, 32, .18);
    }

    .cc-home02 .cc-button:hover,
    .cc-home02 .cc-button:focus {
      color: var(--white);
    }

    .cc-home02 .cc-button.secondary:hover,
    .cc-home02 .cc-button.secondary:focus {
      color: var(--ink);
    }

    .section {
      padding: 92px 0;
    }

    .hero-section {
      padding: 70px 0 88px;
    }

    .two-col {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
      align-items: center;
      gap: 56px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--deep-teal);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: none;
      margin-bottom: 20px;
    }

    .eyebrow::before {
      content: "";
      width: 34px;
      height: 2px;
      background: var(--teal);
    }

    .cc-home02 h1,
    .cc-home02 h2,
    .cc-home02 h3,
    .cc-home02 p {
      margin: 0;
    }

    .cc-home02 h1,
    .cc-home02 h2,
    .cc-home02 h3 {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight: 700;
      color: var(--ink);
    }

    .cc-home02 h1 {
      max-width: 610px;
      font-size: 72px;
      line-height: .98;
      letter-spacing: 0;
    }

    .lead {
      max-width: 530px;
      margin-top: 24px;
      color: var(--muted);
      font-size: 19px;
      line-height: 1.62;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 34px;
    }

    .hero-points {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 44px;
      border-top: 1px solid rgba(16, 24, 32, .12);
      border-bottom: 1px solid rgba(16, 24, 32, .12);
    }

    .hero-point {
      padding: 18px 16px 18px 0;
      border-right: 1px solid rgba(16, 24, 32, .12);
    }

    .hero-point:last-child {
      border-right: 0;
      padding-left: 16px;
    }

    .hero-point strong {
      display: block;
      margin-bottom: 5px;
      font-size: 15px;
    }

    .hero-point span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .hero-media,
    .carousel {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--white);
      border: 1px solid rgba(8, 123, 122, .12);
      box-shadow: var(--shadow);
    }

    .hero-media img {
      width: 100%;
      aspect-ratio: 8 / 7;
      object-fit: cover;
    }

    .carousel {
      display: grid;
      place-items: center;
    }

    .carousel img {
      width: 100%;
      display: block;
    }

    .carousel .carousel-slide,
    .carousel.product-carousel .carousel-slide {
      display: none;
    }

    .carousel .carousel-slide.active,
    .carousel.product-carousel .carousel-slide.active {
      display: block;
    }

    .carousel.product-carousel {
      background: rgba(255, 255, 255, .72);
      box-shadow: none;
    }

    .carousel.product-carousel img {
      height: 330px;
      object-fit: contain;
      border-radius: var(--radius);
      filter: drop-shadow(0 24px 34px rgba(12, 22, 30, .18));
    }

    .carousel.airtag-carousel {
      width: calc(100% - 52px);
      margin: 34px auto 10px;
      background: rgba(255, 255, 255, .06);
      border-color: rgba(255, 255, 255, .08);
      box-shadow: none;
    }

    .carousel.airtag-carousel img {
      height: 260px;
      object-fit: contain;
      filter: drop-shadow(0 24px 34px rgba(25, 185, 180, .18));
    }

    .carousel-arrow {
    position: absolute;
    top: 50%;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(16, 24, 32, .12);
    background: rgba(255, 255, 255, .86);
    color: var(--ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(16, 24, 32, .12);
}

    .carousel-arrow.prev {
      left: 14px;
    }

    .carousel-arrow.next {
      right: 14px;
    }

    .product-side .carousel-arrow {
      background: rgba(255, 255, 255, .14);
      color: var(--white);
      border-color: rgba(255, 255, 255, .16);
    }

    .carousel-dots {
      position: absolute;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
      display: flex;
      gap: 7px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(16, 24, 32, .36);
    }

    .carousel-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      padding: 0;
      border: 0;
      background: rgba(255, 255, 255, .55);
      cursor: pointer;
    }

    .carousel-dot.active {
      width: 18px;
      background: var(--white);
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 42px;
      margin-bottom: 34px;
    }

    .cc-home02 h2 {
      max-width: 690px;
      font-size: 48px;
      line-height: 1.06;
      letter-spacing: 0;
    }

    .section-copy {
      max-width: 430px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.6;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .card,
    .feature-card,
    .product-card {
      background: var(--white);
      border: 1px solid rgba(16, 24, 32, .08);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 16px 42px rgba(20, 36, 43, .08);
    }

    .card img {
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
    }

    .card-body,
    .product-body {
      padding: 24px;
    }

    .cc-home02 h3 {
      font-size: 22px;
      line-height: 1.18;
      margin-bottom: 10px;
    }

    .card p,
    .feature-card p,
    .product-card p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
    }

    .brand-section {
      background: var(--dark);
      color: var(--white);
      padding: 92px 0;
    }

    .brand-section .eyebrow {
      color: #78e4df;
    }

    .brand-section p {
      color: #b9c7cc;
    }

    .cc-home02 .brand-section h2,
    .cc-home02 .product-side h3 {
      color: var(--white);
    }

    .brand-photo {
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .14);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    }

    .brand-photo img {
      width: 100%;
      aspect-ratio: 14 / 9;
      object-fit: cover;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .feature-card {
      min-height: 220px;
      padding: 24px;
    }

    .number {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      margin-bottom: 28px;
      background: var(--cool);
      color: var(--deep-teal);
      font-weight: 850;
    }

    .product-layout {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 18px;
    }

    .product-main {
      display: grid;
      grid-template-columns: 1fr .95fr;
      align-items: center;
      gap: 24px;
      padding: 30px;
      background: linear-gradient(135deg, #ffffff, #e8f7f5);
    }

    .product-main > img {
      width: 100%;
      height: 330px;
      object-fit: contain;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .72);
      filter: drop-shadow(0 24px 34px rgba(12, 22, 30, .18));
    }

    .product-side {
      background: #161f28;
      color: var(--white);
    }

    .product-side > img {
      width: calc(100% - 52px);
      height: 260px;
      margin: 34px auto 10px;
      object-fit: contain;
      filter: drop-shadow(0 24px 34px rgba(25, 185, 180, .18));
    }

    .product-side p {
      color: #b9c7cc;
    }

    .tag {
      display: inline-flex;
      width: fit-content;
      margin-bottom: 18px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255, 111, 89, .14);
      color: var(--coral);
      font-size: 12px;
      font-weight: 820;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    @media (max-width: 980px) {
      .two-col,
      .product-layout,
      .product-main {
        grid-template-columns: 1fr;
      }

      .cc-home02 h1 {
        font-size: 56px;
      }

      .card-grid,
      .feature-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .section-head {
        display: block;
      }

      .section-copy {
        margin-top: 16px;
      }
    }

    @media (max-width: 640px) {
      .cc-container {
        width: min(100% - 28px, 1180px);
      }

      .section,
      .brand-section {
        padding: 68px 0;
      }

      .hero-section {
        padding: 52px 0 68px;
      }

      .cc-home02 h1 {
        font-size: 43px;
      }

      .cc-home02 h2 {
        font-size: 34px;
      }

      .lead {
        font-size: 17px;
      }

      .hero-points,
      .card-grid,
      .feature-grid {
        grid-template-columns: 1fr;
      }

      .hero-point,
      .hero-point:last-child {
        border-right: 0;
        border-bottom: 1px solid rgba(16, 24, 32, .12);
        padding-left: 0;
      }

      .hero-point:last-child {
        border-bottom: 0;
      }

      .product-main {
        padding: 20px;
      }

      .product-main > img,
      .carousel.product-carousel img {
        height: 260px;
      }

    }
  </style>


  <main class="cc-home02">
    <section class="hero-section" id="cleaning">
      <div class="cc-container two-col">
        <div>
          <div class="eyebrow">Computer Cleaning Gel</div>
          <h1>Clean hidden dust in seconds.</h1>
          <p class="lead">Soft reusable gel for keyboards, car vents, laptops, and small tech gaps.</p>
          <div class="actions">
            <a class="cc-button" href="https://www.amazon.com/s?me=A2RL5NIVWI06VE">Shop Now</a>
            <a class="cc-button secondary" href="#scenes">See Uses</a>
          </div>
          <div class="hero-points">
            <div class="hero-point">
              <strong>keyboards</strong>
              <span>Gets between keys.</span>
            </div>
            <div class="hero-point">
              <strong>Car vents</strong>
              <span>Reaches tight gaps.</span>
            </div>
            <div class="hero-point">
              <strong>Reusable</strong>
              <span>Store and use again.</span>
            </div>
          </div>
        </div>

        <div class="hero-media carousel" data-carousel="" aria-label="Hero image carousel">
          <img class="carousel-slide active" src="/assets/images/hero-carousel-01.webp.jpg" alt="ColorCoral cleaning gel used on a keyboard desk setup">
          <img class="carousel-slide" src="/assets/images/hero-carousel-02.webp.jpg" alt="ColorCoral cleaning gel product set in an outdoor scene">
          <button class="carousel-arrow prev" type="button" data-carousel-prev="" aria-label="Previous image">‹</button>
          <button class="carousel-arrow next" type="button" data-carousel-next="" aria-label="Next image">›</button>
          <div class="carousel-dots" aria-label="Hero carousel pagination">
            <button class="carousel-dot active" type="button" data-carousel-dot="" aria-label="Show image 1"></button>
            <button class="carousel-dot" type="button" data-carousel-dot="" aria-label="Show image 2"></button>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="scenes">
      <div class="cc-container">
        <div class="section-head">
          <h2>For a cleaner desk setup.</h2>
          <p class="section-copy">Soft lemon-scented gel for keyboards, laptops, and everyday desktop electronics.</p>
        </div>

        <div class="card-grid">
          <article class="card">
            <img src="/assets/images/use-keyboard.webp.jpg" alt="Cleaning gel pressed into a mechanical keyboard">
            <div class="card-body">
              <h3>Keyboard Gaps</h3>
              <p>Press into key gaps to lift dust, crumbs, and debris.</p>
            </div>
          </article>

          <article class="card">
            <img src="/assets/images/use-laptop.webp.jpg" alt="Cleaning gel used on a narrow device surface">
            <div class="card-body">
              <h3>Laptop Edges</h3>
              <p>Clean narrow edges, hinge lines, and compact keyboard layouts.</p>
            </div>
          </article>

          <article class="card">
            <img src="/assets/images/use-desk-accessories.webp.jpg" alt="Cleaning gel used on a small detail surface">
            <div class="card-body">
              <h3>Desk Electronics</h3>
              <p>Use on mice, remotes, speakers, calculators, and small desktop devices.</p>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="brand-section">
      <div class="cc-container two-col">
        <div>
          <div class="eyebrow">ColorCoral Clean</div>
          <h2>A fresher, cleaner desk setup starts with ColorCoral.</h2>
          <p class="lead">Soft gel, a fresh scent, and a compact jar make daily keyboard cleaning simple. Keep it nearby for quick dust pickup between keys, desk tools, and everyday electronics.</p>
        </div>
        <div class="brand-photo">
          <img src="/assets/images/brand-system.webp.jpg" alt="ColorCoral product color system and cleaning gel use">
        </div>
      </div>
    </section>

    <section class="section">
      <div class="cc-container">
        <div class="section-head">
          <h2>Simple, soft, reusable.</h2>
          <p class="section-copy">A quick cleaning routine for keyboards and desk electronics.</p>
        </div>

        <div class="feature-grid">
          <article class="feature-card">
            <div class="number">01</div>
            <h3>Soft Gel</h3>
            <p>Non-sticky feel with a fresh lemon scent.</p>
          </article>
          <article class="feature-card">
            <div class="number">02</div>
            <h3>Deep Gaps</h3>
            <p>Press slowly into key gaps to pick up dust.</p>
          </article>
          <article class="feature-card">
            <div class="number">03</div>
            <h3>Reusable</h3>
            <p>Use again until the gel turns dark or sticky.</p>
          </article>
          <article class="feature-card">
            <div class="number">04</div>
            <h3>Easy Storage</h3>
            <p>Keep it in the jar and store in a cool place.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="accessories">
      <div class="cc-container">
        <div class="section-head">
          <h2>A New 2-pack cleaning gel set designed to clean keyboard gaps.</h2>
          <p class="section-copy">Our AirTag holder line is another trusted product series, made with quality silicone and well liked by everyday users.</p>
        </div>

        <div class="product-layout">
          <article class="product-card product-main">
            <div class="carousel product-carousel" data-carousel="" aria-label="Cleaning gel product carousel">
              <img class="carousel-slide active" src="/assets/images/product-cleaning-gel-01.png" alt="ColorCoral yellow cleaning gel product set">
              <img class="carousel-slide" src="/assets/images/product-cleaning-gel-02.jpg" alt="ColorCoral cleaning gel used on a keyboard">
              <button class="carousel-arrow prev" type="button" data-carousel-prev="" aria-label="Previous product image">‹</button>
              <button class="carousel-arrow next" type="button" data-carousel-next="" aria-label="Next product image">›</button>
              <div class="carousel-dots" aria-label="Cleaning gel carousel pagination">
                <button class="carousel-dot active" type="button" data-carousel-dot="" aria-label="Show product image 1"></button>
                <button class="carousel-dot" type="button" data-carousel-dot="" aria-label="Show product image 2"></button>
              </div>
            </div>
            <div class="product-body">
              <span class="tag">Featured product</span>
              <h3>2-Pack Keyboard Cleaning Gel Set</h3>
              <p>Simple and convenient cleaning kits for PC/laptop keyboard and tight gaps.</p>
              <div class="actions">
                <a class="cc-button" href="https://www.amazon.com/dp/B0BLN6QB8Z">Shop on Amazon</a>
                <a class="cc-button secondary" href="#">Product Details</a>
              </div>
            </div>
          </article>

          <article class="product-card product-side">
            <div class="carousel airtag-carousel" data-carousel="" aria-label="AirTag holder product carousel">
              <img class="carousel-slide active" src="/assets/images/product-airtag-holder-01.jpg" alt="ColorCoral pink and black AirTag silicone holders">
              <img class="carousel-slide" src="/assets/images/product-airtag-holder-02.png" alt="ColorCoral pink AirTag holder with car keys">
              <img class="carousel-slide" src="/assets/images/product-airtag-holder-03.png" alt="ColorCoral black AirTag holder attached to a backpack">
              <button class="carousel-arrow prev" type="button" data-carousel-prev="" aria-label="Previous AirTag image">‹</button>
              <button class="carousel-arrow next" type="button" data-carousel-next="" aria-label="Next AirTag image">›</button>
              <div class="carousel-dots">
                <button class="carousel-dot active" type="button" data-carousel-dot="" aria-label="Show AirTag image 1"></button>
                <button class="carousel-dot" type="button" data-carousel-dot="" aria-label="Show AirTag image 2"></button>
                <button class="carousel-dot" type="button" data-carousel-dot="" aria-label="Show AirTag image 3"></button>
              </div>
            </div>
            <div class="product-body">
              <span class="tag">Accessory line</span>
              <h3>AirTag Silicone Holder</h3>
              <p>A light silicone sleeve with a keychain ring for AirTag protection.</p>
            </div>
          </article>
        </div>
      </div>
    </section>
  </main>

  <script>
    document.querySelectorAll("[data-carousel]").forEach((carousel) => {
      const slides = Array.from(carousel.querySelectorAll(".carousel-slide"));
      const dots = Array.from(carousel.querySelectorAll("[data-carousel-dot]"));
      const prev = carousel.querySelector("[data-carousel-prev]");
      const next = carousel.querySelector("[data-carousel-next]");
      let current = slides.findIndex((slide) => slide.classList.contains("active"));
      if (current < 0) current = 0;

      function show(index) {
        current = (index + slides.length) % slides.length;
        slides.forEach((slide, i) => slide.classList.toggle("active", i === current));
        dots.forEach((dot, i) => dot.classList.toggle("active", i === current));
      }

      prev?.addEventListener("click", () => show(current - 1));
      next?.addEventListener("click", () => show(current + 1));
      dots.forEach((dot, i) => dot.addEventListener("click", () => show(i)));
    });
  </script>