<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canny Industries</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
:root{
  --dark:#111;
  --accent:#f4b400;
  --soft-bg:#fff4e8;
  --page-bg:#f7f4ef;
  --text-light:#777;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  background:var(--page-bg);
  color:var(--dark);
  line-height:1.9;
}

/* HEADER */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#111;
  padding:18px 48px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand img{
  width:40px;
  height:40px;
}
.brand span{
  color:#fff;
  font-size:22px;
  font-weight:700;
}
nav a{
  color:#fff;
  margin-left:28px;
  text-decoration:none;
  font-weight:500;
  transition:color .3s;
}
nav a:hover{color:var(--accent);}

/* GLOBAL SECTIONS */
section{
  padding:160px 28px;
  max-width:1200px;
  margin:auto;
  position:relative;
}
h1,h2{
  font-weight:700;
  letter-spacing:-0.6px;
  color:#111;
}
h1{font-size:58px;}
h2{font-size:44px;}
p{
  font-size:15px;
  color:var(--text-light);
  max-width:760px;
  margin:32px auto 0;
}

/* HERO */
.hero{
  max-width:none;
  padding:220px 28px;
  background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url('hero-image.jpg') center/cover no-repeat;
  text-align:center;
}
.hero h1{color:#fff;}
.hero p{
  color:#e6e6e6;
  font-size:17px;
  max-width:680px;
}

/* SUBTLE SIDE AMBIENCE */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  background:rgba(244,180,0,.18);
  filter:blur(120px);
  top:50%;
  transform:translateY(-50%);
}
.hero::before{left:-160px;}
.hero::after{right:-160px;}

/* PRODUCTS */
.products{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:48px;
  margin-top:90px;
}
.product-card{
  background:var(--soft-bg);
  border-radius:32px;
  padding:42px 36px;
  text-align:center;
  transition:.4s ease;
}
.product-card:hover{
  transform:translateY(-12px);
}
.product-card img{
  width:160px;
  border-radius:50%;
  margin-bottom:26px;
}
.product-card h3{
  font-size:21px;
  margin-bottom:14px;
}
.product-card p{
  font-size:14px;
}
.product-card a{
  display:inline-block;
  margin-top:26px;
  padding:14px 30px;
  background:var(--accent);
  color:#111;
  border-radius:18px;
  font-weight:600;
  text-decoration:none;
}

/* ABOUT */
#about{
  background:var(--soft-bg);
  border-radius:56px;
  padding:180px 56px;
}
#about p{
  max-width:820px;
}

/* CONTACT */
.links{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  max-width:440px;
  margin:70px auto 0;
}
.links a{
  padding:20px;
  border-radius:20px;
  background:#111;
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}
.links a:hover{
  background:var(--accent);
  color:#111;
}
.contact-info{
  margin-top:60px;
  text-align:center;
  color:#555;
  font-size:15px;
}

/* FOOTER */
footer{
  background:#111;
  color:#aaa;
  text-align:center;
  padding:80px 24px;
}
footer strong{
  color:#fff;
  font-size:20px;
  letter-spacing:.3px;
}
footer p:last-child{
  font-size:14px;
  margin-top:10px;
}

/* SCROLL REVEAL */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:1.1s ease;
}
.reveal.active{
  opacity:1;
  transform:none;
}

/* RESPONSIVE */
@media(max-width:768px){
  h1{font-size:40px;}
  h2{font-size:32px;}
  header{padding:16px 24px;}
  nav a{margin-left:16px;font-size:14px;}
  section{padding:120px 22px;}
  #about{padding:120px 28px;}
}
</style>
</head>
<body>

<header>
  <div class="brand">
    <img src="logo.png" alt="Canny Logo">
    <span>Canny Industries</span>
  </div>
  <nav>
    <a href="#home">Home</a>
    <a href="#products">Products</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<!-- HERO -->
<section id="home" class="hero">
  <h1>Modern Wellness, Thoughtfully Crafted</h1>
  <p>
    Purpose-driven wellness products made with clarity, care,
    and ingredients you can trust — designed for modern living.
  </p>
</section>

<!-- PRODUCTS -->
<section id="products" class="reveal">
  <h2>Our Products</h2>

  <div class="products">

    <div class="product-card">
      <img src="Turmeric Logo.png" alt="Pure Turmeric Powder">
      <h3>Tiffany’s Pure Turmeric Powder</h3>
      <p>
        Carefully sourced turmeric made without fillers or shortcuts —
        delivering purity, consistency, and everyday wellness support.
      </p>
      <a href="https://shopee.com" target="_blank">Buy Now</a>
    </div>

    <div class="product-card">
      <img src="placeholder.png" alt="Coming Soon">
      <h3>Next Wellness Essential</h3>
      <p>
        A thoughtfully developed product designed to complement
        modern routines with trusted Canny quality.
      </p>
      <a style="pointer-events:none;opacity:.6;">Coming Soon</a>
    </div>

    <div class="product-card">
      <img src="placeholder.png" alt="Future Product">
      <h3>Future Formulation</h3>
      <p>
        Premium ingredients, intentional design,
        and the same careful approach you expect from Canny.
      </p>
      <a style="pointer-events:none;opacity:.6;">Coming Soon</a>
    </div>

  </div>
</section>

<!-- ABOUT -->
<section id="about" class="reveal">
  <h2>About Canny Industries</h2>

  <p>
    Canny Industries was founded on a simple principle: wellness should be
    intentional, honest, and thoughtfully made. The word “canny” means smart,
    careful, and deliberate — values that guide every decision we make.
  </p>

  <p>
    From ingredient sourcing to final packaging, we focus on clarity over clutter
    and quality over quantity. We believe wellness products should feel calm,
    trustworthy, and easy to integrate into everyday life.
  </p>

  <p>
    We don’t chase trends or exaggerate promises. Instead, we build products
    with purpose — clean, consistent, and crafted with care for those who value
    simplicity and substance.
  </p>
</section>

<!-- CONTACT -->
<section id="contact" class="reveal">
  <h2>Connect With Us</h2>
  <p>Follow our journey and stay connected with Canny Industries.</p>

  <div class="links">
    <a href="#">Facebook</a>
    <a href="#">Instagram</a>
    <a href="#">TikTok</a>
    <a href="#">Shopee</a>
  </div>

  <div class="contact-info">
    <p>Email: your@email.com</p>
    <p>Phone: your contact number</p>
  </div>
</section>

<footer>
  <strong>Canny Industries</strong>
  <p>Modern wellness, crafted with care.</p>
</footer>

<script>
const reveals=document.querySelectorAll('.reveal');
window.addEventListener('scroll',()=>{
  reveals.forEach(r=>{
    if(r.getBoundingClientRect().top < window.innerHeight - 120){
      r.classList.add('active');
    }
  });
});
</script>

</body>
</html>
