diff --git a/index.html b/index.html
new file mode 100644
index 0000000..403e46d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#090b12" />
+    <meta name="description" content="The Tiffin Food — goal-oriented meals for the body you are building." />
+    <title>The Tiffin Food — Eat with intent</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=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="noise"></div>
+    <header class="site-header">
+      <a class="brand" href="#" aria-label="The Tiffin Food home">
+        <span class="brand-mark"><i></i><i></i><i></i></span>
+        <span>THE TIFFIN<br /><b>FOOD</b></span>
+      </a>
+      <nav class="nav-links" aria-label="Main navigation">
+        <a href="#menu">The menu</a>
+        <a href="#method">Our method</a>
+        <a href="#contact">Contact</a>
+      </nav>
+      <a class="header-cta" href="#menu">Build your box <span>↗</span></a>
+    </header>
+
+    <main>
+      <section class="hero">
+        <div class="hero-copy">
+          <p class="eyebrow"><span class="pulse"></span> Food for the body in progress</p>
+          <h1>Eat with<br /><em>intent.</em></h1>
+          <p class="hero-description">Goal-oriented meals, cooked fresh and delivered on your frequency. No noise. Just the right fuel for wherever you are going.</p>
+          <a class="button button-primary" href="#menu">Find your fuel <span>↓</span></a>
+        </div>
+        <div class="hero-orbit" aria-hidden="true">
+          <img class="hero-food-image" src="https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=1100&q=88" alt="" />
+          <div class="orbit orbit-one"></div>
+          <div class="orbit orbit-two"></div>
+          <div class="orbit orbit-three"></div>
+          <div class="core">
+            <span class="core-kicker">01 / 04</span>
+            <strong>FUEL<br />THE<br /><em>FORM</em></strong>
+            <span class="core-line"></span>
+            <span class="core-caption">Precision nutrition<br />for real life.</span>
+          </div>
+          <span class="orbit-label label-top">NUTRIENT<br />DENSITY</span>
+          <span class="orbit-label label-right">FRESH<br />EVERY DAY</span>
+        </div>
+        <div class="scroll-note"><span>01</span><span class="scroll-line"></span><span>SCROLL TO EXPLORE</span></div>
+      </section>
+
+      <section class="marquee" aria-label="Our principles">
+        <div class="marquee-track"><span>CALCULATED FLAVOR</span><b>✳</b><span>FRESH BY DESIGN</span><b>✳</b><span>YOUR GOAL. OUR CRAFT.</span><b>✳</b><span>CALCULATED FLAVOR</span><b>✳</b></div>
+      </section>
+
+      <section class="menu-section" id="menu">
+        <div class="section-intro">
+          <p class="eyebrow">02 / Choose your direction</p>
+          <h2>Four ways to<br /><em>show up.</em></h2>
+          <p>Every body has a different brief. Pick the one that sounds like your next chapter.</p>
+        </div>
+        <div class="meal-grid">
+          <article class="meal-card card-lime" data-goal="Lean" tabindex="0">
+            <div class="card-number">01</div>
+            <div class="food-orb orb-lime"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=700&q=88" alt="Fresh salad bowl with vegetables and grains" /><span>LOW<br />FAT</span></div>
+            <div class="card-content"><p class="card-tag">The cut</p><h3>Lean<br />mode</h3><p>Minimal fats. Maximum clarity. Light, clean meals to help you move sharper.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
+          </article>
+          <article class="meal-card card-orange" data-goal="Muscle" tabindex="0">
+            <div class="card-number">02</div>
+            <div class="food-orb orb-orange"><img src="https://images.unsplash.com/photo-1532550907401-a500c9a57435?auto=format&fit=crop&w=700&q=88" alt="High protein chicken and vegetables meal" /><span>HIGH<br />PROTEIN</span></div>
+            <div class="card-content"><p class="card-tag">The build</p><h3>Muscle<br />mode</h3><p>Pure protein power for the work you put in, from first rep to last.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
+          </article>
+          <article class="meal-card card-violet" data-goal="Bulk" tabindex="0">
+            <div class="card-number">03</div>
+            <div class="food-orb orb-violet"><img src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=700&q=88" alt="Colorful rice, vegetables and protein meal" /><span>CARBS +<br />PROTEIN</span></div>
+            <div class="card-content"><p class="card-tag">The gain</p><h3>Bulk<br />mode</h3><p>Intentional calories, complex carbs and protein in a bigger, bolder box.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
+          </article>
+          <article class="meal-card card-blue" data-goal="Balance" tabindex="0">
+            <div class="card-number">04</div>
+            <div class="food-orb orb-blue"><img src="https://images.unsplash.com/photo-1543352634-a1c51d9f1fa7?auto=format&fit=crop&w=700&q=88" alt="Balanced meal with vegetables, grains and protein" /><span>ALL-ROUND<br />GOOD</span></div>
+            <div class="card-content"><p class="card-tag">The flow</p><h3>Balanced<br />mode</h3><p>A little bit of everything, dialed into a rhythm you can actually keep.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
+          </article>
+        </div>
+      </section>
+
+      <section class="method-section" id="method">
+        <div class="method-stamp">HOW IT<br />WORKS <span>↘</span></div>
+        <div class="method-copy"><p class="eyebrow">03 / The tiffin protocol</p><h2>Small box.<br /><em>Big energy.</em></h2><p>We turn nutrition science into food you look forward to. Tell us the goal, choose your rhythm, and we will handle the rest.</p><a class="text-link" href="#contact">See the protocol <span>↗</span></a></div>
+        <div class="steps"><div class="step"><span>01</span><h3>Choose your goal</h3><p>Tell us what you are building towards.</p></div><div class="step"><span>02</span><h3>Set your frequency</h3><p>Daily, weekly, or whenever you need a reset.</p></div><div class="step"><span>03</span><h3>We do the cooking</h3><p>Fresh food, delivered to your door.</p></div></div>
+      </section>
+
+      <section class="contact-section" id="contact">
+        <p class="eyebrow">04 / Ready when you are</p>
+        <h2>Make your next<br /><em>meal count.</em></h2>
+        <a class="button button-light" href="mailto:hello@thetiffinfood.com">Start your order <span>↗</span></a>
+      </section>
+    </main>
+
+    <footer><a class="brand" href="#"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2024 The Tiffin Food / Made for your next.</p></footer>
+    <div class="toast" role="status" aria-live="polite"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..2bc4cf1
--- /dev/null
+++ b/script.js
@@ -0,0 +1,17 @@
+const toast = document.querySelector(".toast");
+const showToast = (goal) => {
+  toast.textContent = `${goal} mode selected — your box is almost ready.`;
+  toast.classList.add("show");
+  window.setTimeout(() => toast.classList.remove("show"), 3200);
+};
+
+document.querySelectorAll(".meal-card").forEach((card) => {
+  const action = card.querySelector(".card-action");
+  action.addEventListener("click", () => showToast(card.dataset.goal));
+  card.addEventListener("keydown", (event) => {
+    if ((event.key === "Enter" || event.key === " ") && event.target === card) {
+      event.preventDefault();
+      showToast(card.dataset.goal);
+    }
+  });
+});
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..552b08d
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,12 @@
+:root{--ink:#090b12;--paper:#f1f0ea;--muted:#a4a6b0;--line:rgba(241,240,234,.16);--lime:#d5f34b;--orange:#ff704b;--violet:#af8cff;--blue:#64b9ff}
+*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:"Space Grotesk",sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.site-header{height:88px;padding:0 5.3vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:3}.brand{display:flex;align-items:center;gap:11px;color:var(--paper);font:500 11px/1.05 "DM Mono",monospace;letter-spacing:.08em;text-decoration:none}.brand b{color:var(--lime);font-weight:500}.brand-mark{display:flex;gap:2px;align-items:end;width:22px;height:23px}.brand-mark i{display:block;width:5px;border-radius:5px;background:var(--lime)}.brand-mark i:nth-child(1){height:12px}.brand-mark i:nth-child(2){height:20px}.brand-mark i:nth-child(3){height:16px}.nav-links{display:flex;gap:35px;margin-left:9vw}.nav-links a,.header-cta,.socials a{color:var(--paper);font:11px "DM Mono",monospace;text-decoration:none;text-transform:uppercase;letter-spacing:.08em}.nav-links a{color:var(--muted);transition:color .2s}.nav-links a:hover{color:var(--lime)}.header-cta{border:1px solid var(--line);padding:12px 16px}.header-cta span,.button span,.text-link span,.card-action span{color:var(--lime);font-size:16px;margin-left:20px}.hero{min-height:calc(100vh - 88px);padding:11vh 5.3vw 6vh;position:relative;display:flex;align-items:center;overflow:hidden}.hero-copy{max-width:520px;position:relative;z-index:1}.eyebrow{font:11px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 24px}.pulse{width:7px;height:7px;background:var(--lime);border-radius:50%;display:inline-block;margin-right:9px;box-shadow:0 0 13px var(--lime)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(74px,10.5vw,154px);letter-spacing:-.095em;line-height:.82;margin:0 0 40px;font-weight:500}h1 em,h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.08em;color:var(--lime)}.hero-description{max-width:330px;color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:35px}.button{display:inline-flex;align-items:center;text-decoration:none;text-transform:uppercase;font:11px "DM Mono",monospace;letter-spacing:.08em;padding:17px 20px}.button-primary{color:var(--ink);background:var(--lime)}.button-primary span{color:var(--ink)}.hero-orbit{position:absolute;width:min(65vw,780px);height:min(65vw,780px);right:-5vw;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 49% 48%,rgba(213,243,75,.35),rgba(213,243,75,.07) 15%,transparent 38%)}.orbit{position:absolute;border:1px solid rgba(213,243,75,.28);border-radius:50%;inset:5%;transform:rotate(-25deg) skew(5deg)}.orbit-two{inset:20%;transform:rotate(55deg) skew(-10deg);border-color:rgba(213,243,75,.4)}.orbit-three{inset:35%;transform:rotate(-50deg) skew(8deg);border-color:rgba(213,243,75,.55)}.orbit:after{content:"";position:absolute;width:7px;height:7px;background:var(--lime);box-shadow:0 0 15px 3px var(--lime);border-radius:50%;top:4%;left:65%}.orbit-two:after{top:75%;left:4%}.core{position:absolute;inset:39%;border:1px solid var(--lime);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:rgba(9,11,18,.3);box-shadow:0 0 40px rgba(213,243,75,.12)}.core strong{font-size:25px;line-height:.8;letter-spacing:-.08em}.core strong em{font-family:Georgia,serif;font-weight:400;color:var(--lime)}.core-kicker,.core-caption,.orbit-label{font:9px "DM Mono",monospace;letter-spacing:.09em;color:var(--muted)}.core-line{width:22px;border-top:1px solid var(--lime);margin:16px}.label-top{position:absolute;top:10%;right:25%}.label-right{position:absolute;bottom:24%;right:3%}.scroll-note{position:absolute;bottom:7%;left:5.3%;display:flex;align-items:center;gap:12px;font:9px "DM Mono",monospace;color:var(--muted);letter-spacing:.13em}.scroll-note span:first-child{color:var(--lime)}.scroll-line{width:56px;border-top:1px solid var(--line)}.marquee{border-block:1px solid var(--line);padding:17px 0;overflow:hidden;white-space:nowrap}.marquee-track{display:flex;width:max-content;align-items:center;gap:32px;font:12px "DM Mono",monospace;letter-spacing:.12em;animation:marquee 24s linear infinite}.marquee b{color:var(--lime);font-size:20px}@keyframes marquee{to{transform:translateX(-50%)}}.menu-section{padding:145px 5.3vw 140px}.section-intro{display:grid;grid-template-columns:1fr 1.25fr .8fr;align-items:end;gap:30px;margin-bottom:70px}.section-intro h2,.method-copy h2,.contact-section h2{font-size:clamp(52px,6.4vw,94px);line-height:.87;letter-spacing:-.08em;font-weight:500;margin:0}.section-intro>p:last-child{color:var(--muted);font-size:14px;line-height:1.5;max-width:220px;margin-bottom:4px}.meal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.meal-card{min-height:465px;position:relative;padding:19px;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);transition:transform .35s ease}.meal-card:hover,.meal-card:focus{transform:translateY(-9px);outline:none}.card-lime{background:var(--lime)}.card-orange{background:var(--orange)}.card-violet{background:var(--violet)}.card-blue{background:var(--blue)}.card-number{font:11px "DM Mono",monospace}.food-orb{width:155px;height:155px;border-radius:50%;margin:43px auto 20px;display:grid;place-items:center;text-align:center;font:11px "DM Mono",monospace;letter-spacing:.09em;border:1px solid rgba(9,11,18,.5);position:relative}.food-orb:after,.food-orb:before{content:"";position:absolute;border:1px solid rgba(9,11,18,.4);border-radius:50%;inset:-15px;transform:rotate(30deg)}.food-orb:before{inset:-30px;transform:rotate(-45deg)}.orb-lime{background:radial-gradient(circle at 32% 25%,#fff9c6,#7c9e00);box-shadow:0 20px 40px rgba(45,62,0,.35)}.orb-orange{background:radial-gradient(circle at 32% 25%,#ffd4a3,#bd2e19);box-shadow:0 20px 40px rgba(90,24,0,.35)}.orb-violet{background:radial-gradient(circle at 32% 25%,#eee0ff,#5f3baf);box-shadow:0 20px 40px rgba(49,19,103,.35)}.orb-blue{background:radial-gradient(circle at 32% 25%,#ddf7ff,#2f79bc);box-shadow:0 20px 40px rgba(19,61,111,.35)}.card-content{margin-top:auto}.card-tag{font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}.card-content h3{font-size:34px;line-height:.85;letter-spacing:-.08em;margin-bottom:16px;font-weight:500}.card-content>p:not(.card-tag){font-size:12px;line-height:1.4;max-width:200px;margin-bottom:23px}.card-action{background:none;border:0;border-top:1px solid rgba(9,11,18,.35);width:100%;padding:13px 0 0;text-align:left;color:var(--ink);font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.card-action span{color:var(--ink);float:right}.method-section{background:#171a23;display:grid;grid-template-columns:.7fr 1fr 1fr;gap:8vw;padding:130px 5.3vw;position:relative}.method-stamp{width:148px;height:148px;border:1px solid var(--lime);border-radius:50%;display:grid;place-items:center;text-align:center;color:var(--lime);font:11px "DM Mono",monospace;line-height:1.1;transform:rotate(-14deg)}.method-stamp span{font-size:22px}.method-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.6;max-width:310px;margin:30px 0}.text-link{font:11px "DM Mono",monospace;color:var(--paper);text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--lime);padding-bottom:8px}.steps{border-top:1px solid var(--line)}.step{padding:23px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:45px 1fr;column-gap:15px}.step span{color:var(--lime);font:11px "DM Mono",monospace}.step h3{font-size:17px;font-weight:500;margin-bottom:6px}.step p{grid-column:2;color:var(--muted);font-size:12px;margin:0}.contact-section{text-align:center;padding:145px 20px 160px;background:var(--lime);color:var(--ink)}.contact-section .eyebrow{color:rgba(9,11,18,.65)}.contact-section h2{margin-bottom:42px}.contact-section h2 em{color:var(--ink)}.button-light{color:var(--paper);background:var(--ink)}.button-light span{color:var(--lime)}footer{display:flex;align-items:center;justify-content:space-between;padding:35px 5.3vw}footer p{font:10px "DM Mono",monospace;color:var(--muted);margin:0}.socials{display:flex;gap:18px}.socials a{font-size:10px;color:var(--muted)}.toast{position:fixed;bottom:25px;right:25px;background:var(--lime);color:var(--ink);padding:14px 18px;font:11px "DM Mono",monospace;transform:translateY(120px);transition:transform .3s;z-index:20}.toast.show{transform:translateY(0)}
+@media(max-width:850px){.nav-links{display:none}.hero{min-height:780px;align-items:flex-start;padding-top:100px}.hero-orbit{width:600px;height:600px;right:-210px;top:57%}.scroll-note{bottom:30px}.section-intro{grid-template-columns:1fr 1.2fr}.section-intro>p:last-child{grid-column:2}.meal-grid{grid-template-columns:repeat(2,1fr)}.method-section{grid-template-columns:1fr 1.3fr;gap:50px}.method-copy{grid-column:2}.steps{grid-column:1/-1}}
+@media(max-width:560px){.site-header{height:73px;padding:0 20px}.header-cta{padding:10px;font-size:9px}.hero{padding:75px 20px 40px;min-height:700px}.hero-orbit{width:480px;height:480px;right:-220px;top:64%}h1{font-size:82px}.hero-description{font-size:13px}.menu-section,.method-section{padding:90px 20px}.section-intro{display:block;margin-bottom:45px}.section-intro h2{margin-bottom:25px}.section-intro>p:last-child{max-width:280px}.meal-grid{grid-template-columns:1fr}.meal-card{min-height:440px}.method-section{display:block}.method-stamp{margin-bottom:70px}.method-copy{margin-bottom:70px}.contact-section{padding:100px 20px 115px}.contact-section h2{font-size:62px}footer{padding:28px 20px;gap:20px;flex-wrap:wrap}footer p{order:3;width:100%}.label-top,.label-right{display:none}}
+
+/* Photographic food layer: real texture under the neon editorial treatment. */
+.hero-food-image{position:absolute;inset:18%;width:64%;height:64%;object-fit:cover;border-radius:50%;opacity:.65;filter:saturate(.9) contrast(1.12);mix-blend-mode:screen;box-shadow:0 0 90px rgba(213,243,75,.2)}
+.food-orb{overflow:visible}
+.food-orb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;filter:saturate(1.15) contrast(1.08);transition:transform .4s ease,filter .4s ease}
+.meal-card:hover .food-orb img,.meal-card:focus .food-orb img{transform:scale(1.08);filter:saturate(1.3) contrast(1.12)}
+.food-orb span{position:relative;z-index:1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);font-weight:500}
+.food-orb:after{z-index:2}.food-orb:before{z-index:2}