<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Droplet — Specialty Coffee Tools</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --ivory: #F7F4EF;
    --cream: #EDE8DF;
    --sand: #C9BBA8;
    --espresso: #1A1410;
    --bark: #4A3728;
    --mist: #8E8278;
    --white: #FFFFFF;
    --accent: #2C1810;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'DM Sans', system-ui, sans-serif;
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--ivory);
    color: var(--espresso);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* Grain overlay */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.4;
  }

  /* ── NAV ── */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 48px;
    transition: background 0.4s, padding 0.4s;
  }
  nav.scrolled {
    background: rgba(247,244,239,0.95);
    backdrop-filter: blur(12px);
    padding: 16px 48px;
    border-bottom: 1px solid rgba(201,187,168,0.4);
  }
  .nav-logo {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--espresso);
    text-decoration: none;
    text-transform: uppercase;
  }
  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }
  .nav-links a {
    text-decoration: none;
    color: var(--espresso);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
    opacity: 0.75;
    transition: opacity 0.2s;
  }
  .nav-links a:hover { opacity: 1; }
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .nav-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--espresso);
    font-size: 18px;
    padding: 4px;
    transition: opacity 0.2s;
  }
  .nav-icon:hover { opacity: 0.6; }
  .cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--espresso);
    color: var(--ivory);
    border-radius: 50%;
    font-size: 10px;
    margin-left: -6px;
    margin-top: -12px;
  }
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }
  .hamburger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--espresso);
    transition: all 0.3s;
  }

  /* ── HERO ── */
  .hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 80px;
    position: relative;
    overflow: hidden;
  }
  .hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 64px 80px 80px;
  }
  .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 28px;
    font-weight: 400;
    opacity: 0;
    animation: fadeUp 0.8s 0.2s forwards;
  }
  .hero-title {
    font-family: var(--serif);
    font-size: clamp(52px, 6vw, 88px);
    font-weight: 300;
    line-height: 1.08;
    color: var(--espresso);
    margin-bottom: 32px;
    opacity: 0;
    animation: fadeUp 0.9s 0.35s forwards;
  }
  .hero-title em {
    font-style: italic;
    color: var(--bark);
  }
  .hero-sub {
    font-size: 15px;
    color: var(--mist);
    line-height: 1.75;
    max-width: 380px;
    margin-bottom: 48px;
    font-weight: 300;
    opacity: 0;
    animation: fadeUp 0.9s 0.5s forwards;
  }
  .hero-ctas {
    display: flex;
    gap: 16px;
    align-items: center;
    opacity: 0;
    animation: fadeUp 0.9s 0.65s forwards;
  }
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--espresso);
    color: var(--ivory);
    padding: 15px 32px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--sans);
    transition: background 0.25s, transform 0.2s;
    cursor: pointer;
    border: none;
  }
  .btn-primary:hover { background: var(--bark); transform: translateY(-1px); }
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--espresso);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--sand);
    transition: border-color 0.2s;
  }
  .btn-ghost:hover { border-color: var(--espresso); }

  .hero-right {
    position: relative;
    background: var(--cream);
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 1.2s 0.3s forwards;
  }
  .hero-img-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .hero-product-visual {
    width: 65%;
    aspect-ratio: 1;
    position: relative;
  }
  .hero-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(74,55,40,0.15);
  }
  .hero-ring-1 { inset: -10%; }
  .hero-ring-2 { inset: -28%; opacity: 0.6; }
  .hero-ring-3 { inset: -48%; opacity: 0.3; }
  .hero-kettle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--mist);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeIn 1s 1.2s forwards;
  }
  .scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--sand), transparent);
    animation: scrollPulse 2s infinite;
  }
  .hero-badge {
    position: absolute;
    top: 48px;
    right: 48px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid var(--sand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    animation: rotateBadge 18s linear infinite;
  }
  .hero-badge-text {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bark);
    line-height: 1.6;
  }

  /* ── MARQUEE ── */
  .marquee-strip {
    background: var(--espresso);
    color: var(--cream);
    overflow: hidden;
    padding: 14px 0;
    white-space: nowrap;
  }
  .marquee-inner {
    display: inline-flex;
    animation: marquee 28s linear infinite;
    gap: 0;
  }
  .marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding: 0 28px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 300;
  }
  .marquee-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sand);
    flex-shrink: 0;
  }

  /* ── SECTIONS ── */
  section { padding: 100px 80px; }

  .section-label {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 16px;
    display: block;
  }
  .section-title {
    font-family: var(--serif);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 300;
    line-height: 1.12;
    color: var(--espresso);
  }
  .section-title em { font-style: italic; color: var(--bark); }

  /* ── CATEGORIES ── */
  .categories { background: var(--white); }
  .categories-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 56px;
  }
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }
  .cat-card {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--cream);
    overflow: hidden;
    cursor: pointer;
    group: true;
  }
  .cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,20,16,0.6) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
  }
  .cat-card:hover::after { opacity: 1; }
  .cat-visual {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .cat-card:hover .cat-visual { transform: scale(1.04); }
  .cat-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 24px;
    z-index: 1;
    transform: translateY(8px);
    transition: transform 0.4s;
  }
  .cat-card:hover .cat-info { transform: translateY(0); }
  .cat-name {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 300;
    color: var(--white);
    display: block;
    margin-bottom: 4px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s 0.05s, transform 0.4s 0.05s;
  }
  .cat-count {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    opacity: 0;
    transition: opacity 0.4s 0.1s;
  }
  .cat-card:hover .cat-name,
  .cat-card:hover .cat-count { opacity: 1; transform: translateY(0); }
  .cat-label-static {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 300;
    color: var(--espresso);
    transition: opacity 0.3s;
  }
  .cat-card:hover .cat-label-static { opacity: 0; }

  /* ── FEATURED PRODUCTS ── */
  .products { background: var(--ivory); }
  .products-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 56px;
  }
  .product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .product-card {
    cursor: pointer;
    group: true;
  }
  .product-img {
    aspect-ratio: 4/5;
    background: var(--cream);
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
  }
  .product-img::before {
    content: 'NEW';
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--espresso);
    color: var(--ivory);
    font-size: 9px;
    letter-spacing: 0.18em;
    padding: 4px 10px;
    z-index: 1;
  }
  .product-card:nth-child(2) .product-img::before { content: 'BESTSELLER'; }
  .product-card:nth-child(3) .product-img::before { content: ''; background: none; }
  .product-visual {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .product-card:hover .product-visual { transform: scale(1.04); }
  .product-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    display: flex;
    gap: 8px;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
    background: linear-gradient(to top, rgba(26,20,16,0.85) 0%, transparent 100%);
  }
  .product-card:hover .product-actions { transform: translateY(0); }
  .btn-atc {
    flex: 1;
    background: var(--ivory);
    color: var(--espresso);
    border: none;
    padding: 12px 16px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-atc:hover { background: var(--white); }
  .btn-wish {
    width: 44px;
    background: rgba(247,244,239,0.15);
    border: 1px solid rgba(247,244,239,0.3);
    color: var(--ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
  }
  .btn-wish:hover { background: rgba(247,244,239,0.25); }
  .product-name {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 4px;
    color: var(--espresso);
  }
  .product-brand {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 10px;
  }
  .product-price {
    font-size: 15px;
    color: var(--espresso);
    font-weight: 400;
  }
  .product-price .currency { font-size: 12px; color: var(--mist); margin-right: 3px; }

  /* ── BRAND STORY ── */
  .story {
    background: var(--espresso);
    color: var(--cream);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 100px 80px;
  }
  .story-label { color: var(--sand); }
  .story-title {
    font-family: var(--serif);
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 300;
    color: var(--cream);
    line-height: 1.1;
    margin-bottom: 28px;
  }
  .story-title em { font-style: italic; color: var(--sand); }
  .story-body {
    color: rgba(237,232,223,0.7);
    line-height: 1.85;
    font-weight: 300;
    font-size: 15px;
    margin-bottom: 40px;
  }
  .story-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid rgba(201,187,168,0.2);
  }
  .stat-num {
    font-family: var(--serif);
    font-size: 38px;
    font-weight: 300;
    color: var(--cream);
    display: block;
    line-height: 1;
    margin-bottom: 6px;
  }
  .stat-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sand);
  }
  .story-visual {
    position: relative;
    aspect-ratio: 4/5;
    background: rgba(255,255,255,0.05);
    overflow: hidden;
  }
  .story-visual-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .story-deco {
    position: absolute;
    top: -24px;
    right: -24px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(201,187,168,0.25);
    border-radius: 50%;
  }

  /* ── BEST SELLERS ── */
  .bestsellers { background: var(--cream); padding: 100px 80px; }
  .bestsellers-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 56px;
  }
  .bestsellers-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    height: 680px;
  }
  .bs-card {
    background: var(--ivory);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bs-card:first-child { grid-row: span 2; }
  .bs-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(to top, rgba(26,20,16,0.5) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.35s;
  }
  .bs-card:hover .bs-info { opacity: 1; }
  .bs-name {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--white);
    font-weight: 300;
    display: block;
    margin-bottom: 4px;
  }
  .bs-price { color: rgba(255,255,255,0.7); font-size: 13px; }

  /* ── INSTAGRAM ── */
  .instagram { background: var(--white); text-align: center; padding: 80px; }
  .ig-header { margin-bottom: 40px; }
  .ig-handle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mist);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-decoration: none;
    margin-top: 12px;
    transition: color 0.2s;
  }
  .ig-handle:hover { color: var(--espresso); }
  .ig-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    margin-bottom: 40px;
  }
  .ig-post {
    aspect-ratio: 1;
    background: var(--cream);
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }
  .ig-post::after {
    content: '♡';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26,20,16,0.4);
    color: var(--white);
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .ig-post:hover::after { opacity: 1; }
  .ig-post-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── NEWSLETTER ── */
  .newsletter {
    background: var(--ivory);
    text-align: center;
    padding: 100px 80px;
    border-top: 1px solid var(--cream);
  }
  .newsletter-title {
    font-family: var(--serif);
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 300;
    color: var(--espresso);
    margin-bottom: 16px;
  }
  .newsletter-sub {
    color: var(--mist);
    font-weight: 300;
    font-size: 15px;
    margin-bottom: 40px;
  }
  .newsletter-form {
    display: flex;
    gap: 0;
    max-width: 440px;
    margin: 0 auto;
  }
  .newsletter-input {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid var(--sand);
    border-right: none;
    background: var(--white);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--espresso);
    outline: none;
    transition: border-color 0.2s;
  }
  .newsletter-input:focus { border-color: var(--bark); }
  .newsletter-input::placeholder { color: var(--mist); }

  /* ── FOOTER ── */
  footer {
    background: var(--espresso);
    color: var(--cream);
    padding: 80px 80px 40px;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(201,187,168,0.15);
  }
  .footer-brand-name {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--cream);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
  }
  .footer-tagline {
    font-size: 13px;
    color: rgba(237,232,223,0.5);
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 28px;
    max-width: 240px;
  }
  .social-links {
    display: flex;
    gap: 14px;
  }
  .social-link {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(201,187,168,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sand);
    text-decoration: none;
    font-size: 14px;
    transition: border-color 0.2s, color 0.2s;
  }
  .social-link:hover { border-color: var(--sand); color: var(--cream); }
  .footer-col-title {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sand);
    margin-bottom: 20px;
    display: block;
  }
  .footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .footer-links a {
    text-decoration: none;
    color: rgba(237,232,223,0.55);
    font-size: 13px;
    font-weight: 300;
    transition: color 0.2s;
  }
  .footer-links a:hover { color: var(--cream); }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(237,232,223,0.3);
    letter-spacing: 0.08em;
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @keyframes scrollPulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.4; transform: scaleY(0.7); }
  }
  @keyframes rotateBadge {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .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; }

  /* ── MOBILE MENU ── */
  .mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--ivory);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-menu a {
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 300;
    color: var(--espresso);
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: color 0.2s;
  }
  .mobile-menu a:hover { color: var(--bark); }
  .mobile-close {
    position: absolute;
    top: 28px;
    right: 28px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--espresso);
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 1024px) {
    section { padding: 80px 40px; }
    nav { padding: 20px 40px; }
    nav.scrolled { padding: 14px 40px; }
    .hero { grid-template-columns: 1fr; }
    .hero-left { padding: 120px 40px 60px; }
    .hero-right { min-height: 50vh; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .story { grid-template-columns: 1fr; padding: 80px 40px; gap: 48px; }
    .story-visual { display: none; }
    .bestsellers-grid { grid-template-columns: 1fr 1fr; height: auto; grid-template-rows: auto; }
    .bs-card:first-child { grid-row: span 1; aspect-ratio: 1; }
    .bs-card { aspect-ratio: 1; }
    .ig-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .bestsellers { padding: 80px 40px; }
    .instagram { padding: 60px 40px; }
    .newsletter { padding: 80px 40px; }
    footer { padding: 60px 40px 32px; }
  }
  @media (max-width: 768px) {
    nav { padding: 18px 24px; }
    nav.scrolled { padding: 14px 24px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    section { padding: 64px 24px; }
    .hero-left { padding: 100px 24px 48px; }
    .categories-header, .products-header, .bestsellers-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: 1fr; }
    .product-card:nth-child(3) { display: none; }
    .story-stats { grid-template-columns: repeat(3, 1fr); }
    .bestsellers-grid { grid-template-columns: 1fr; height: auto; }
    .bs-card:first-child { grid-row: span 1; }
    .ig-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .bestsellers { padding: 64px 24px; }
    .instagram { padding: 64px 24px; }
    .newsletter { padding: 64px 24px; }
    footer { padding: 60px 24px 28px; }
    .newsletter-form { flex-direction: column; }
    .newsletter-input { border-right: 1px solid var(--sand); border-bottom: none; }
    .hero-ctas { flex-direction: column; align-items: flex-start; }
    .story { padding: 64px 24px; }
  }
</style>
</head>
<body>

<!-- NAV -->
<nav id="navbar">
  <a href="#" class="nav-logo">Droplet</a>
  <ul class="nav-links">
    <li><a href="#shop">Shop</a></li>
    <li><a href="#collections">Collections</a></li>
    <li><a href="#story">Our Story</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <div class="nav-actions">
    <button class="nav-icon" title="Search">&#9901;</button>
    <button class="nav-icon" title="Cart" style="position:relative">
      &#9752;<span class="cart-count">2</span>
    </button>
    <button class="hamburger" id="menuBtn" title="Menu" aria-label="Menu">
      <span></span><span></span><span></span>
    </button>
  </div>
</nav>

<!-- MOBILE MENU -->
<div class="mobile-menu" id="mobileMenu">
  <button class="mobile-close" id="menuClose">✕</button>
  <a href="#" onclick="closeMenu()">Shop</a>
  <a href="#collections" onclick="closeMenu()">Collections</a>
  <a href="#story" onclick="closeMenu()">Our Story</a>
  <a href="#contact" onclick="closeMenu()">Contact</a>
</div>

<!-- HERO -->
<section class="hero" id="home">
  <div class="hero-left">
    <span class="hero-eyebrow">Specialty Coffee Tools — Oman</span>
    <h1 class="hero-title">
      Brew with<br><em>intention.</em><br>Live with taste.
    </h1>
    <p class="hero-sub">
      Curated tools for the discerning brewer. From gooseneck kettles to precision grinders — every piece designed to elevate your ritual.
    </p>
    <div class="hero-ctas">
      <a href="#shop" class="btn-primary">Shop Collection &#8594;</a>
      <a href="#story" class="btn-ghost">Our Story</a>
    </div>
  </div>
  <div class="hero-right">
    <div class="hero-img-container">
      <div class="hero-product-visual">
        <div class="hero-ring hero-ring-1"></div>
        <div class="hero-ring hero-ring-2"></div>
        <div class="hero-ring hero-ring-3"></div>
        <div class="hero-kettle">
          <!-- SVG Kettle Illustration -->
          <svg width="220" height="280" viewBox="0 0 220 280" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- Kettle body -->
            <ellipse cx="110" cy="240" rx="62" ry="10" fill="rgba(74,55,40,0.15)"/>
            <path d="M60 120 Q55 180 58 220 Q70 240 110 242 Q150 240 162 220 Q165 180 160 120 Z" fill="#2C1810"/>
            <!-- Kettle highlight -->
            <path d="M72 130 Q68 175 70 210 Q78 228 110 230" stroke="rgba(237,232,223,0.12)" stroke-width="2" fill="none"/>
            <!-- Gooseneck spout -->
            <path d="M60 140 Q30 135 22 110 Q15 88 35 75 Q55 62 65 80 Q58 100 68 115" stroke="#2C1810" stroke-width="14" stroke-linecap="round" fill="none"/>
            <path d="M60 140 Q30 135 22 110 Q15 88 35 75 Q55 62 65 80 Q58 100 68 115" stroke="rgba(74,55,40,0.6)" stroke-width="2" fill="none"/>
            <!-- Spout tip -->
            <ellipse cx="34" cy="74" rx="5" ry="3" transform="rotate(-30 34 74)" fill="#1A1410"/>
            <!-- Handle -->
            <path d="M162 150 Q195 148 196 170 Q197 192 162 190" stroke="#2C1810" stroke-width="13" stroke-linecap="round" fill="none"/>
            <path d="M162 150 Q195 148 196 170 Q197 192 162 190" stroke="rgba(74,55,40,0.5)" stroke-width="2" fill="none"/>
            <!-- Lid -->
            <ellipse cx="110" cy="122" rx="52" ry="8" fill="#1A1410"/>
            <ellipse cx="110" cy="120" rx="50" ry="7" fill="#2C1810"/>
            <!-- Lid knob -->
            <rect x="103" y="106" width="14" height="16" rx="5" fill="#1A1410"/>
            <ellipse cx="110" cy="106" rx="9" ry="4" fill="#2C1810"/>
            <!-- Lid highlight -->
            <path d="M72 122 Q85 116 110 116" stroke="rgba(237,232,223,0.1)" stroke-width="1.5" fill="none"/>
            <!-- Drop detail -->
            <path d="M110 68 Q108 58 110 52 Q112 58 110 68Z" fill="rgba(201,187,168,0.6)"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="hero-badge">
      <span class="hero-badge-text" style="font-size:8px; letter-spacing:0.15em; color:var(--bark);">
        SPECIALTY<br>· COFFEE ·<br>OMAN
      </span>
    </div>
    <div class="hero-scroll">
      <div class="scroll-line"></div>
      <span>Scroll</span>
    </div>
  </div>
</section>

<!-- MARQUEE -->
<div class="marquee-strip">
  <div class="marquee-inner">
    <div class="marquee-item"><span>Gooseneck Kettles</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Pour Over Drippers</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Precision Grinders</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Brewing Accessories</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Fellow Studio</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Hario V60</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Timemore</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Free Delivery · Muscat</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Gooseneck Kettles</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Pour Over Drippers</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Precision Grinders</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Brewing Accessories</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Fellow Studio</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Hario V60</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Timemore</span><div class="marquee-dot"></div></div>
    <div class="marquee-item"><span>Free Delivery · Muscat</span><div class="marquee-dot"></div></div>
  </div>
</div>

<!-- CATEGORIES -->
<section class="categories" id="collections">
  <div class="categories-header">
    <div>
      <span class="section-label">Browse By</span>
      <h2 class="section-title">Shop by <em>category</em></h2>
    </div>
    <a href="#" class="btn-ghost">View All &#8594;</a>
  </div>
  <div class="cat-grid reveal">
    <!-- Kettles -->
    <div class="cat-card" style="background:#E8E0D4;">
      <div class="cat-visual">
        <svg width="160" height="200" viewBox="0 0 160 200" fill="none">
          <path d="M40 80 Q36 130 38 158 Q48 172 80 174 Q112 172 122 158 Q124 130 120 80 Z" fill="#2C1810" opacity="0.85"/>
          <path d="M40 100 Q18 96 14 76 Q10 58 26 48 Q42 38 48 54 Q42 70 48 82" stroke="#2C1810" stroke-width="10" stroke-linecap="round" fill="none" opacity="0.85"/>
          <path d="M122 108 Q146 106 147 122 Q148 138 122 136" stroke="#2C1810" stroke-width="10" stroke-linecap="round" fill="none" opacity="0.85"/>
          <ellipse cx="80" cy="82" rx="40" ry="6" fill="#1A1410" opacity="0.85"/>
          <rect x="74" y="70" width="12" height="14" rx="4" fill="#1A1410" opacity="0.85"/>
        </svg>
      </div>
      <span class="cat-label-static">Kettles</span>
      <div class="cat-info">
        <span class="cat-name">Kettles</span>
        <span class="cat-count">12 products</span>
      </div>
    </div>
    <!-- Grinders -->
    <div class="cat-card" style="background:#D4CFC8;">
      <div class="cat-visual">
        <svg width="140" height="200" viewBox="0 0 140 200" fill="none">
          <rect x="35" y="60" width="70" height="110" rx="8" fill="#2C1810" opacity="0.85"/>
          <rect x="42" y="68" width="56" height="70" rx="4" fill="#1A1410" opacity="0.7"/>
          <ellipse cx="70" cy="56" rx="32" ry="14" fill="#2C1810" opacity="0.85"/>
          <ellipse cx="70" cy="50" rx="26" ry="10" fill="#3A2518" opacity="0.8"/>
          <line x1="70" y1="20" x2="70" y2="44" stroke="#2C1810" stroke-width="8" stroke-linecap="round" opacity="0.85"/>
          <ellipse cx="70" cy="18" rx="10" ry="6" fill="#2C1810" opacity="0.85"/>
          <rect x="50" y="170" width="40" height="12" rx="3" fill="#1A1410" opacity="0.8"/>
        </svg>
      </div>
      <span class="cat-label-static">Grinders</span>
      <div class="cat-info">
        <span class="cat-name">Grinders</span>
        <span class="cat-count">8 products</span>
      </div>
    </div>
    <!-- Drippers -->
    <div class="cat-card" style="background:#E4DDD3;">
      <div class="cat-visual">
        <svg width="150" height="200" viewBox="0 0 150 200" fill="none">
          <path d="M35 50 L45 150 Q50 165 75 165 Q100 165 105 150 L115 50 Z" fill="#2C1810" opacity="0.85"/>
          <path d="M42 58 L50 148" stroke="rgba(237,232,223,0.1)" stroke-width="1.5" fill="none"/>
          <ellipse cx="75" cy="50" rx="40" ry="8" fill="#1A1410" opacity="0.85"/>
          <path d="M65 165 L55 185 Q65 192 75 192 Q85 192 95 185 L85 165 Z" fill="#3A2518" opacity="0.7"/>
          <!-- ribs -->
          <line x1="75" y1="58" x2="68" y2="148" stroke="rgba(237,232,223,0.08)" stroke-width="1"/>
          <line x1="75" y1="58" x2="75" y2="148" stroke="rgba(237,232,223,0.08)" stroke-width="1"/>
          <line x1="75" y1="58" x2="82" y2="148" stroke="rgba(237,232,223,0.08)" stroke-width="1"/>
        </svg>
      </div>
      <span class="cat-label-static">Drippers</span>
      <div class="cat-info">
        <span class="cat-name">Drippers</span>
        <span class="cat-count">10 products</span>
      </div>
    </div>
    <!-- Accessories -->
    <div class="cat-card" style="background:#DDD6CC;">
      <div class="cat-visual">
        <svg width="160" height="200" viewBox="0 0 160 200" fill="none">
          <!-- Scale -->
          <rect x="25" y="120" width="110" height="52" rx="6" fill="#2C1810" opacity="0.85"/>
          <rect x="32" y="128" width="60" height="28" rx="3" fill="#1A1410" opacity="0.7"/>
          <rect x="98" y="132" width="28" height="8" rx="2" fill="#3A2518" opacity="0.7"/>
          <rect x="98" y="144" width="18" height="8" rx="2" fill="#3A2518" opacity="0.5"/>
          <!-- Coffee cup -->
          <path d="M55 60 Q52 100 55 105 Q65 115 80 115 Q95 115 105 105 Q108 100 105 60 Z" fill="#2C1810" opacity="0.8"/>
          <path d="M105 75 Q118 73 118 85 Q118 97 105 95" stroke="#2C1810" stroke-width="8" stroke-linecap="round" fill="none" opacity="0.8"/>
          <ellipse cx="80" cy="60" rx="25" ry="6" fill="#1A1410" opacity="0.8"/>
          <!-- Steam -->
          <path d="M68 48 Q65 40 68 32" stroke="rgba(74,55,40,0.4)" stroke-width="2" stroke-linecap="round" fill="none"/>
          <path d="M80 45 Q77 36 80 28" stroke="rgba(74,55,40,0.4)" stroke-width="2" stroke-linecap="round" fill="none"/>
          <path d="M92 48 Q89 40 92 32" stroke="rgba(74,55,40,0.4)" stroke-width="2" stroke-linecap="round" fill="none"/>
        </svg>
      </div>
      <span class="cat-label-static">Accessories</span>
      <div class="cat-info">
        <span class="cat-name">Accessories</span>
        <span class="cat-count">24 products</span>
      </div>
    </div>
  </div>
</section>

<!-- FEATURED PRODUCTS -->
<section class="products" id="shop">
  <div class="products-header">
    <div>
      <span class="section-label">New Arrivals</span>
      <h2 class="section-title">Featured <em>tools</em></h2>
    </div>
    <a href="#" class="btn-ghost">View All Products &#8594;</a>
  </div>
  <div class="product-grid">

    <!-- Product 1 -->
    <div class="product-card reveal">
      <div class="product-img">
        <div class="product-visual">
          <svg width="180" height="240" viewBox="0 0 180 240" fill="none">
            <ellipse cx="90" cy="210" rx="52" ry="8" fill="rgba(74,55,40,0.12)"/>
            <path d="M48 100 Q44 150 46 182 Q56 200 90 202 Q124 200 134 182 Q136 150 132 100 Z" fill="#2C1810"/>
            <path d="M56 108 Q52 148 54 174 Q60 188 90 190" stroke="rgba(237,232,223,0.08)" stroke-width="2" fill="none"/>
            <path d="M48 118 Q24 114 18 90 Q12 68 30 57 Q48 46 56 64 Q50 82 58 96" stroke="#2C1810" stroke-width="12" stroke-linecap="round" fill="none"/>
            <path d="M134 128 Q160 126 161 144 Q162 162 134 160" stroke="#2C1810" stroke-width="12" stroke-linecap="round" fill="none"/>
            <ellipse cx="90" cy="102" rx="44" ry="7" fill="#1A1410"/>
            <ellipse cx="90" cy="100" rx="42" ry="6" fill="#2C1810"/>
            <rect x="83" y="87" width="14" height="15" rx="5" fill="#1A1410"/>
            <ellipse cx="90" cy="87" rx="9" ry="4" fill="#2C1810"/>
          </svg>
        </div>
        <div class="product-actions">
          <button class="btn-atc" onclick="addToCart(this)">Add to Cart</button>
          <button class="btn-wish">♡</button>
        </div>
      </div>
      <span class="product-brand">Fellow</span>
      <div class="product-name">Stagg EKG Kettle</div>
      <div class="product-price"><span class="currency">OMR</span>72.000</div>
    </div>

    <!-- Product 2 -->
    <div class="product-card reveal reveal-delay-1">
      <div class="product-img">
        <div class="product-visual">
          <svg width="160" height="240" viewBox="0 0 160 240" fill="none">
            <ellipse cx="80" cy="210" rx="42" ry="7" fill="rgba(74,55,40,0.12)"/>
            <rect x="48" y="80" width="64" height="116" rx="8" fill="#2C1810"/>
            <rect x="55" y="88" width="50" height="72" rx="4" fill="#1A1410"/>
            <!-- display -->
            <rect x="60" y="93" width="40" height="28" rx="2" fill="#0D0A08"/>
            <rect x="63" y="96" width="34" height="8" rx="1" fill="rgba(201,187,168,0.15)"/>
            <rect x="63" y="107" width="20" height="6" rx="1" fill="rgba(201,187,168,0.08)"/>
            <!-- buttons -->
            <circle cx="72" cy="142" r="8" fill="#3A2518"/>
            <circle cx="88" cy="142" r="8" fill="#3A2518"/>
            <ellipse cx="80" cy="76" rx="30" ry="12" fill="#2C1810"/>
            <ellipse cx="80" cy="70" rx="24" ry="9" fill="#3A2518"/>
            <line x1="80" y1="38" x2="80" y2="60" stroke="#2C1810" stroke-width="8" stroke-linecap="round"/>
            <ellipse cx="80" cy="36" rx="10" ry="6" fill="#2C1810"/>
            <rect x="58" y="196" width="44" height="10" rx="3" fill="#1A1410"/>
          </svg>
        </div>
        <div class="product-actions">
          <button class="btn-atc" onclick="addToCart(this)">Add to Cart</button>
          <button class="btn-wish">♡</button>
        </div>
      </div>
      <span class="product-brand">Timemore</span>
      <div class="product-name">Chestnut C3 Grinder</div>
      <div class="product-price"><span class="currency">OMR</span>58.500</div>
    </div>

    <!-- Product 3 -->
    <div class="product-card reveal reveal-delay-2">
      <div class="product-img">
        <div class="product-visual">
          <svg width="150" height="240" viewBox="0 0 150 240" fill="none">
            <ellipse cx="75" cy="208" rx="40" ry="7" fill="rgba(74,55,40,0.12)"/>
            <path d="M30 60 L42 178 Q50 194 75 194 Q100 194 108 178 L120 60 Z" fill="#2C1810"/>
            <path d="M36 68 L46 170" stroke="rgba(237,232,223,0.07)" stroke-width="1.5" fill="none"/>
            <!-- V60 ribs -->
            <line x1="75" y1="68" x2="60" y2="178" stroke="rgba(237,232,223,0.06)" stroke-width="1"/>
            <line x1="75" y1="68" x2="67" y2="178" stroke="rgba(237,232,223,0.06)" stroke-width="1"/>
            <line x1="75" y1="68" x2="75" y2="178" stroke="rgba(237,232,223,0.06)" stroke-width="1"/>
            <line x1="75" y1="68" x2="83" y2="178" stroke="rgba(237,232,223,0.06)" stroke-width="1"/>
            <line x1="75" y1="68" x2="90" y2="178" stroke="rgba(237,232,223,0.06)" stroke-width="1"/>
            <ellipse cx="75" cy="60" rx="45" ry="9" fill="#1A1410"/>
            <path d="M62 194 L52 216 Q62 222 75 222 Q88 222 98 216 L88 194 Z" fill="#3A2518" opacity="0.7"/>
            <!-- filter paper edge -->
            <path d="M36 72 Q50 56 75 52 Q100 56 114 72" stroke="rgba(201,187,168,0.25)" stroke-width="1.5" fill="none"/>
          </svg>
        </div>
        <div class="product-actions">
          <button class="btn-atc" onclick="addToCart(this)">Add to Cart</button>
          <button class="btn-wish">♡</button>
        </div>
      </div>
      <span class="product-brand">Hario</span>
      <div class="product-name">V60 Copper Dripper</div>
      <div class="product-price"><span class="currency">OMR</span>34.000</div>
    </div>

  </div>
</section>

<!-- BRAND STORY -->
<section class="story" id="story">
  <div>
    <span class="section-label story-label">Who We Are</span>
    <h2 class="story-title reveal">The art of the<br><em>perfect pour.</em></h2>
    <p class="story-body reveal">
      Droplet was born from a deep love for specialty coffee and a belief that the tools you use shape the cup you drink. Based in Muscat, Oman, we curate only the finest brewing equipment from around the world — each piece chosen for its precision, craftsmanship, and beauty.
    </p>
    <p class="story-body reveal">
      We are not just a store. We are a community of brewers, tasters, and enthusiasts who believe coffee is a daily ritual worth perfecting. Whether you're a home brewer taking your first steps or a seasoned barista refining your craft, Droplet is your destination.
    </p>
    <a href="#" class="btn-primary reveal" style="display:inline-flex; margin-top: 8px;">Read Our Full Story</a>
    <div class="story-stats reveal">
      <div>
        <span class="stat-num">150+</span>
        <span class="stat-label">Products curated</span>
      </div>
      <div>
        <span class="stat-num">8+</span>
        <span class="stat-label">Premium brands</span>
      </div>
      <div>
        <span class="stat-num">5★</span>
        <span class="stat-label">Customer rating</span>
      </div>
    </div>
  </div>
  <div class="story-visual reveal">
    <div class="story-deco"></div>
    <div class="story-visual-inner">
      <svg width="300" height="380" viewBox="0 0 300 380" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- Large kettle pouring -->
        <ellipse cx="150" cy="355" rx="88" ry="14" fill="rgba(201,187,168,0.08)"/>
        <path d="M88 155 Q82 230 86 278 Q98 308 150 312 Q202 308 214 278 Q218 230 212 155 Z" fill="rgba(237,232,223,0.08)" stroke="rgba(201,187,168,0.2)" stroke-width="1"/>
        <path d="M88 180 Q52 174 44 145 Q36 118 64 102 Q92 86 104 110 Q95 135 106 155" stroke="rgba(201,187,168,0.25)" stroke-width="16" stroke-linecap="round" fill="none"/>
        <path d="M214 202 Q258 199 260 224 Q262 250 214 246" stroke="rgba(201,187,168,0.25)" stroke-width="16" stroke-linecap="round" fill="none"/>
        <ellipse cx="150" cy="158" rx="62" ry="10" fill="rgba(201,187,168,0.12)"/>
        <!-- Water drop -->
        <path d="M104 108 Q100 92 104 78 Q112 62 120 78 Q124 92 120 108 Q112 118 104 108Z" fill="rgba(201,187,168,0.35)"/>
        <!-- Circular deco -->
        <circle cx="150" cy="190" r="120" stroke="rgba(201,187,168,0.06)" stroke-width="1" fill="none"/>
        <circle cx="150" cy="190" r="90" stroke="rgba(201,187,168,0.04)" stroke-width="1" fill="none"/>
        <!-- Text ring -->
        <text fill="rgba(201,187,168,0.2)" font-size="10" letter-spacing="3" font-family="serif">
          <textPath href="#circle-path">SPECIALTY COFFEE · OMAN · DROPLET · SINCE 2022 · </textPath>
        </text>
        <defs>
          <path id="circle-path" d="M 150,50 A 140 140 0 1 1 149.99 50"/>
        </defs>
      </svg>
    </div>
  </div>
</section>

<!-- BEST SELLERS -->
<section class="bestsellers" id="bestsellers">
  <div class="bestsellers-header">
    <div>
      <span class="section-label">Community Picks</span>
      <h2 class="section-title">Best <em>sellers</em></h2>
    </div>
    <a href="#" class="btn-ghost">View All &#8594;</a>
  </div>
  <div class="bestsellers-grid reveal">
    <div class="bs-card" style="background: #E0D9CF;">
      <svg width="200" height="260" viewBox="0 0 200 260" fill="none">
        <ellipse cx="100" cy="238" rx="68" ry="10" fill="rgba(74,55,40,0.15)"/>
        <path d="M42 108 Q38 164 40 196 Q54 218 100 220 Q146 218 160 196 Q162 164 158 108 Z" fill="#2C1810"/>
        <path d="M42 130 Q12 125 6 98 Q0 72 22 58 Q44 44 54 66 Q46 90 56 108" stroke="#2C1810" stroke-width="16" stroke-linecap="round" fill="none"/>
        <path d="M160 148 Q194 145 195 168 Q196 192 160 188" stroke="#2C1810" stroke-width="15" stroke-linecap="round" fill="none"/>
        <ellipse cx="100" cy="110" rx="58" ry="9" fill="#1A1410"/>
        <rect x="91" y="93" width="18" height="19" rx="6" fill="#1A1410"/>
        <ellipse cx="100" cy="93" rx="12" ry="5" fill="#2C1810"/>
      </svg>
      <div class="bs-info">
        <span class="bs-name">Stagg EKG+ Kettle</span>
        <span class="bs-price">OMR 98.000</span>
      </div>
    </div>
    <div class="bs-card" style="background: #D8D3CB;">
      <svg width="130" height="180" viewBox="0 0 130 180" fill="none">
        <rect x="28" y="50" width="74" height="112" rx="8" fill="#2C1810"/>
        <rect x="36" y="58" width="58" height="75" rx="4" fill="#1A1410"/>
        <rect x="40" y="62" width="50" height="32" rx="2" fill="#0D0A08"/>
        <ellipse cx="65" cy="46" rx="32" ry="12" fill="#2C1810"/>
        <line x1="65" y1="18" x2="65" y2="38" stroke="#2C1810" stroke-width="9" stroke-linecap="round"/>
        <rect x="44" y="162" width="42" height="10" rx="3" fill="#1A1410"/>
      </svg>
      <div class="bs-info">
        <span class="bs-name">C3 Pro Grinder</span>
        <span class="bs-price">OMR 58.500</span>
      </div>
    </div>
    <div class="bs-card" style="background: #E8E2D8;">
      <svg width="120" height="180" viewBox="0 0 120 180" fill="none">
        <path d="M20 45 L32 148 Q40 162 60 162 Q80 162 88 148 L100 45 Z" fill="#2C1810"/>
        <ellipse cx="60" cy="45" rx="40" ry="8" fill="#1A1410"/>
        <path d="M48 162 L38 178 Q48 184 60 184 Q72 184 82 178 L72 162 Z" fill="#3A2518"/>
      </svg>
      <div class="bs-info">
        <span class="bs-name">V60 Ceramic Dripper</span>
        <span class="bs-price">OMR 28.000</span>
      </div>
    </div>
    <div class="bs-card" style="background: #D5D0C8;">
      <svg width="130" height="140" viewBox="0 0 130 140" fill="none">
        <rect x="15" y="60" width="100" height="58" rx="6" fill="#2C1810"/>
        <rect x="22" y="68" width="62" height="34" rx="3" fill="#1A1410"/>
        <rect x="88" y="72" width="18" height="8" rx="2" fill="#3A2518"/>
        <rect x="88" y="84" width="12" height="8" rx="2" fill="#3A2518" opacity="0.6"/>
        <ellipse cx="65" cy="118" rx="44" ry="8" fill="rgba(74,55,40,0.15)"/>
      </svg>
      <div class="bs-info">
        <span class="bs-name">Coffee Scale 2KG</span>
        <span class="bs-price">OMR 22.500</span>
      </div>
    </div>
  </div>
</section>

<!-- INSTAGRAM -->
<section class="instagram" id="contact">
  <div class="ig-header reveal">
    <span class="section-label" style="display:block; margin-bottom:8px;">Follow Along</span>
    <h2 class="section-title">@droplet<em>.om</em></h2>
    <a href="https://instagram.com/droplet.om" target="_blank" class="ig-handle">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
      Follow us on Instagram
    </a>
  </div>
  <div class="ig-grid reveal">
    <div class="ig-post"><div class="ig-post-inner" style="background:#DDD6CC;">
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none"><path d="M18 40 Q16 58 18 68 Q24 78 40 78 Q56 78 62 68 Q64 58 62 40 Z" fill="#2C1810" opacity="0.7"/><path d="M18 47 Q8 44 6 34 Q4 25 12 20 Q20 15 24 23" stroke="#2C1810" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.7"/></svg>
    </div></div>
    <div class="ig-post"><div class="ig-post-inner" style="background:#C9BBA8;">
      <svg width="70" height="80" viewBox="0 0 70 80" fill="none"><rect x="18" y="20" width="34" height="50" rx="4" fill="#2C1810" opacity="0.7"/><rect x="22" y="25" width="26" height="32" rx="2" fill="#1A1410" opacity="0.7"/><ellipse cx="35" cy="18" rx="16" ry="6" fill="#2C1810" opacity="0.7"/></svg>
    </div></div>
    <div class="ig-post"><div class="ig-post-inner" style="background:#E4DDD3;">
      <svg width="70" height="80" viewBox="0 0 70 80" fill="none"><path d="M12 22 L20 64 Q24 72 35 72 Q46 72 50 64 L58 22 Z" fill="#2C1810" opacity="0.7"/><ellipse cx="35" cy="22" rx="23" ry="5" fill="#1A1410" opacity="0.7"/></svg>
    </div></div>
    <div class="ig-post"><div class="ig-post-inner" style="background:#D8D3CB;">
      <svg width="80" height="60" viewBox="0 0 80 60" fill="none"><rect x="10" y="20" width="60" height="32" rx="4" fill="#2C1810" opacity="0.7"/><rect x="15" y="26" width="38" height="20" rx="2" fill="#1A1410" opacity="0.7"/></svg>
    </div></div>
    <div class="ig-post"><div class="ig-post-inner" style="background:#E8E0D4;">
      <svg width="70" height="80" viewBox="0 0 70 80" fill="none"><path d="M18 40 Q16 60 18 68 Q24 76 35 76 Q46 76 52 68 Q54 60 52 40Z" fill="#2C1810" opacity="0.7"/><path d="M20 42 Q4 44 6 58Q8 70 20 68" stroke="#2C1810" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.7"/><path d="M50 50 Q62 48 62 58Q62 68 50 66" stroke="#2C1810" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.7"/></svg>
    </div></div>
  </div>
  <a href="https://instagram.com/droplet.om" target="_blank" class="btn-primary" style="display:inline-flex;">Follow @droplet.om</a>
</section>

<!-- NEWSLETTER -->
<section class="newsletter">
  <h2 class="newsletter-title reveal">Stay in the <em style="font-family:var(--serif); font-style:italic; color:var(--bark)">loop</em></h2>
  <p class="newsletter-sub reveal">New arrivals, brew guides, and exclusive offers — straight to your inbox.</p>
  <div class="newsletter-form reveal">
    <input type="email" class="newsletter-input" placeholder="Your email address">
    <button class="btn-primary">Subscribe</button>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <div class="footer-top">
    <div>
      <span class="footer-brand-name">Droplet</span>
      <p class="footer-tagline">Specialty coffee tools for the intentional brewer. Proudly based in Muscat, Oman.</p>
      <div class="social-links">
        <a href="https://instagram.com/droplet.om" target="_blank" class="social-link" title="Instagram">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
        </a>
        <a href="#" class="social-link" title="TikTok">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34l-.01-8.83a8.18 8.18 0 0 0 4.78 1.52V4.55a4.85 4.85 0 0 1-1-.14z"/></svg>
        </a>
        <a href="#" class="social-link" title="WhatsApp">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/></svg>
        </a>
      </div>
    </div>
    <div>
      <span class="footer-col-title">Shop</span>
      <ul class="footer-links">
        <li><a href="#">All Products</a></li>
        <li><a href="#">Kettles</a></li>
        <li><a href="#">Grinders</a></li>
        <li><a href="#">Drippers</a></li>
        <li><a href="#">Accessories</a></li>
      </ul>
    </div>
    <div>
      <span class="footer-col-title">Information</span>
      <ul class="footer-links">
        <li><a href="#">Our Story</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Brew Guides</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    <div>
      <span class="footer-col-title">Support</span>
      <ul class="footer-links">
        <li><a href="#">Shipping Info</a></li>
        <li><a href="#">Returns Policy</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Track Order</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <span>© 2025 Droplet. All rights reserved. Muscat, Oman.</span>
    <span>Crafted with care for coffee lovers</span>
  </div>
</footer>

<!-- CART TOAST -->
<div id="cartToast" style="position:fixed;bottom:32px;right:32px;background:var(--espresso);color:var(--cream);padding:14px 24px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;opacity:0;transform:translateY(12px);transition:all 0.35s;z-index:500;pointer-events:none;">
  Added to cart ✓
</div>

<script>
  // Navbar scroll
  const navbar = document.getElementById('navbar');
  window.addEventListener('scroll', () => {
    navbar.classList.toggle('scrolled', window.scrollY > 60);
  });

  // Mobile menu
  const menuBtn = document.getElementById('menuBtn');
  const menuClose = document.getElementById('menuClose');
  const mobileMenu = document.getElementById('mobileMenu');
  menuBtn.addEventListener('click', () => mobileMenu.classList.add('open'));
  menuClose.addEventListener('click', () => mobileMenu.classList.remove('open'));
  function closeMenu() { mobileMenu.classList.remove('open'); }

  // Scroll reveal
  const reveals = document.querySelectorAll('.reveal');
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); } });
  }, { threshold: 0.12 });
  reveals.forEach(r => io.observe(r));

  // Add to cart
  function addToCart(btn) {
    const toast = document.getElementById('cartToast');
    toast.style.opacity = '1';
    toast.style.transform = 'translateY(0)';
    btn.textContent = '✓ Added';
    setTimeout(() => {
      toast.style.opacity = '0';
      toast.style.transform = 'translateY(12px)';
      btn.textContent = 'Add to Cart';
    }, 2200);
  }

  // Wishlist hearts
  document.querySelectorAll('.btn-wish').forEach(b => {
    b.addEventListener('click', () => {
      b.textContent = b.textContent === '♡' ? '♥' : '♡';
      b.style.color = b.textContent === '♥' ? '#C0392B' : '';
    });
  });

  // Newsletter
  document.querySelector('.newsletter .btn-primary').addEventListener('click', function() {
    const input = document.querySelector('.newsletter-input');
    if (input.value) {
      input.value = '';
      input.placeholder = 'Thank you for subscribing!';
      this.textContent = 'Subscribed ✓';
      setTimeout(() => { input.placeholder = 'Your email address'; this.textContent = 'Subscribe'; }, 3000);
    }
  });
</script>
</body>
</html>