<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meridian — Single-Origin Coffee</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,400..600&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --cream:#f4ece1;
    --cream-2:#ebe0d0;
    --espresso:#221813;
    --espresso-2:#34261d;
    --ember:#c8501e;
    --ember-soft:#e07a44;
    --clay:#8a5a3b;
    --ink:#2a201a;
    --muted:#6d5b4d;
    --line:rgba(34,24,19,.12);
    --display:"Fraunces",Georgia,serif;
    --body:"Hanken Grotesk",system-ui,sans-serif;
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    background:var(--cream);
    color:var(--ink);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  /* film grain overlay */
  body::after{
    content:"";
    position:fixed;inset:0;
    pointer-events:none;z-index:9999;
    opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  ::selection{background:var(--ember);color:var(--cream)}

  /* ---------- NAV ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.2rem clamp(1.2rem,5vw,4rem);
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  }
  nav.scrolled{
    background:rgba(244,236,225,.82);
    backdrop-filter:blur(14px);
    padding-top:.8rem;padding-bottom:.8rem;
    box-shadow:0 1px 0 var(--line);
  }
  .brand{
    font-family:var(--display);
    font-weight:600;
    font-size:1.35rem;
    letter-spacing:-.02em;
    display:flex;align-items:center;gap:.55rem;
  }
  .brand .dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--ember);
    box-shadow:0 0 0 4px rgba(200,80,30,.18);
  }
  .nav-links{display:flex;gap:2.2rem;align-items:center}
  .nav-links a{
    color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500;
    position:relative;opacity:.8;transition:opacity .25s;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:0;
    background:var(--ember);transition:width .3s ease;
  }
  .nav-links a:hover{opacity:1}
  .nav-links a:hover::after{width:100%}
  .btn{
    font-family:var(--body);font-weight:600;font-size:.9rem;
    padding:.7rem 1.4rem;border-radius:100px;cursor:pointer;
    border:1.5px solid var(--espresso);background:var(--espresso);color:var(--cream);
    text-decoration:none;display:inline-block;
    transition:transform .25s ease, background .25s ease, color .25s ease;
  }
  .btn:hover{transform:translateY(-2px);background:var(--ember);border-color:var(--ember)}
  .btn.ghost{background:transparent;color:var(--espresso)}
  .btn.ghost:hover{background:var(--espresso);color:var(--cream)}
  @media(max-width:760px){.nav-links{display:none}}

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:2rem;
    padding:8rem clamp(1.2rem,5vw,4rem) 4rem;
    position:relative;
  }
  .hero-bg{
    position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(60% 80% at 80% 20%, rgba(200,80,30,.12), transparent 60%),
      radial-gradient(50% 60% at 10% 90%, rgba(138,90,59,.12), transparent 60%);
  }
  .hero > *{position:relative;z-index:1}
  .eyebrow{
    display:inline-flex;align-items:center;gap:.6rem;
    font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:var(--clay);margin-bottom:1.6rem;
  }
  .eyebrow::before{content:"";width:28px;height:1.5px;background:var(--clay)}
  .hero h1{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(2.8rem,7vw,5.6rem);
    line-height:.98;
    letter-spacing:-.03em;
    margin-bottom:1.6rem;
  }
  .hero h1 em{font-style:italic;color:var(--ember)}
  .hero p.lede{
    font-size:clamp(1.05rem,1.6vw,1.25rem);
    color:var(--muted);max-width:34ch;margin-bottom:2.2rem;
  }
  .hero-cta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
  .price-note{font-size:.9rem;color:var(--muted)}
  .price-note b{font-family:var(--display);color:var(--ink);font-size:1.15rem;font-weight:600}

  /* product visual */
  .product-stage{
    display:flex;align-items:center;justify-content:center;position:relative;
  }
  .halo{
    position:absolute;width:min(34vw,420px);aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle, rgba(224,122,68,.35), transparent 70%);
    filter:blur(10px);
    animation:pulse 6s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:1}}
  .bag{width:min(30vw,360px);height:auto;filter:drop-shadow(0 30px 50px rgba(34,24,19,.35));animation:float 7s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}
  @media(max-width:880px){
    .hero{grid-template-columns:1fr;text-align:center;padding-top:7rem}
    .eyebrow{margin-inline:auto}
    .hero p.lede{margin-inline:auto}
    .hero-cta{justify-content:center}
    .product-stage{order:-1;margin-bottom:1rem}
  }

  /* ---------- MARQUEE ---------- */
  .marquee{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--espresso);color:var(--cream);
    overflow:hidden;padding:1rem 0;
  }
  .marquee-track{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:scroll 28s linear infinite}
  .marquee-track span{font-family:var(--display);font-style:italic;font-size:1.2rem;opacity:.85;display:flex;align-items:center;gap:3rem}
  .marquee-track span::after{content:"✦";color:var(--ember-soft);font-style:normal}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* ---------- SECTIONS ---------- */
  section.block{padding:clamp(4rem,9vw,8rem) clamp(1.2rem,5vw,4rem)}
  .section-head{max-width:620px;margin-bottom:3.5rem}
  .section-head .eyebrow{margin-bottom:1rem}
  .section-head h2{
    font-family:var(--display);font-weight:400;
    font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;
  }
  .section-head h2 em{font-style:italic;color:var(--ember)}

  /* features */
  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .feature{
    background:var(--cream-2);
    border:1px solid var(--line);
    border-radius:18px;padding:2rem 1.8rem;
    transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, background .4s;
  }
  .feature:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(34,24,19,.12);background:#fff}
  .feature .ic{
    width:48px;height:48px;border-radius:12px;
    display:grid;place-items:center;margin-bottom:1.3rem;
    background:var(--espresso);color:var(--ember-soft);
  }
  .feature h3{font-family:var(--display);font-weight:600;font-size:1.35rem;margin-bottom:.5rem;letter-spacing:-.01em}
  .feature p{color:var(--muted);font-size:.97rem}
  @media(max-width:820px){.features{grid-template-columns:1fr}}

  /* split detail */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
  .split-visual{
    aspect-ratio:4/5;border-radius:24px;position:relative;overflow:hidden;
    background:linear-gradient(160deg,var(--espresso),var(--espresso-2));
    display:grid;place-items:center;
  }
  .split-visual .rings{position:absolute;inset:0;opacity:.5}
  .split-visual .rings::before,.split-visual .rings::after{
    content:"";position:absolute;border:1px solid rgba(224,122,68,.3);border-radius:50%;
    left:50%;top:50%;translate:-50% -50%;
  }
  .split-visual .rings::before{width:70%;aspect-ratio:1}
  .split-visual .rings::after{width:46%;aspect-ratio:1;border-color:rgba(224,122,68,.5)}
  .big-num{font-family:var(--display);font-style:italic;color:var(--cream);font-size:clamp(3rem,9vw,6rem);line-height:1;z-index:1;text-align:center}
  .big-num small{display:block;font-style:normal;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;font-family:var(--body);margin-top:.6rem}
  .specs{list-style:none}
  .specs li{
    display:flex;justify-content:space-between;gap:1rem;
    padding:1.05rem 0;border-bottom:1px solid var(--line);
  }
  .specs li:first-child{border-top:1px solid var(--line)}
  .specs .k{color:var(--muted);font-size:.95rem}
  .specs .v{font-family:var(--display);font-weight:600;font-size:1.05rem}
  .split h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:1.2rem}
  .split p{color:var(--muted);margin-bottom:2rem}
  @media(max-width:820px){.split{grid-template-columns:1fr}.split-visual{order:-1}}

  /* quote */
  .quote-wrap{background:var(--espresso);color:var(--cream);text-align:center}
  .quote-wrap blockquote{
    font-family:var(--display);font-weight:300;font-style:italic;
    font-size:clamp(1.6rem,4.5vw,3rem);line-height:1.25;letter-spacing:-.01em;
    max-width:18ch;margin:0 auto 2rem;
  }
  .quote-wrap blockquote span{color:var(--ember-soft)}
  .cite{font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}

  /* CTA */
  .cta{
    text-align:center;
    background:linear-gradient(180deg,var(--cream),var(--cream-2));
  }
  .cta h2{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:1.2rem}
  .cta h2 em{font-style:italic;color:var(--ember)}
  .cta p{color:var(--muted);max-width:42ch;margin:0 auto 2.4rem;font-size:1.05rem}
  .cta .btn{padding:1rem 2.4rem;font-size:1rem}

  /* footer */
  footer{
    background:var(--espresso);color:var(--cream);
    padding:4rem clamp(1.2rem,5vw,4rem) 2rem;
  }
  .foot-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-bottom:3rem;border-bottom:1px solid rgba(244,236,225,.12)}
  .foot-grid .brand{color:var(--cream)}
  .foot-col h4{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:1rem}
  .foot-col a{display:block;color:var(--cream);text-decoration:none;opacity:.85;font-size:.95rem;padding:.25rem 0;transition:opacity .2s,padding-left .2s}
  .foot-col a:hover{opacity:1;padding-left:.3rem;color:var(--ember-soft)}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:2rem;font-size:.85rem;opacity:.6}

  /* reveal animation */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .hero .stagger{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .hero .stagger:nth-child(1){animation-delay:.1s}
  .hero .stagger:nth-child(2){animation-delay:.22s}
  .hero .stagger:nth-child(3){animation-delay:.34s}
  .hero .stagger:nth-child(4){animation-delay:.46s}
  .product-stage{opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .3s forwards}
  @keyframes rise{to{opacity:1;transform:none}}
</style>
</head>
<body>

<nav id="nav">
  <div class="brand"><span class="dot"></span>Meridian</div>
  <div class="nav-links">
    <a href="#features">Why It's Different</a>
    <a href="#details">The Roast</a>
    <a href="#story">Our Story</a>
    <a href="#buy" class="btn">Order Now</a>
  </div>
</nav>

<!-- HERO -->
<header class="hero">
  <div class="hero-bg"></div>
  <div class="hero-copy">
    <span class="eyebrow stagger">Single-Origin · Ethiopia</span>
    <h1 class="stagger">Morning, <em>elevated.</em></h1>
    <p class="lede stagger">Meridian is a bright, floral single-origin coffee roasted in small batches and shipped within 48 hours of roasting. Taste the difference fresh makes.</p>
    <div class="hero-cta stagger">
      <a href="#buy" class="btn">Order a Bag or Shoes</a>
      <span class="price-note">From <b>$19</b> / 12oz</span>
    </div>
  </div>
  <div class="product-stage">
    <div class="halo"></div>
    <!-- CSS/SVG product so the page needs no external images -->
    <svg class="bag" viewBox="0 0 280 380" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Meridian coffee bag">
      <defs>
        <linearGradient id="bagg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stop-color="#3a2a20"/>
          <stop offset="1" stop-color="#22180f"/>
        </linearGradient>
        <linearGradient id="label" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#f4ece1"/>
          <stop offset="1" stop-color="#e8dcc9"/>
        </linearGradient>
      </defs>
      <!-- bag body -->
      <rect x="36" y="40" width="208" height="320" rx="14" fill="url(#bagg)"/>
      <!-- top fold -->
      <path d="M36 54 L140 24 L244 54 L244 40 Q244 30 234 30 L46 30 Q36 30 36 40 Z" fill="#1a120c"/>
      <rect x="60" y="20" width="160" height="10" rx="5" fill="#120c08"/>
      <!-- side seam shading -->
      <rect x="36" y="40" width="20" height="320" rx="14" fill="#000" opacity="0.18"/>
      <!-- label -->
      <rect x="66" y="118" width="148" height="180" rx="8" fill="url(#label)"/>
      <circle cx="140" cy="160" r="6" fill="#c8501e"/>
      <text x="140" y="200" text-anchor="middle" font-family="Fraunces, serif" font-size="30" font-weight="600" fill="#221813" font-style="italic">Meridian</text>
      <text x="140" y="224" text-anchor="middle" font-family="Hanken Grotesk, sans-serif" font-size="9" letter-spacing="3" fill="#8a5a3b">SINGLE ORIGIN</text>
      <line x1="92" y1="244" x2="188" y2="244" stroke="#221813" stroke-opacity="0.18"/>
      <text x="140" y="266" text-anchor="middle" font-family="Hanken Grotesk, sans-serif" font-size="10" letter-spacing="1.5" fill="#6d5b4d">ETHIOPIA · YIRGACHEFFE</text>
      <text x="140" y="284" text-anchor="middle" font-family="Hanken Grotesk, sans-serif" font-size="9" letter-spacing="1.5" fill="#6d5b4d">NET WT. 12 OZ (340g)</text>
    </svg>
  </div>
</header>

<!-- MARQUEE -->
<div class="marquee" aria-hidden="true">
  <div class="marquee-track">
    <span>Roasted to order</span><span>Floral & citrus notes</span><span>Carbon-neutral shipping</span><span>Direct-trade beans</span>
    <span>Roasted to order</span><span>Floral & citrus notes</span><span>Carbon-neutral shipping</span><span>Direct-trade beans</span>
  </div>
</div>

<!-- FEATURES -->
<section class="block" id="features">
  <div class="section-head reveal">
    <span class="eyebrow">Why Meridian</span>
    <h2>Not just coffee. A <em>ritual</em> worth keeping.</h2>
  </div>
  <div class="features">
    <div class="feature reveal">
      <div class="ic"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3"/></svg></div>
      <h3>Roasted OK to order</h3>
      <p>Every OK bag is roasted the day before it ships. No warehouse staleness — just peak flavor, every time.</p>
    </div>
    <div class="feature reveal">
      <div class="ic"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg></div>
      <h3>Single origin, traced</h3>
      <p>Sourced from one farm in Yirgacheffe through direct trade — so growers earn more and you taste the place.</p>
    </div>
    <div class="feature reveal">
      <div class="ic"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9"/><path d="M3 12h9"/><path d="M12 3v18"/></svg></div>
      <h3>Carbon-neutral</h3>
      <p>Compostable packaging and offset shipping on every order. A better cup that's kinder to the planet.</p>
    </div>
  </div>
</section>

<!-- DETAIL / SPECS -->
<section class="block" id="details" style="background:var(--cream-2)">
  <div class="split">
    <div class="split-visual reveal">
      <div class="rings"></div>
      <div class="big-num">04<small>Tasting Notes</small></div>
    </div>
    <div class="split-copy reveal">
      <h2>A cup that tastes like <em>sunrise.</em></h2>
      <p>Light-medium roast that leans bright and clean. Expect jasmine on the nose, a wash of citrus, and a finish that lingers like honey. Brews beautifully as pour-over, drip, or AeroPress.</p>
      <ul class="specs">
        <li><span class="k">Origin</span><span class="v">Yirgacheffe, Ethiopia</span></li>
        <li><span class="k">Process</span><span class="v">Washed</span></li>
        <li><span class="k">Roast Level</span><span class="v">Light–Medium</span></li>
        <li><span class="k">Notes</span><span class="v">Jasmine · Citrus · Honey</span></li>
        <li><span class="k">Altitude</span><span class="v">1,900–2,100m</span></li>
      </ul>
    </div>
  </div>
</section>

<!-- QUOTE -->
<section class="block quote-wrap" id="story">
  <div class="reveal">
    <blockquote>"The best cup of coffee I've made at home — <span>full stop.</span>"</blockquote>
    <div class="cite">Priya N. · Verified Subscriber</div>
  </div>
</section>

<!-- CTA -->
<section class="block cta" id="buy">
  <div class="reveal">
    <h2>Ready for a better <em>morning?</em></h2>
    <p>Start with a single bag or save 15% with a subscription. Free shipping on orders over $35. Cancel anytime.</p>
    <a href="#" class="btn" onclick="return false">Order Your First Bag — $19</a>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <div class="foot-grid">
    <div>
      <div class="brand"><span class="dot"></span>Meridian</div>
      <p style="opacity:.7;max-width:26ch;margin-top:1rem;font-size:.95rem">Small-batch single-origin coffee, roasted fresh and shipped to your door.</p>
    </div>
    <div class="foot-col">
      <h4>Shop</h4>
      <a href="#">All Coffee</a>
      <a href="#">Subscriptions</a>
      <a href="#">Gift Cards</a>
      <a href="#">Brewing Gear</a>
    </div>
    <div class="foot-col">
      <h4>Company</h4>
      <a href="#">Our Story</a>
      <a href="#">Sourcing</a>
      <a href="#">Sustainability</a>
      <a href="#">Contact</a>
    </div>
    <div class="foot-col">
      <h4>Follow</h4>
      <a href="#">Instagram</a>
      <a href="#">Newsletter</a>
      <a href="#">TikTok</a>
    </div>
  </div>
  <div class="foot-bottom">
    <span>© 2026 Meridian Coffee Co. All rights reserved.</span>
    <span>Privacy · Terms</span>
  </div>
</footer>

<script>
  // nav background on scroll
  const nav = document.getElementById('nav');
  const onScroll = () => nav.classList.toggle('scrolled', window.scrollY > 30);
  onScroll();
  window.addEventListener('scroll', onScroll, {passive:true});

  // scroll reveal
  const io = new IntersectionObserver((entries)=>{
    entries.forEach(e=>{
      if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); }
    });
  },{threshold:.15});
  document.querySelectorAll('.reveal').forEach((el,i)=>{
    el.style.transitionDelay = (i % 3) * 90 + 'ms';
    io.observe(el);
  });
</script>
</body>
</html>
