Spaces:

abeea
/

D6

Running

App Files Files Community

abeea commited on Apr 4

Commit

fce30e3

verified ·

1 Parent(s): 3cd2b86

Update index.html

Browse files

Files changed (1) hide show

index.html +1062 -19

index.html CHANGED Viewed

@@ -1,19 +1,1062 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AURA — Fine Jewellery</title>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Josefin+Sans:wght@200;300;400&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+  :root {
+    --gold: #C9A84C;
+    --gold-light: #E8CC7A;
+    --gold-pale: #F5E8BF;
+    --gold-dark: #8B6914;
+    --black: #0A0A0A;
+    --black-soft: #111111;
+    --black-mid: #1A1A1A;
+    --black-card: #141414;
+    --white: #FAF7F2;
+    --white-dim: #D4CFC8;
+    --cream: #F0E6D3;
+    --border: rgba(201,168,76,0.25);
+    --border-bright: rgba(201,168,76,0.6);
+  }
+  html { scroll-behavior: smooth; }
+  body {
+    background: var(--black);
+    color: var(--white);
+    font-family: 'Josefin Sans', sans-serif;
+    font-weight: 300;
+    letter-spacing: 0.04em;
+    cursor: none;
+    overflow-x: hidden;
+  }
+  /* Custom cursor */
+  #cursor {
+    position: fixed; width: 10px; height: 10px;
+    background: var(--gold); border-radius: 50%;
+    pointer-events: none; z-index: 9999;
+    transform: translate(-50%, -50%);
+    transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, background 0.3s;
+    mix-blend-mode: screen;
+  }
+  #cursor-ring {
+    position: fixed; width: 38px; height: 38px;
+    border: 1px solid rgba(201,168,76,0.5);
+    border-radius: 50%; pointer-events: none; z-index: 9998;
+    transform: translate(-50%, -50%);
+    transition: all 0.18s ease;
+  }
+  body.hover-active #cursor { width: 16px; height: 16px; background: var(--gold-light); }
+  body.hover-active #cursor-ring { width: 56px; height: 56px; border-color: var(--gold); }
+  /* Noise overlay */
+  body::before {
+    content: '';
+    position: fixed; inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
+    opacity: 0.025; pointer-events: none; z-index: 1000;
+  }
+  /* NAV */
+  nav {
+    position: fixed; top: 0; left: 0; right: 0; z-index: 500;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 28px 60px;
+    border-bottom: 1px solid transparent;
+    transition: all 0.5s ease;
+  }
+  nav.scrolled {
+    background: rgba(10,10,10,0.92);
+    backdrop-filter: blur(20px);
+    border-bottom-color: var(--border);
+    padding: 18px 60px;
+  }
+  .nav-logo {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 28px; font-weight: 300; letter-spacing: 0.3em;
+    color: var(--gold-light);
+    text-transform: uppercase; text-decoration: none;
+  }
+  .nav-logo span { color: var(--white); }
+  .nav-links { display: flex; gap: 48px; list-style: none; }
+  .nav-links a {
+    color: var(--white-dim); text-decoration: none;
+    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
+    transition: color 0.3s;
+    position: relative;
+  }
+  .nav-links a::after {
+    content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
+    height: 1px; background: var(--gold);
+    transform: scaleX(0); transform-origin: right;
+    transition: transform 0.4s ease;
+  }
+  .nav-links a:hover { color: var(--gold-light); }
+  .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
+  .nav-actions { display: flex; align-items: center; gap: 24px; }
+  .nav-icon { color: var(--white-dim); font-size: 18px; text-decoration: none; transition: color 0.3s; cursor: none; }
+  .nav-icon:hover { color: var(--gold); }
+  /* HERO */
+  .hero {
+    min-height: 100vh; display: flex; align-items: center;
+    position: relative; overflow: hidden;
+    padding: 140px 60px 80px;
+  }
+  .hero-bg {
+    position: absolute; inset: 0;
+    background: radial-gradient(ellipse 70% 80% at 70% 50%, rgba(139,105,20,0.12) 0%, transparent 70%),
+                radial-gradient(ellipse 40% 50% at 20% 80%, rgba(201,168,76,0.05) 0%, transparent 60%);
+  }
+  .hero-lines {
+    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
+  }
+  .hero-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+  .hero-content { position: relative; z-index: 2; max-width: 650px; }
+  .hero-badge {
+    display: inline-flex; align-items: center; gap: 12px;
+    margin-bottom: 40px;
+    font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold);
+  }
+  .hero-badge::before, .hero-badge::after {
+    content: ''; display: block; width: 40px; height: 1px; background: var(--gold-dark);
+  }
+  .hero h1 {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: clamp(64px, 8vw, 112px); font-weight: 300;
+    line-height: 1.0; letter-spacing: -0.01em;
+    margin-bottom: 32px; color: var(--white);
+  }
+  .hero h1 em { font-style: italic; color: var(--gold-light); }
+  .hero p {
+    font-size: 13px; letter-spacing: 0.1em; line-height: 2;
+    color: var(--white-dim); max-width: 420px; margin-bottom: 56px;
+  }
+  .hero-cta { display: flex; align-items: center; gap: 32px; }
+  .btn-primary {
+    display: inline-flex; align-items: center; gap: 14px;
+    padding: 18px 48px; border: 1px solid var(--gold);
+    background: transparent; color: var(--gold-light);
+    font-family: 'Josefin Sans', sans-serif;
+    font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
+    text-decoration: none; cursor: none;
+    transition: all 0.4s ease; position: relative; overflow: hidden;
+  }
+  .btn-primary::before {
+    content: ''; position: absolute; inset: 0;
+    background: var(--gold); transform: translateX(-101%);
+    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
+  }
+  .btn-primary:hover::before { transform: translateX(0); }
+  .btn-primary:hover { color: var(--black); }
+  .btn-primary span { position: relative; z-index: 1; }
+  .btn-link {
+    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
+    color: var(--white-dim); text-decoration: none; cursor: none;
+    transition: color 0.3s;
+  }
+  .btn-link:hover { color: var(--gold-light); }
+  .hero-visual {
+    position: absolute; right: -20px; top: 50%;
+    transform: translateY(-50%);
+    width: 45vw; max-width: 700px;
+    opacity: 0.85;
+  }
+  .hero-visual svg { width: 100%; height: auto; }
+  /* MARQUEE */
+  .marquee-section {
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    padding: 20px 0; overflow: hidden; background: var(--black-soft);
+  }
+  .marquee-track {
+    display: flex; width: max-content;
+    animation: marquee 28s linear infinite;
+  }
+  .marquee-item {
+    display: flex; align-items: center; gap: 36px;
+    padding: 0 36px; white-space: nowrap;
+    font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold-dark);
+  }
+  .marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.5; }
+  @keyframes marquee { to { transform: translateX(-50%); } }
+  /* CATEGORIES */
+  .section { padding: 120px 60px; }
+  .section-header { margin-bottom: 72px; }
+  .section-label {
+    font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
+    color: var(--gold); margin-bottom: 16px; display: block;
+  }
+  .section-title {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: clamp(36px, 4vw, 56px); font-weight: 300;
+    line-height: 1.15; color: var(--white);
+  }
+  .section-title em { font-style: italic; color: var(--gold-light); }
+  .categories-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-template-rows: auto auto;
+    gap: 2px;
+  }
+  .cat-card {
+    position: relative; overflow: hidden;
+    cursor: none;
+    background: var(--black-card);
+  }
+  .cat-card:first-child { grid-row: span 2; }
+  .cat-inner {
+    position: relative; height: 100%;
+    min-height: 320px; display: flex; flex-direction: column;
+    justify-content: flex-end; padding: 40px;
+    overflow: hidden;
+  }
+  .cat-card:first-child .cat-inner { min-height: 640px; }
+  .cat-bg {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
+  }
+  .cat-card:hover .cat-bg { transform: scale(1.08); }
+  .cat-bg svg { width: 100%; height: 100%; }
+  .cat-overlay {
+    position: absolute; inset: 0;
+    background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.1) 60%);
+  }
+  .cat-content { position: relative; z-index: 2; }
+  .cat-tag {
+    font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
+    color: var(--gold); margin-bottom: 10px; display: block;
+  }
+  .cat-name {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 32px; font-weight: 300; color: var(--white);
+    margin-bottom: 16px;
+  }
+  .cat-card:first-child .cat-name { font-size: 48px; }
+  .cat-count {
+    font-size: 10px; letter-spacing: 0.2em; color: var(--white-dim);
+    display: flex; align-items: center; gap: 12px;
+  }
+  .cat-count::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold-dark); }
+  /* FEATURED PRODUCTS */
+  .products-grid {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
+  }
+  .product-card {
+    background: var(--black-card); cursor: none;
+    position: relative; overflow: hidden;
+    transition: background 0.3s;
+  }
+  .product-card:hover { background: var(--black-mid); }
+  .product-img {
+    aspect-ratio: 3/4; display: flex; align-items: center;
+    justify-content: center; position: relative; overflow: hidden;
+    background: var(--black-soft);
+  }
+  .product-img svg { width: 70%; height: 70%; transition: transform 0.6s ease; }
+  .product-card:hover .product-img svg { transform: scale(1.08) rotate(2deg); }
+  .product-badge {
+    position: absolute; top: 20px; left: 20px;
+    background: var(--gold); color: var(--black);
+    font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
+    padding: 4px 12px;
+  }
+  .product-info { padding: 28px 28px 32px; }
+  .product-category {
+    font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
+    color: var(--gold-dark); margin-bottom: 8px;
+  }
+  .product-name {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 22px; font-weight: 400; color: var(--white);
+    margin-bottom: 12px; line-height: 1.3;
+  }
+  .product-footer { display: flex; justify-content: space-between; align-items: center; }
+  .product-price { font-size: 13px; color: var(--gold-light); letter-spacing: 0.05em; }
+  .product-add {
+    width: 40px; height: 40px; border: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: center;
+    color: var(--gold); font-size: 20px; cursor: none;
+    transition: all 0.3s; background: transparent;
+  }
+  .product-add:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
+  /* MATERIALS / VALUES */
+  .materials-section {
+    background: var(--black-soft);
+    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+  }
+  .materials-inner {
+    display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px;
+  }
+  .materials-text .section-title { margin-bottom: 28px; }
+  .materials-text p {
+    font-size: 13px; line-height: 2.2; color: var(--white-dim);
+    margin-bottom: 48px; letter-spacing: 0.05em;
+  }
+  .material-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
+  .pill {
+    padding: 8px 22px; border: 1px solid var(--border);
+    font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
+    color: var(--white-dim); transition: all 0.3s; cursor: none;
+  }
+  .pill:hover, .pill.active { border-color: var(--gold); color: var(--gold-light); }
+  .materials-visual { display: flex; justify-content: center; align-items: center; }
+  /* VALUES STRIP */
+  .values-strip {
+    display: grid; grid-template-columns: repeat(4, 1fr);
+    border-top: 1px solid var(--border);
+  }
+  .value-item {
+    padding: 56px 40px;
+    border-right: 1px solid var(--border);
+    text-align: center;
+    transition: background 0.3s;
+    cursor: none;
+  }
+  .value-item:last-child { border-right: none; }
+  .value-item:hover { background: rgba(201,168,76,0.04); }
+  .value-icon { margin-bottom: 20px; }
+  .value-icon svg { width: 36px; height: 36px; }
+  .value-title {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 20px; font-weight: 400; color: var(--gold-light);
+    margin-bottom: 10px;
+  }
+  .value-text { font-size: 11px; color: var(--white-dim); line-height: 1.9; letter-spacing: 0.05em; }
+  /* TESTIMONIAL */
+  .testimonial-section {
+    text-align: center; padding: 120px 60px;
+    background: var(--black-mid);
+    border-top: 1px solid var(--border);
+  }
+  .testimonial-quote {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: clamp(28px, 3.5vw, 48px); font-weight: 300;
+    font-style: italic; line-height: 1.5;
+    color: var(--white); max-width: 820px; margin: 0 auto 40px;
+  }
+  .testimonial-quote em { color: var(--gold-light); font-style: normal; }
+  .testimonial-author { font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold-dark); }
+  .quote-mark {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 120px; color: var(--gold-dark); opacity: 0.3;
+    line-height: 0.8; display: block; margin-bottom: 24px;
+  }
+  /* NEWSLETTER */
+  .newsletter-section {
+    padding: 100px 60px; border-top: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: space-between; gap: 60px;
+  }
+  .newsletter-text .section-title { font-size: 40px; }
+  .newsletter-text p { font-size: 13px; color: var(--white-dim); margin-top: 16px; letter-spacing: 0.05em; line-height: 1.9; }
+  .newsletter-form { display: flex; gap: 0; flex: 0 0 480px; }
+  .newsletter-input {
+    flex: 1; padding: 18px 24px;
+    background: var(--black-mid); border: 1px solid var(--border);
+    border-right: none; color: var(--white);
+    font-family: 'Josefin Sans', sans-serif;
+    font-size: 12px; letter-spacing: 0.1em; outline: none;
+    transition: border-color 0.3s;
+  }
+  .newsletter-input::placeholder { color: var(--white-dim); opacity: 0.5; }
+  .newsletter-input:focus { border-color: var(--gold); }
+  .newsletter-btn {
+    padding: 18px 32px; background: var(--gold);
+    border: 1px solid var(--gold); color: var(--black);
+    font-family: 'Josefin Sans', sans-serif;
+    font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
+    cursor: none; transition: background 0.3s, color 0.3s;
+  }
+  .newsletter-btn:hover { background: var(--gold-light); }
+  /* FOOTER */
+  footer {
+    background: var(--black-soft); border-top: 1px solid var(--border);
+    padding: 80px 60px 40px;
+  }
+  .footer-top {
+    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
+    gap: 60px; margin-bottom: 60px;
+  }
+  .footer-brand { }
+  .footer-logo {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 32px; font-weight: 300; letter-spacing: 0.3em;
+    color: var(--gold-light); display: block; margin-bottom: 20px;
+  }
+  .footer-tagline { font-size: 11px; color: var(--white-dim); line-height: 2; max-width: 260px; }
+  .footer-col h4 {
+    font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
+    color: var(--gold); margin-bottom: 24px;
+  }
+  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
+  .footer-col a {
+    font-size: 12px; color: var(--white-dim); text-decoration: none;
+    letter-spacing: 0.08em; transition: color 0.3s;
+  }
+  .footer-col a:hover { color: var(--gold-light); }
+  .footer-bottom {
+    border-top: 1px solid var(--border); padding-top: 28px;
+    display: flex; justify-content: space-between; align-items: center;
+  }
+  .footer-copy { font-size: 10px; color: var(--gold-dark); letter-spacing: 0.2em; }
+  .footer-socials { display: flex; gap: 24px; }
+  .footer-socials a { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--white-dim); text-decoration: none; transition: color 0.3s; }
+  .footer-socials a:hover { color: var(--gold); }
+  /* ANIMATIONS */
+  .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
+  .reveal.visible { opacity: 1; transform: translateY(0); }
+  .reveal-delay-1 { transition-delay: 0.1s; }
+  .reveal-delay-2 { transition-delay: 0.2s; }
+  .reveal-delay-3 { transition-delay: 0.3s; }
+  /* FLOATING GEMS CANVAS */
+  #gems-canvas {
+    position: fixed; inset: 0; pointer-events: none; z-index: 0;
+    opacity: 0.6;
+  }
+</style>
+</head>
+<body>
+<div id="cursor"></div>
+<div id="cursor-ring"></div>
+<canvas id="gems-canvas"></canvas>
+<!-- NAV -->
+<nav id="navbar">
+  <a href="#" class="nav-logo">AURA<span>.</span></a>
+  <ul class="nav-links">
+    <li><a href="#collections">Collections</a></li>
+    <li><a href="#craftsmanship">Craftsmanship</a></li>
+    <li><a href="#bespoke">Bespoke</a></li>
+    <li><a href="#atelier">Atelier</a></li>
+  </ul>
+  <div class="nav-actions">
+    <a href="#" class="nav-icon" title="Search">⌕</a>
+    <a href="#" class="nav-icon" title="Wishlist">♡</a>
+    <a href="#" class="nav-icon" title="Bag">◻</a>
+  </div>
+</nav>
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-bg"></div>
+  <div class="hero-lines">
+    <svg viewBox="0 0 1400 900" preserveAspectRatio="xMidYMid slice">
+      <defs>
+        <radialGradient id="glow1" cx="50%" cy="50%">
+          <stop offset="0%" stop-color="#C9A84C" stop-opacity="0.15"/>
+          <stop offset="100%" stop-color="#C9A84C" stop-opacity="0"/>
+        </radialGradient>
+      </defs>
+      <circle cx="1050" cy="450" r="320" fill="url(#glow1)"/>
+      <line x1="0" y1="900" x2="1400" y2="0" stroke="#C9A84C" stroke-width="0.3" opacity="0.15"/>
+      <line x1="700" y1="0" x2="700" y2="900" stroke="#C9A84C" stroke-width="0.3" opacity="0.1"/>
+    </svg>
+  </div>
+  <div class="hero-content reveal">
+    <div class="hero-badge">New Collection 2025</div>
+    <h1>Worn<br>by the <em>Bold.</em><br>Made for<br>the Rare.</h1>
+    <p>Handcrafted fine jewellery using ethically sourced gemstones and precious metals. Each piece tells a singular story.</p>
+    <div class="hero-cta">
+      <a href="#collections" class="btn-primary"><span>Explore Collection</span> <span>→</span></a>
+      <a href="#bespoke" class="btn-link">Bespoke Creation</a>
+    </div>
+  </div>
+  <div class="hero-visual">
+    <svg viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <radialGradient id="gemGrad" cx="35%" cy="30%">
+          <stop offset="0%" stop-color="#F5E8BF"/>
+          <stop offset="40%" stop-color="#C9A84C"/>
+          <stop offset="100%" stop-color="#3D2C08"/>
+        </radialGradient>
+        <radialGradient id="gemGrad2" cx="35%" cy="30%">
+          <stop offset="0%" stop-color="#E8F4FF"/>
+          <stop offset="40%" stop-color="#7BAED4"/>
+          <stop offset="100%" stop-color="#1A3A52"/>
+        </radialGradient>
+        <radialGradient id="rubyGrad" cx="35%" cy="30%">
+          <stop offset="0%" stop-color="#FFD4D4"/>
+          <stop offset="40%" stop-color="#C94C4C"/>
+          <stop offset="100%" stop-color="#3D0808"/>
+        </radialGradient>
+        <filter id="glow">
+          <feGaussianBlur stdDeviation="3" result="blur"/>
+          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+      </defs>
+      <!-- Large statement ring -->
+      <ellipse cx="300" cy="360" rx="180" ry="48" fill="none" stroke="#C9A84C" stroke-width="22" opacity="0.9"/>
+      <ellipse cx="300" cy="360" rx="180" ry="48" fill="none" stroke="#F5E8BF" stroke-width="2" opacity="0.5"/>
+      <!-- Ring detail lines -->
+      <ellipse cx="300" cy="360" rx="158" ry="34" fill="none" stroke="#8B6914" stroke-width="1" opacity="0.6"/>
+      <!-- Centre stone -->
+      <polygon points="300,270 340,320 320,360 280,360 260,320" fill="url(#gemGrad)" filter="url(#glow)"/>
+      <polygon points="300,270 340,320 300,290" fill="#F5E8BF" opacity="0.4"/>
+      <polygon points="300,270 260,320 300,290" fill="#E8CC7A" opacity="0.3"/>
+      <line x1="300" y1="270" x2="300" y2="360" stroke="#FAF7F2" stroke-width="0.5" opacity="0.3"/>
+      <!-- Side diamonds -->
+      <polygon points="215,345 230,330 245,345 230,360" fill="url(#gemGrad2)" opacity="0.85"/>
+      <polygon points="215,345 230,330 222,352" fill="white" opacity="0.25"/>
+      <polygon points="355,345 370,330 385,345 370,360" fill="url(#gemGrad2)" opacity="0.85"/>
+      <polygon points="355,345 370,330 362,352" fill="white" opacity="0.25"/>
+      <!-- Small accent gems -->
+      <circle cx="162" cy="358" r="7" fill="url(#rubyGrad)" opacity="0.8"/>
+      <circle cx="438" cy="358" r="7" fill="url(#rubyGrad)" opacity="0.8"/>
+      <!-- Floating small gems -->
+      <polygon points="150,200 160,185 170,200 160,215" fill="url(#gemGrad)" opacity="0.6"/>
+      <polygon points="430,150 440,135 450,150 440,165" fill="url(#gemGrad2)" opacity="0.5"/>
+      <circle cx="100" cy="480" r="9" fill="url(#rubyGrad)" opacity="0.4"/>
+      <polygon points="490,500 500,485 510,500 500,515" fill="url(#gemGrad)" opacity="0.4"/>
+      <circle cx="480" cy="250" r="6" fill="#C9A84C" opacity="0.4"/>
+      <circle cx="130" cy="300" r="5" fill="#C9A84C" opacity="0.3"/>
+      <!-- Decorative arcs -->
+      <path d="M200,180 Q300,120 400,180" fill="none" stroke="#C9A84C" stroke-width="0.8" opacity="0.2"/>
+      <path d="M180,560 Q300,620 420,560" fill="none" stroke="#C9A84C" stroke-width="0.8" opacity="0.2"/>
+      <!-- Gold dust particles -->
+      <circle cx="240" cy="240" r="2" fill="#C9A84C" opacity="0.5"/>
+      <circle cx="370" cy="230" r="1.5" fill="#C9A84C" opacity="0.4"/>
+      <circle cx="185" cy="410" r="1.5" fill="#C9A84C" opacity="0.4"/>
+      <circle cx="415" cy="420" r="2" fill="#C9A84C" opacity="0.5"/>
+      <circle cx="320" cy="480" r="1.5" fill="#E8CC7A" opacity="0.5"/>
+      <circle cx="260" cy="490" r="1" fill="#E8CC7A" opacity="0.4"/>
+    </svg>
+  </div>
+</section>
+<!-- MARQUEE -->
+<div class="marquee-section">
+  <div class="marquee-track">
+    <div class="marquee-item"><span class="marquee-dot"></span> 18 Karat Gold</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> Conflict-Free Diamonds</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> Handcrafted Artisanship</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> GIA Certified Stones</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> Bespoke Commissions</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> Lifetime Guarantee</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> Free Engraving</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> White Glove Delivery</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> 18 Karat Gold</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> Conflict-Free Diamonds</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> Handcrafted Artisanship</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> GIA Certified Stones</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> Bespoke Commissions</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> Lifetime Guarantee</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> Free Engraving</div>
+    <div class="marquee-item"><span class="marquee-dot"></span> White Glove Delivery</div>
+  </div>
+</div>
+<!-- CATEGORIES -->
+<section class="section" id="collections">
+  <div class="section-header reveal">
+    <span class="section-label">Explore</span>
+    <h2 class="section-title">Our <em>Collections</em></h2>
+  </div>
+  <div class="categories-grid">
+    <div class="cat-card reveal">
+      <div class="cat-inner">
+        <div class="cat-bg">
+          <svg viewBox="0 0 500 640" xmlns="http://www.w3.org/2000/svg">
+            <rect width="500" height="640" fill="#0E0D0A"/>
+            <circle cx="250" cy="280" r="200" fill="none" stroke="#C9A84C" stroke-width="0.5" opacity="0.2"/>
+            <circle cx="250" cy="280" r="140" fill="none" stroke="#C9A84C" stroke-width="0.5" opacity="0.15"/>
+            <!-- Necklace pendant -->
+            <path d="M250,120 L250,240" stroke="#C9A84C" stroke-width="3" fill="none"/>
+            <ellipse cx="250" cy="118" rx="60" ry="12" fill="none" stroke="#C9A84C" stroke-width="3"/>
+            <polygon points="250,240 278,290 250,310 222,290" fill="#C9A84C"/>
+            <polygon points="250,240 278,290 250,265" fill="#F5E8BF" opacity="0.5"/>
+            <circle cx="250" cy="310" r="8" fill="#7BAED4"/>
+            <polygon points="250,200 258,215 250,208" fill="#F5E8BF" opacity="0.3"/>
+            <!-- Radial lines -->
+            <g opacity="0.12" stroke="#C9A84C" stroke-width="0.5">
+              <line x1="250" y1="80" x2="250" y2="0"/>
+              <line x1="250" y1="480" x2="250" y2="640"/>
+              <line x1="80" y1="280" x2="0" y2="280"/>
+              <line x1="420" y1="280" x2="500" y2="280"/>
+            </g>
+          </svg>
+        </div>
+        <div class="cat-overlay"></div>
+        <div class="cat-content">
+          <span class="cat-tag">Collection 01</span>
+          <h3 class="cat-name">Necklaces &amp; Pendants</h3>
+          <span class="cat-count">42 pieces</span>
+        </div>
+      </div>
+    </div>
+    <div class="cat-card reveal reveal-delay-1">
+      <div class="cat-inner">
+        <div class="cat-bg">
+          <svg viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg">
+            <rect width="400" height="320" fill="#0C0B08"/>
+            <ellipse cx="200" cy="160" rx="130" ry="38" fill="none" stroke="#C9A84C" stroke-width="18" opacity="0.9"/>
+            <ellipse cx="200" cy="160" rx="130" ry="38" fill="none" stroke="#F5E8BF" stroke-width="1" opacity="0.4"/>
+            <polygon points="200,90 218,122 200,106" fill="#C94C4C" opacity="0.7"/>
+            <polygon points="200,90 182,122 200,106" fill="#FF8080" opacity="0.4"/>
+            <circle cx="90" cy="158" r="7" fill="#7BAED4" opacity="0.8"/>
+            <circle cx="310" cy="158" r="7" fill="#7BAED4" opacity="0.8"/>
+          </svg>
+        </div>
+        <div class="cat-overlay"></div>
+        <div class="cat-content">
+          <span class="cat-tag">Collection 02</span>
+          <h3 class="cat-name">Rings</h3>
+          <span class="cat-count">68 pieces</span>
+        </div>
+      </div>
+    </div>
+    <div class="cat-card reveal reveal-delay-2">
+      <div class="cat-inner">
+        <div class="cat-bg">
+          <svg viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg">
+            <rect width="400" height="320" fill="#0C0B08"/>
+            <!-- Earring pair -->
+            <path d="M150,60 L150,180" stroke="#C9A84C" stroke-width="2.5" fill="none"/>
+            <circle cx="150" cy="55" r="10" fill="none" stroke="#C9A84C" stroke-width="2.5"/>
+            <polygon points="150,180 165,215 150,230 135,215" fill="#C9A84C"/>
+            <circle cx="150" cy="230" r="8" fill="#7BAED4"/>
+            <path d="M250,60 L250,180" stroke="#C9A84C" stroke-width="2.5" fill="none"/>
+            <circle cx="250" cy="55" r="10" fill="none" stroke="#C9A84C" stroke-width="2.5"/>
+            <polygon points="250,180 265,215 250,230 235,215" fill="#C9A84C"/>
+            <circle cx="250" cy="230" r="8" fill="#7BAED4"/>
+          </svg>
+        </div>
+        <div class="cat-overlay"></div>
+        <div class="cat-content">
+          <span class="cat-tag">Collection 03</span>
+          <h3 class="cat-name">Earrings</h3>
+          <span class="cat-count">54 pieces</span>
+        </div>
+      </div>
+    </div>
+    <div class="cat-card reveal reveal-delay-1">
+      <div class="cat-inner">
+        <div class="cat-bg">
+          <svg viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg">
+            <rect width="400" height="320" fill="#0C0B08"/>
+            <!-- Bracelet -->
+            <path d="M100,160 Q200,100 300,160 Q200,220 100,160" fill="none" stroke="#C9A84C" stroke-width="14" opacity="0.9"/>
+            <path d="M100,160 Q200,100 300,160 Q200,220 100,160" fill="none" stroke="#F5E8BF" stroke-width="1" opacity="0.4"/>
+            <circle cx="200" cy="116" r="10" fill="#C94C4C" opacity="0.9"/>
+            <circle cx="148" cy="132" r="7" fill="#7BAED4" opacity="0.8"/>
+            <circle cx="252" cy="132" r="7" fill="#7BAED4" opacity="0.8"/>
+            <circle cx="200" cy="204" r="10" fill="#C9A84C" opacity="0.9"/>
+          </svg>
+        </div>
+        <div class="cat-overlay"></div>
+        <div class="cat-content">
+          <span class="cat-tag">Collection 04</span>
+          <h3 class="cat-name">Bracelets</h3>
+          <span class="cat-count">31 pieces</span>
+        </div>
+      </div>
+    </div>
+    <div class="cat-card reveal reveal-delay-2">
+      <div class="cat-inner">
+        <div class="cat-bg">
+          <svg viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg">
+            <rect width="400" height="320" fill="#0C0B08"/>
+            <!-- Brooch -->
+            <polygon points="200,80 214,126 262,126 224,154 238,200 200,172 162,200 176,154 138,126 186,126" fill="none" stroke="#C9A84C" stroke-width="2" opacity="0.9"/>
+            <polygon points="200,80 214,126 262,126 224,154 238,200 200,172 162,200 176,154 138,126 186,126" fill="#C9A84C" opacity="0.08"/>
+            <circle cx="200" cy="150" r="22" fill="url(#gemGrad)" opacity="0.9"/>
+            <circle cx="200" cy="150" r="14" fill="#F5E8BF" opacity="0.3"/>
+            <!-- Star points glow -->
+            <circle cx="200" cy="82" r="4" fill="#E8CC7A"/>
+            <circle cx="261" cy="127" r="3" fill="#E8CC7A"/>
+            <circle cx="237" cy="199" r="3" fill="#E8CC7A"/>
+            <circle cx="163" cy="199" r="3" fill="#E8CC7A"/>
+            <circle cx="139" cy="127" r="3" fill="#E8CC7A"/>
+          </svg>
+        </div>
+        <div class="cat-overlay"></div>
+        <div class="cat-content">
+          <span class="cat-tag">Collection 05</span>
+          <h3 class="cat-name">Brooches</h3>
+          <span class="cat-count">18 pieces</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- FEATURED PRODUCTS -->
+<section class="section" style="padding-top: 0;">
+  <div class="section-header reveal">
+    <span class="section-label">Featured</span>
+    <h2 class="section-title">Selected <em>Pieces</em></h2>
+  </div>
+  <div class="products-grid">
+    <div class="product-card reveal">
+      <div class="product-img">
+        <div class="product-badge">New</div>
+        <svg viewBox="0 0 300 380" xmlns="http://www.w3.org/2000/svg">
+          <rect width="300" height="380" fill="#0E0D0A"/>
+          <defs>
+            <radialGradient id="d1" cx="35%" cy="30%"><stop offset="0%" stop-color="#FFF9ED"/><stop offset="50%" stop-color="#C9A84C"/><stop offset="100%" stop-color="#3D2C08"/></radialGradient>
+          </defs>
+          <circle cx="150" cy="170" r="110" fill="none" stroke="#C9A84C" stroke-width="18"/>
+          <circle cx="150" cy="170" r="91" fill="none" stroke="#8B6914" stroke-width="0.8" opacity="0.5"/>
+          <polygon points="150,90 165,135 150,118" fill="#FFF9ED" opacity="0.3"/>
+          <polygon points="150,90 135,135 150,118" fill="#E8CC7A" opacity="0.2"/>
+          <circle cx="150" cy="170" r="28" fill="url(#d1)"/>
+          <circle cx="150" cy="170" r="18" fill="#FFF9ED" opacity="0.2"/>
+          <circle cx="82" cy="148" r="8" fill="#7BAED4"/>
+          <circle cx="218" cy="148" r="8" fill="#7BAED4"/>
+          <circle cx="150" cy="82" r="8" fill="#C94C4C"/>
+          <circle cx="82" cy="192" r="6" fill="#C9A84C"/>
+          <circle cx="218" cy="192" r="6" fill="#C9A84C"/>
+        </svg>
+      </div>
+      <div class="product-info">
+        <span class="product-category">Ring</span>
+        <h3 class="product-name">Soleil Diamond Solitaire</h3>
+        <div class="product-footer">
+          <span class="product-price">PKR 485,000</span>
+          <button class="product-add">+</button>
+        </div>
+      </div>
+    </div>
+    <div class="product-card reveal reveal-delay-1">
+      <div class="product-img">
+        <svg viewBox="0 0 300 380" xmlns="http://www.w3.org/2000/svg">
+          <rect width="300" height="380" fill="#0E0D0A"/>
+          <path d="M150,60 L150,220" stroke="#C9A84C" stroke-width="3" fill="none"/>
+          <ellipse cx="150" cy="57" rx="50" ry="10" fill="none" stroke="#C9A84C" stroke-width="3"/>
+          <polygon points="150,220 180,270 150,295 120,270" fill="#C9A84C"/>
+          <polygon points="150,220 180,270 150,248" fill="#FFF9ED" opacity="0.45"/>
+          <circle cx="150" cy="295" r="12" fill="#7BAED4"/>
+          <circle cx="150" cy="295" r="7" fill="#B8D9F0" opacity="0.5"/>
+          <circle cx="120" cy="150" r="5" fill="#C9A84C" opacity="0.5"/>
+          <circle cx="180" cy="150" r="5" fill="#C9A84C" opacity="0.5"/>
+          <circle cx="150" cy="140" r="4" fill="#E8CC7A" opacity="0.4"/>
+        </svg>
+      </div>
+      <div class="product-info">
+        <span class="product-category">Pendant</span>
+        <h3 class="product-name">Lune Sapphire Drop</h3>
+        <div class="product-footer">
+          <span class="product-price">PKR 228,000</span>
+          <button class="product-add">+</button>
+        </div>
+      </div>
+    </div>
+    <div class="product-card reveal reveal-delay-2">
+      <div class="product-img">
+        <div class="product-badge" style="background:var(--black); color:var(--gold); border:1px solid var(--gold);">Limited</div>
+        <svg viewBox="0 0 300 380" xmlns="http://www.w3.org/2000/svg">
+          <rect width="300" height="380" fill="#0E0D0A"/>
+          <path d="M80,190 Q150,130 220,190 Q150,250 80,190" fill="none" stroke="#C9A84C" stroke-width="18"/>
+          <path d="M80,190 Q150,130 220,190 Q150,250 80,190" fill="none" stroke="#F5E8BF" stroke-width="1" opacity="0.3"/>
+          <circle cx="150" cy="148" r="12" fill="#C94C4C"/>
+          <circle cx="150" cy="148" r="6" fill="#FFB0B0" opacity="0.5"/>
+          <circle cx="110" cy="162" r="8" fill="#C9A84C"/>
+          <circle cx="190" cy="162" r="8" fill="#C9A84C"/>
+          <circle cx="110" cy="218" r="8" fill="#C9A84C"/>
+          <circle cx="190" cy="218" r="8" fill="#C9A84C"/>
+          <circle cx="150" cy="232" r="10" fill="#7BAED4"/>
+        </svg>
+      </div>
+      <div class="product-info">
+        <span class="product-category">Bracelet</span>
+        <h3 class="product-name">Celeste Ruby Cuff</h3>
+        <div class="product-footer">
+          <span class="product-price">PKR 372,000</span>
+          <button class="product-add">+</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- CRAFTSMANSHIP -->
+<section class="section materials-section" id="craftsmanship">
+  <div class="materials-inner">
+    <div class="materials-text reveal">
+      <span class="section-label">Our Craft</span>
+      <h2 class="section-title">Forged in <em>Tradition,</em><br>Designed for<br>the Modern Age</h2>
+      <p>Every AURA piece passes through the hands of master craftspeople who carry generations of goldsmithing knowledge. We work only with 18-karat gold, platinum, and GIA-certified stones — because excellence tolerates no compromise.</p>
+      <div class="material-pills">
+        <span class="pill active">18K Gold</span>
+        <span class="pill">Platinum</span>
+        <span class="pill">Rose Gold</span>
+        <span class="pill">White Gold</span>
+        <span class="pill">Diamonds</span>
+        <span class="pill">Sapphires</span>
+        <span class="pill">Rubies</span>
+        <span class="pill">Emeralds</span>
+      </div>
+      <a href="#atelier" class="btn-primary"><span>Visit Our Atelier</span> <span>→</span></a>
+    </div>
+    <div class="materials-visual reveal reveal-delay-2">
+      <svg viewBox="0 0 420 520" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <radialGradient id="sphereGrad" cx="38%" cy="35%">
+            <stop offset="0%" stop-color="#F5E8BF"/>
+            <stop offset="30%" stop-color="#C9A84C"/>
+            <stop offset="70%" stop-color="#8B6914"/>
+            <stop offset="100%" stop-color="#2A1E06"/>
+          </radialGradient>
+        </defs>
+        <!-- Decorative circle frame -->
+        <circle cx="210" cy="260" r="190" fill="none" stroke="#C9A84C" stroke-width="0.5" opacity="0.2" stroke-dasharray="4 8"/>
+        <circle cx="210" cy="260" r="160" fill="none" stroke="#C9A84C" stroke-width="0.5" opacity="0.15"/>
+        <!-- Gold sphere / polished gem -->
+        <circle cx="210" cy="260" r="120" fill="url(#sphereGrad)"/>
+        <ellipse cx="175" cy="215" rx="40" ry="25" fill="white" opacity="0.12" transform="rotate(-20,175,215)"/>
+        <!-- Facet lines -->
+        <line x1="210" y1="140" x2="210" y2="380" stroke="#3D2C08" stroke-width="0.8" opacity="0.5"/>
+        <line x1="90" y1="260" x2="330" y2="260" stroke="#3D2C08" stroke-width="0.8" opacity="0.5"/>
+        <ellipse cx="210" cy="260" rx="120" ry="40" fill="none" stroke="#3D2C08" stroke-width="0.8" opacity="0.4"/>
+        <ellipse cx="210" cy="260" rx="50" ry="120" fill="none" stroke="#3D2C08" stroke-width="0.8" opacity="0.4"/>
+        <!-- Orbiting gems -->
+        <circle cx="210" cy="80" r="12" fill="#7BAED4" opacity="0.9"/>
+        <circle cx="210" cy="80" r="6" fill="white" opacity="0.3"/>
+        <circle cx="380" cy="340" r="9" fill="#C94C4C" opacity="0.9"/>
+        <circle cx="54" cy="180" r="7" fill="#C9A84C" opacity="0.8"/>
+        <circle cx="370" cy="170" r="5" fill="#E8CC7A" opacity="0.7"/>
+        <circle cx="60" cy="360" r="8" fill="#7BAED4" opacity="0.6"/>
+        <!-- Connecting dashes -->
+        <line x1="210" y1="92" x2="210" y2="140" stroke="#C9A84C" stroke-width="0.5" opacity="0.3" stroke-dasharray="3 4"/>
+        <line x1="373" y1="334" x2="330" y2="300" stroke="#C94C4C" stroke-width="0.5" opacity="0.3" stroke-dasharray="3 4"/>
+        <line x1="60" y1="186" x2="92" y2="216" stroke="#C9A84C" stroke-width="0.5" opacity="0.3" stroke-dasharray="3 4"/>
+      </svg>
+    </div>
+  </div>
+</section>
+<!-- VALUES -->
+<div class="values-strip">
+  <div class="value-item reveal">
+    <div class="value-icon">
+      <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="18" cy="18" r="14" stroke="#C9A84C" stroke-width="1"/>
+        <polygon points="18,8 21,15 29,15 23,20 25,28 18,23 11,28 13,20 7,15 15,15" fill="#C9A84C" opacity="0.85"/>
+      </svg>
+    </div>
+    <h4 class="value-title">Certified Stones</h4>
+    <p class="value-text">Every gemstone comes with GIA or IGI certification, ensuring authenticity and grade.</p>
+  </div>
+  <div class="value-item reveal reveal-delay-1">
+    <div class="value-icon">
+      <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M18 4 L20 12 L28 12 L22 17 L24 25 L18 20 L12 25 L14 17 L8 12 L16 12 Z" stroke="#C9A84C" stroke-width="1" fill="none"/>
+        <circle cx="18" cy="18" r="5" stroke="#C9A84C" stroke-width="0.8"/>
+      </svg>
+    </div>
+    <h4 class="value-title">Ethically Sourced</h4>
+    <p class="value-text">We partner only with Kimberley Process certified suppliers and fair-trade mines.</p>
+  </div>
+  <div class="value-item reveal reveal-delay-2">
+    <div class="value-icon">
+      <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="8" y="10" width="20" height="16" rx="2" stroke="#C9A84C" stroke-width="1"/>
+        <path d="M12 10 V8 Q18 4 24 8 V10" stroke="#C9A84C" stroke-width="1" fill="none"/>
+        <circle cx="18" cy="18" r="3" fill="#C9A84C" opacity="0.6"/>
+      </svg>
+    </div>
+    <h4 class="value-title">Free Engraving</h4>
+    <p class="value-text">Personalise any piece with a name, date, or message — included at no extra cost.</p>
+  </div>
+  <div class="value-item reveal reveal-delay-3">
+    <div class="value-icon">
+      <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10 28 L10 16 L18 8 L26 16 L26 28" stroke="#C9A84C" stroke-width="1" fill="none"/>
+        <rect x="15" y="20" width="6" height="8" stroke="#C9A84C" stroke-width="0.8" fill="none"/>
+        <circle cx="18" cy="14" r="2" fill="#C9A84C" opacity="0.6"/>
+      </svg>
+    </div>
+    <h4 class="value-title">Lifetime Warranty</h4>
+    <p class="value-text">Every AURA piece is backed by a lifetime structural warranty and free annual cleaning.</p>
+  </div>
+</div>
+<!-- TESTIMONIAL -->
+<section class="testimonial-section reveal">
+  <span class="quote-mark">"</span>
+  <p class="testimonial-quote">The ring was <em>more beautiful</em> in person than I could have imagined. The craftsmanship is extraordinary — every tiny detail speaks of genuine care and mastery.</p>
+  <p class="testimonial-author">— Nadia H., Lahore &nbsp;·&nbsp; Soleil Diamond Solitaire</p>
+</section>
+<!-- NEWSLETTER -->
+<section class="newsletter-section reveal">
+  <div class="newsletter-text">
+    <span class="section-label">Stay in the loop</span>
+    <h2 class="section-title">First to know. <em>Always.</em></h2>
+    <p>Join our inner circle for early access to new collections, exclusive events, and private previews.</p>
+  </div>
+  <div>
+    <div class="newsletter-form">
+      <input class="newsletter-input" type="email" placeholder="Your email address">
+      <button class="newsletter-btn">Subscribe</button>
+    </div>
+  </div>
+</section>
+<!-- FOOTER -->
+<footer>
+  <div class="footer-top">
+    <div class="footer-brand">
+      <span class="footer-logo">AURA.</span>
+      <p class="footer-tagline">Fine jewellery crafted with intention. Worn by those who understand that beauty is never accidental.</p>
+    </div>
+    <div class="footer-col">
+      <h4>Collections</h4>
+      <ul>
+        <li><a href="#">Necklaces</a></li>
+        <li><a href="#">Rings</a></li>
+        <li><a href="#">Earrings</a></li>
+        <li><a href="#">Bracelets</a></li>
+        <li><a href="#">Brooches</a></li>
+      </ul>
+    </div>
+    <div class="footer-col">
+      <h4>Services</h4>
+      <ul>
+        <li><a href="#">Bespoke Design</a></li>
+        <li><a href="#">Ring Sizing</a></li>
+        <li><a href="#">Engraving</a></li>
+        <li><a href="#">Repairs</a></li>
+        <li><a href="#">Appraisals</a></li>
+      </ul>
+    </div>
+    <div class="footer-col">
+      <h4>Company</h4>
+      <ul>
+        <li><a href="#">Our Story</a></li>
+        <li><a href="#">Atelier</a></li>
+        <li><a href="#">Sustainability</a></li>
+        <li><a href="#">Careers</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="footer-bottom">
+    <span class="footer-copy">© 2025 AURA Fine Jewellery. All rights reserved.</span>
+    <div class="footer-socials">
+      <a href="#">Instagram</a>
+      <a href="#">Pinterest</a>
+      <a href="#">Facebook</a>
+    </div>
+  </div>
+</footer>
+<script>
+// Custom cursor
+const cursor = document.getElementById('cursor');
+const ring = document.getElementById('cursor-ring');
+let mx = 0, my = 0, rx = 0, ry = 0;
+document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });
+function animateCursor() {
+  rx += (mx - rx) * 0.15;
+  ry += (my - ry) * 0.15;
+  cursor.style.left = mx + 'px'; cursor.style.top = my + 'px';
+  ring.style.left = rx + 'px'; ring.style.top = ry + 'px';
+  requestAnimationFrame(animateCursor);
+}
+animateCursor();
+document.querySelectorAll('a, button, .cat-card, .product-card, .value-item, .pill').forEach(el => {
+  el.addEventListener('mouseenter', () => document.body.classList.add('hover-active'));
+  el.addEventListener('mouseleave', () => document.body.classList.remove('hover-active'));
+});
+// Sticky nav
+const navbar = document.getElementById('navbar');
+window.addEventListener('scroll', () => {
+  navbar.classList.toggle('scrolled', window.scrollY > 60);
+});
+// Scroll reveal
+const reveals = document.querySelectorAll('.reveal');
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } });
+}, { threshold: 0.12 });
+reveals.forEach(el => observer.observe(el));
+// Material pills
+document.querySelectorAll('.pill').forEach(p => {
+  p.addEventListener('click', () => {
+    document.querySelectorAll('.pill').forEach(x => x.classList.remove('active'));
+    p.classList.add('active');
+  });
+});
+// Floating gems canvas
+const canvas = document.getElementById('gems-canvas');
+const ctx = canvas.getContext('2d');
+let W, H, gems;
+function resize() {
+  W = canvas.width = window.innerWidth;
+  H = canvas.height = window.innerHeight;
+}
+function makeGem() {
+  const types = ['diamond','circle','hex'];
+  return {
+    x: Math.random() * W, y: Math.random() * H,
+    size: Math.random() * 5 + 2,
+    type: types[Math.floor(Math.random() * types.length)],
+    alpha: Math.random() * 0.3 + 0.05,
+    speed: Math.random() * 0.3 + 0.1,
+    drift: (Math.random() - 0.5) * 0.2,
+    color: Math.random() > 0.5 ? '#C9A84C' : (Math.random() > 0.5 ? '#7BAED4' : '#C94C4C')
+  };
+}
+function initGems() { gems = Array.from({length: 55}, makeGem); }
+function drawGem(g) {
+  ctx.save(); ctx.globalAlpha = g.alpha;
+  ctx.strokeStyle = g.color; ctx.fillStyle = g.color; ctx.lineWidth = 0.8;
+  if (g.type === 'diamond') {
+    ctx.beginPath();
+    ctx.moveTo(g.x, g.y - g.size);
+    ctx.lineTo(g.x + g.size * 0.7, g.y);
+    ctx.lineTo(g.x, g.y + g.size);
+    ctx.lineTo(g.x - g.size * 0.7, g.y);
+    ctx.closePath(); ctx.stroke();
+  } else if (g.type === 'circle') {
+    ctx.beginPath(); ctx.arc(g.x, g.y, g.size * 0.8, 0, Math.PI * 2);
+    ctx.stroke();
+  } else {
+    ctx.beginPath();
+    for (let i = 0; i < 6; i++) {
+      const angle = (Math.PI / 3) * i - Math.PI / 6;
+      const px = g.x + g.size * Math.cos(angle);
+      const py = g.y + g.size * Math.sin(angle);
+      i === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py);
+    }
+    ctx.closePath(); ctx.stroke();
+  }
+  ctx.restore();
+}
+function animate() {
+  ctx.clearRect(0, 0, W, H);
+  gems.forEach(g => {
+    g.y -= g.speed; g.x += g.drift;
+    if (g.y < -20) { g.y = H + 20; g.x = Math.random() * W; }
+    drawGem(g);
+  });
+  requestAnimationFrame(animate);
+}
+resize(); initGems(); animate();
+window.addEventListener('resize', () => { resize(); initGems(); });
+</script>
+</body>
+</html>