<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Togtr — Never Stop Dating</title><link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet"/><style>:root { --black: #0a0a0a; --white: #faf9f7; --cream: #f5f0e8; --gold: #b8975a; --gold2: #d4b07a; --red: #8b1a1a; --muted: #8a8680; --line: #e0dbd3;}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:'Jost',sans-serif;color:var(--black);background:var(--white);-webkit-font-smoothing:antialiased;font-weight:300}a{text-decoration:none;color:inherit}
.container{width:min(1080px,calc(100% - 64px));margin:0 auto}
/* ── NAV ── */header{position:fixed;top:0;width:100%;z-index:50;transition:all .4s}header.scrolled{background:rgba(250,249,247,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.nav-logo{letter-spacing:.22em;font-size:19px;font-weight:400;font-family:'Jost',sans-serif;text-transform:uppercase;color:var(--black)}.nav-logo span{color:var(--gold)}.nav-links{display:flex;gap:36px}.nav-links a{font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s}.nav-links a:hover{color:var(--black)}.btn-nav{font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--black);border-bottom:1px solid var(--black);padding-bottom:2px;transition:all .2s}.btn-nav:hover{color:var(--gold);border-color:var(--gold)}
/* ── HEARTS ── */.hearts-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}.hrt{position:absolute;opacity:0;animation:floatUp linear infinite;font-style:normal;line-height:1}@keyframes floatUp{ 0% {transform:translateY(108vh) rotate(-5deg);opacity:0} 7% {opacity:.07} 90% {opacity:.04} 100%{transform:translateY(-10vh) rotate(8deg);opacity:0}}
/* ── HERO ── */.hero{ min-height:100vh; background:var(--black); display:flex;align-items:center;justify-content:center; text-align:center; padding:140px 40px 100px; position:relative;overflow:hidden;}.hero-rule{width:1px;height:60px;background:var(--gold);margin:0 auto 32px;opacity:.6}.hero-eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:32px;font-weight:400}.hero h1{ font-family:'Cormorant',serif; font-size:clamp(64px,9vw,130px); font-weight:300; line-height:.92; letter-spacing:-.02em; color:var(--white); margin-bottom:40px;}.hero h1 em{font-style:italic;color:var(--gold)}.hero-sub{ font-size:13px;letter-spacing:.1em;line-height:2; color:rgba(250,249,247,.5);max-width:440px;margin:0 auto 52px; text-transform:uppercase;font-weight:300;}.hero-actions{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}.btn-gold{ font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase; background:var(--gold);color:var(--black); padding:16px 44px;border:none;cursor:pointer; transition:all .3s;}.btn-gold:hover{background:var(--gold2)}.btn-outline-light{ font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase; background:transparent;color:var(--white); padding:16px 44px;border:1px solid rgba(250,249,247,.25);cursor:pointer; transition:all .3s;}.btn-outline-light:hover{border-color:var(--white)}.hero-footer{ position:absolute;bottom:40px;left:0;right:0; display:flex;justify-content:center;gap:52px;}.hero-stat{text-align:center}.hero-stat strong{display:block;font-family:'Cormorant',serif;font-size:32px;font-weight:300;color:var(--white);line-height:1}.hero-stat span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,249,247,.4);display:block;margin-top:5px}
/* ── SECTIONS ── */section{padding:112px 0}.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-weight:400}h2{font-family:'Cormorant',serif;font-size:clamp(38px,5vw,64px);font-weight:300;line-height:1.05;letter-spacing:-.01em;color:var(--black)}.section-sub{font-size:13px;letter-spacing:.06em;line-height:2;color:var(--muted);max-width:400px;margin-top:16px}
/* HOW */.how{background:var(--cream)}.how-inner{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}.steps{display:flex;flex-direction:column;gap:0}.step{padding:32px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:48px 1fr;gap:24px;align-items:start}.step:first-child{border-top:1px solid var(--line)}.step-num{font-family:'Cormorant',serif;font-size:13px;color:var(--gold);letter-spacing:.06em;padding-top:3px}.step h3{font-family:'Cormorant',serif;font-size:24px;font-weight:400;color:var(--black);margin-bottom:8px;letter-spacing:-.01em}.step p{font-size:13px;color:var(--muted);line-height:1.9;letter-spacing:.02em}
/* EXPERIENCES */.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:56px}.exp-card{position:relative;overflow:hidden;cursor:pointer}.exp-card:hover .exp-overlay{opacity:1}.exp-card:hover .exp-img{transform:scale(1.04)}.exp-img{height:460px;transition:transform .6s ease;background-size:cover}.exp-img.dinner{background:linear-gradient(180deg,rgba(10,10,10,0) 30%,rgba(10,10,10,.75) 100%), linear-gradient(145deg,#2a1510,#8b1a1a 50%,#0a0a0a)}.exp-img.wine{background:linear-gradient(180deg,rgba(10,10,10,0) 30%,rgba(10,10,10,.75) 100%), linear-gradient(145deg,#1a0e05,#b8975a 50%,#0a0a0a)}.exp-img.picnic{background:linear-gradient(180deg,rgba(10,10,10,0) 30%,rgba(10,10,10,.75) 100%), linear-gradient(145deg,#0a1a0f,#2d7a5a 50%,#0a0a0a)}.exp-label{position:absolute;bottom:0;left:0;right:0;padding:28px 24px}.exp-label-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}.exp-label h3{font-family:'Cormorant',serif;font-size:26px;font-weight:300;color:var(--white);margin-bottom:4px}.exp-label p{font-size:12px;color:rgba(250,249,247,.6);letter-spacing:.04em}.exp-price-tag{position:absolute;top:22px;right:22px;background:rgba(10,10,10,.6);backdrop-filter:blur(8px);color:var(--white);font-size:12px;letter-spacing:.08em;padding:6px 14px;border:1px solid rgba(250,249,247,.15)}
/* PRICING */.pricing-section{background:var(--black)}.pricing-section h2{color:var(--white)}.pricing-section .section-sub{color:rgba(250,249,247,.45)}.pricing-section .eyebrow{color:var(--gold)}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(250,249,247,.08);margin-top:56px;border:1px solid rgba(250,249,247,.08)}.plan{background:var(--black);padding:48px 36px;display:flex;flex-direction:column;gap:28px;transition:background .3s}.plan:hover{background:#111}.plan.featured{background:#0f0f0f}.plan-tier{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:400}.plan-price{font-family:'Cormorant',serif;font-size:60px;font-weight:300;color:var(--white);line-height:1}.plan-price sup{font-size:24px;vertical-align:super}.plan-price sub{font-size:16px;font-family:'Jost',sans-serif;font-weight:300;color:rgba(250,249,247,.35);letter-spacing:.04em}.plan-desc{font-size:13px;color:rgba(250,249,247,.45);line-height:1.8;letter-spacing:.03em}.plan-line{height:1px;background:rgba(250,249,247,.08)}.plan ul{list-style:none;display:flex;flex-direction:column;gap:12px;flex:1}.plan ul li{font-size:12px;color:rgba(250,249,247,.55);display:flex;gap:12px;align-items:flex-start;letter-spacing:.04em;line-height:1.6}.plan ul li::before{content:'—';color:var(--gold);flex-shrink:0;font-size:11px;margin-top:1px}.btn-plan{font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;padding:14px 32px;border:none;cursor:pointer;transition:all .3s;text-align:center}.btn-plan-gold{background:var(--gold);color:var(--black)}.btn-plan-gold:hover{background:var(--gold2)}.btn-plan-ghost{background:transparent;color:rgba(250,249,247,.6);border:1px solid rgba(250,249,247,.2)}.btn-plan-ghost:hover{border-color:rgba(250,249,247,.5);color:var(--white)}
/* FORMS */.forms-section{background:var(--cream)}.forms-grid{display:grid;grid-template-columns:1fr 1px 1fr;gap:64px;align-items:start;margin-top:64px}.form-divider-v{background:var(--line)}.form-block h3{font-family:'Cormorant',serif;font-size:32px;font-weight:300;margin-bottom:10px;color:var(--black)}.form-block p{font-size:13px;color:var(--muted);margin-bottom:28px;line-height:1.9;letter-spacing:.03em}form{display:flex;flex-direction:column;gap:0}input,select,textarea{ width:100%;border:none;border-bottom:1px solid var(--line); padding:14px 0;outline:none;background:transparent; font-size:13px;color:var(--black);letter-spacing:.04em; transition:border-color .2s;margin-bottom:2px; font-family:'Jost',sans-serif;font-weight:300;}input:focus,select:focus,textarea:focus{border-color:var(--gold)}select{appearance:none;cursor:pointer}textarea{min-height:90px;resize:none;margin-top:12px}.form-note{font-size:11px;color:var(--muted);letter-spacing:.06em;margin-top:8px}.btn-form{ font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase; background:var(--black);color:var(--white); padding:16px 40px;border:none;cursor:pointer; transition:all .3s;margin-top:28px;width:100%;}.btn-form:hover{background:#222}.btn-form-outline{background:transparent;color:var(--black);border:1px solid var(--black)}.btn-form-outline:hover{background:var(--black);color:var(--white)}
/* CTA */.cta-section{background:var(--black);padding:120px 0}.cta-inner{text-align:center;max-width:640px;margin:0 auto}.cta-rule{width:40px;height:1px;background:var(--gold);margin:0 auto 32px;opacity:.7}.cta-inner h2{color:var(--white);font-size:clamp(42px,6vw,78px);margin-bottom:24px}.cta-inner p{font-size:13px;color:rgba(250,249,247,.45);letter-spacing:.08em;line-height:2;margin-bottom:44px;text-transform:uppercase}
/* FOOTER */footer{background:var(--black);padding:48px 0;border-top:1px solid rgba(250,249,247,.06)}.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.footer-logo{font-family:'Jost',sans-serif;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,249,247,.4)}.footer-logo span{color:var(--gold)}.footer-copy{font-size:11px;color:rgba(250,249,247,.25);letter-spacing:.1em;text-transform:uppercase}.footer-links{display:flex;gap:28px}.footer-links a{font-size:11px;color:rgba(250,249,247,.3);letter-spacing:.1em;text-transform:uppercase;transition:color .2s}.footer-links a:hover{color:rgba(250,249,247,.7)}
/* TOAST */.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:var(--black);color:var(--white);padding:14px 28px;opacity:0;pointer-events:none;transition:.25s ease;z-index:100;font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(250,249,247,.15)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:860px){ .how-inner{grid-template-columns:1fr} .exp-grid{grid-template-columns:1fr} .exp-img{height:300px} .plans{grid-template-columns:1fr} .forms-grid{grid-template-columns:1fr;gap:48px} .form-divider-v{display:none} .nav-links{display:none} .hero-footer{gap:28px} .container{width:calc(100% - 40px)}}</style></head><body>
<!-- NAV --><header id="hdr"> <div class="container nav"> <div class="nav-logo">Tog<span>r</span>t</div> <nav class="nav-links"> <a href="#how">Maison</a> <a href="#experiences">Experiences</a> <a href="#membership">Membership</a> <a href="#partners">Partners</a> </nav> <a class="btn-nav" href="#waitlist">Join</a> </div></header>
<!-- HERO --><section class="hero" id="top"> <div class="hearts-bg" id="heartsBg"></div> <div style="position:relative;z-index:1"> <div class="hero-rule"></div> <div class="hero-eyebrow">Maison Togtr — Est. 2026</div> <h1>Never<br/>Stop<br/><em>Dating.</em></h1> <p class="hero-sub">For couples who believe love is a practice — not a destination.</p> <div class="hero-actions"> <button class="btn-gold" onclick="document.getElementById('waitlist').scrollIntoView({behavior:'smooth'})">Join the Waitlist</button> <button class="btn-outline-light" onclick="document.getElementById('experiences').scrollIntoView({behavior:'smooth'})">Explore Experiences</button> </div> </div> <div class="hero-footer"> <div class="hero-stat"><strong>Free</strong><span>To Begin</span></div> <div class="hero-stat"><strong>Local</strong><span>Partners</span></div> <div class="hero-stat"><strong>Always</strong><span>Intentional</span></div> </div></section>
<!-- HOW --><section class="how" id="how"> <div class="container how-inner"> <div> <div class="eyebrow">The Practice</div> <h2>A ritual,<br/>not a<br/>reminder.</h2> <p class="section-sub">Togtr is built for couples who already chose each other — and want to keep making that choice, beautifully.</p> </div> <div class="steps"> <div class="step"> <div class="step-num">I</div> <div> <h3>Tell us about your person</h3> <p>Birthdays, anniversaries, shared passions. The details that make your relationship singular.</p> </div> </div> <div class="step"> <div class="step-num">II</div> <div> <h3>Receive curated inspiration</h3> <p>Thoughtful date ideas, intimate reminders, and surprise suggestions — all attuned to you.</p> </div> </div> <div class="step"> <div class="step-num">III</div> <div> <h3>Experience together</h3> <p>Access our network of partner restaurants, wineries, and curated experiences — often with exclusive member privileges.</p> </div> </div> </div> </div></section>
<!-- EXPERIENCES --><section id="experiences" style="padding:112px 0 0"> <div class="container"> <div class="eyebrow">Experiences</div> <h2>Curated for intimacy.</h2> <p class="section-sub">Each experience is selected for its ability to create lasting memory between two people.</p> </div> <div class="exp-grid" style="margin-top:48px"> <div class="exp-card"> <div class="exp-img dinner" style="height:460px"></div> <div class="exp-label"> <div class="exp-label-tag">Dinner</div> <h3>Table for Two</h3> <p>Candlelight, curated menus, champagne for members</p> </div> <div class="exp-price-tag">From $95</div> </div> <div class="exp-card"> <div class="exp-img wine" style="height:460px"></div> <div class="exp-label"> <div class="exp-label-tag">Wine & Spirits</div> <h3>The Wine Escape</h3> <p>Private tastings, scenic estates, couple packages</p> </div> <div class="exp-price-tag">From $120</div> </div> <div class="exp-card"> <div class="exp-img picnic" style="height:460px"></div> <div class="exp-label"> <div class="exp-label-tag">Premium</div> <h3>Styled Picnic</h3> <p>Florals, candles, gourmet fare — fully arranged</p> </div> <div class="exp-price-tag">From $185</div> </div> </div></section>
<!-- PRICING --><section class="pricing-section" id="membership"> <div class="container"> <div class="eyebrow">Membership</div> <h2>Three tiers.<br/>One intention.</h2> <p class="section-sub">Begin free. Deepen when you're ready.</p> <div class="plans"> <div class="plan"> <div class="plan-tier">Free</div> <div class="plan-price">$0</div> <div class="plan-desc">For couples beginning their Togtr journey.</div> <div class="plan-line"></div> <ul> <li>Partner profile & key dates</li> <li>Monthly date suggestions</li> <li>Anniversary reminders</li> <li>Browse partner venues</li> </ul> <button class="btn-plan btn-plan-ghost" onclick="document.getElementById('waitlist').scrollIntoView({behavior:'smooth'})">Begin</button> </div> <div class="plan featured"> <div class="plan-tier">Spark</div> <div class="plan-price"><sup></sup>$59<sub> / year</sub></div> <div class="plan-desc">For couples who want to date with intention, weekly.</div> <div class="plan-line"></div> <ul> <li>Everything in Free</li> <li>Weekly curated date ideas</li> <li>Surprise date night alerts</li> <li>Exclusive member discounts</li> <li>Special event access</li> </ul> <button class="btn-plan btn-plan-gold" onclick="document.getElementById('waitlist').scrollIntoView({behavior:'smooth'})">Early Access</button> </div> <div class="plan"> <div class="plan-tier">Flame</div> <div class="plan-price"><sup></sup>$29<sub> / mo</sub></div> <div class="plan-desc">Concierge-level planning for the couple who wants everything.</div> <div class="plan-line"></div> <ul> <li>Everything in Spark</li> <li>Concierge date planning</li> <li>Premium partner offers</li> <li>Quarterly date plan</li> <li>VIP event access</li> </ul> <button class="btn-plan btn-plan-ghost" onclick="document.getElementById('waitlist').scrollIntoView({behavior:'smooth'})">Notify Me</button> </div> </div> </div></section>
<!-- FORMS --><section class="forms-section" id="waitlist"> <div class="container"> <div class="eyebrow">Connect</div> <h2>Let's begin.</h2> <div class="forms-grid"> <div class="form-block"> <h3>Join the waitlist</h3> <p>Early members receive founding pricing and first access to every partner experience we launch.</p> <form id="waitlistForm" name="waitlist" method="POST" data-netlify="true"> <input type="hidden" name="form-name" value="waitlist"/> <input name="name" placeholder="Your name" required/> <input name="email" type="email" placeholder="Email address" required/> <input name="city" placeholder="City"/> <select name="interest"> <option value="">Area of interest</option> <option>Date ideas & reminders</option> <option>Restaurant & winery access</option> <option>Anniversary planning</option> <option>Partnering with Togtr</option> </select> <button class="btn-form" type="submit">Reserve Your Place</button> <p class="form-note">No correspondence beyond your invitation.</p> </form> </div> <div class="form-divider-v"></div> <div class="form-block" id="partners"> <h3>Partner with us</h3> <p>We select partners for the quality of experience they provide. Restaurants, wineries, spas, and curated venues are welcome to apply.</p> <form id="partnerForm" name="partners" method="POST" data-netlify="true"> <input type="hidden" name="form-name" value="partners"/> <input name="business" placeholder="Establishment name" required/> <input name="contact" placeholder="Contact name" required/> <input name="email" type="email" placeholder="Email address" required/> <select name="type"> <option value="">Category</option> <option>Restaurant</option><option>Winery</option><option>Spa</option> <option>Experience provider</option><option>Hotel / Resort</option><option>Event venue</option> </select> <textarea name="offer" placeholder="Describe the experience you would offer Togtr members."></textarea> <button class="btn-form btn-form-outline" type="submit">Submit Application</button> </form> </div> </div> </div></section>
<!-- CTA --><section class="cta-section"> <div class="container"> <div class="cta-inner"> <div class="cta-rule"></div> <h2>Love is a<br/><em>practice.</em></h2> <p>Begin yours with Togtr — and never stop dating the one you love.</p> <button class="btn-gold" style="font-size:11px;letter-spacing:.2em" onclick="document.getElementById('waitlist').scrollIntoView({behavior:'smooth'})">Join Togtr</button> </div> </div></section>
<!-- FOOTER --><footer> <div class="container footer-inner"> <div class="footer-logo">Tog<span>r</span>t</div> <div class="footer-copy">© 2026 — Never Stop Dating</div> <div class="footer-links"> <a href="#">togtr.co</a> <a href="mailto:hello@togtr.co">Contact</a> </div> </div></footer>
<div class="toast" id="toast"></div>
<script>const hdr = document.getElementById('hdr');window.addEventListener('scroll', () => hdr.classList.toggle('scrolled', window.scrollY > 40));
// Floating hearts — subtle, slow, luxuryconst bg = document.getElementById('heartsBg');for (let i = 0; i < 14; i++) { const h = document.createElement('span'); h.className = 'hrt'; h.textContent = ' '; const sz = 10 + Math.random() * 14; h.style.cssText = ` left:${Math.random()*100}%; font-size:${sz}px; color:${Math.random()>.6 ? '#b8975a' : '#faf9f7'}; animation-duration:${14+Math.random()*18}s; animation-delay:${Math.random()*16}s; `; bg.appendChild(h);}
const toast = document.getElementById('toast');function showToast(msg) { toast.textContent = msg; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2800);}document.querySelectorAll('form').forEach(f => f.addEventListener('submit', function(e) { e.preventDefault(); showToast("Received — we'll be in touch"); f.reset(); }));</script></body></html>
