<!doctype html>

<head>

<title>Vyira — A New Era of Luxury</title>

<style>

:root {

--bg-dark: #0b0b0f;

--bg-darker: #08080b;

--text: #e7e7ea;

--muted: #a9a9b3;

--gold: #d4af37;

--gold-2: #f2d57e;

--card: #121217cc; /* translucent */

--ring: #ffffff1a;

--success: #7ef2b2;

--error: #ff8a8a;

}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {

margin: 0;

color: var(--text);

font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

background: radial-gradient(1200px 800px at 75% 15%, #1d1d22 0%, var(--bg-dark) 55%),

radial-gradient(800px 600px at 20% 80%, #15151a 0%, var(--bg-darker) 60%),

linear-gradient(180deg, #0c0c10, #0a0a0d);

overflow-x: hidden;

}

/* Subtle animated gold shimmer */

.shimmer {

position: fixed; inset: 0; pointer-events: none;

background: conic-gradient(from 0deg at 50% 50%, #0000 0 10%, #ffffff08 11% 13%, #0000 14% 100%);

mix-blend-mode: overlay;

animation: spin 16s linear infinite;

filter: blur(2px);

}

@keyframes spin { to { transform: rotate(1turn); } }

.container {

max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px;

}

header {

display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 24px;

border-bottom: 1px solid var(--ring);

}

.logo {

display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text);

letter-spacing: 0.18em;

}

.logo-mark {

width: 36px; height: 36px; border-radius: 50%;

background: radial-gradient(100% 100% at 30% 30%, var(--gold-2), var(--gold));

box-shadow: 0 0 0 1px #2b2b2f, 0 10px 30px #00000066, inset 0 1px 0 #ffffff33;

}

.logo-text {

font-family: "Playfair Display", serif; font-weight: 700; font-size: 20px;

}

.nav { display: flex; gap: 18px; }

.nav a { color: var(--muted); text-decoration: none; font-size: 14px; }

.nav a:hover { color: var(--text); }

.hero {

display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center; padding: 56px 0 24px;

}

@media (max-width: 900px) {

.hero { grid-template-columns: 1fr; padding-top: 32px; }

}

.headline {

font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(34px, 5vw, 64px);

letter-spacing: 0.02em; line-height: 1.05; margin: 0 0 12px;

background: linear-gradient(180deg, #fff, #cfcfe0 55%, #9a9ab0);

-webkit-background-clip: text; background-clip: text; color: transparent;

}

.tagline { color: var(--muted); font-size: clamp(16px, 2.2vw, 18px); line-height: 1.6; margin: 0 0 28px; }

.badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: #141419; border: 1px solid var(--ring); color: #cfcfe0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 0 0 1px #3a2a00aa; }

.card {

background: var(--card); border: 1px solid var(--ring); border-radius: 20px; padding: 24px; backdrop-filter: blur(8px);

box-shadow: 0 10px 30px #00000066, inset 0 1px 0 #ffffff14;

}

.form { display: flex; gap: 12px; margin-top: 8px; }

.form input[type="email"] {

flex: 1; padding: 14px 16px; border-radius: 14px; border: 1px solid #2a2a32; background: #0f0f14; color: var(--text);

outline: none; transition: box-shadow .2s, border-color .2s;

}

.form input[type="email"]:focus { border-color: var(--gold-2); box-shadow: 0 0 0 4px #d4af3722; }

/* Honeypot field (hidden from humans) */

.hp { position: absolute; left: -9999px; }

.btn {

padding: 14px 18px; border-radius: 14px; border: 0; cursor: pointer; font-weight: 600; letter-spacing: 0.04em;

background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1b1b1f; box-shadow: 0 6px 18px #d4af3730, inset 0 1px 0 #fff5;

}

.btn:hover { filter: brightness(1.04); transform: translateY(-1px); }

.side-visual {

position: relative; min-height: 380px; border-radius: 20px; overflow: hidden; border: 1px solid var(--ring);

background:

radial-gradient(120px 80px at 20% 30%, #ffffff0a, #0000 70%),

radial-gradient(200px 140px at 70% 60%, #ffffff0a, #0000 70%),

linear-gradient(135deg, #111114, #0b0b0f 45% 55%, #0d0d12);

}

.silk {

position: absolute; inset: 0; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800"><defs><linearGradient id="g" x1="0" x2="1"><stop stop-color="%23d4af37" offset="0"/><stop stop-color="%23f2d57e" offset="1"/></linearGradient></defs><path d="M0,560 C200,440 400,620 600,540 C800,460 1000,520 1200,460 L1200,800 L0,800 Z" fill="url(%23g)" opacity="0.16"/></svg>') center/cover no-repeat; filter: blur(12px); mix-blend-mode: screen; animation: float 12s ease-in-out infinite alternate; }

@keyframes float { 50% { transform: translateY(-6px) scale(1.01); } }

.phrases { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 28px; }

.phrase { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--ring); background: #0f0f1455; color: #d6d6de; font-size: 14px; }

@media (max-width: 900px) { .phrases { grid-template-columns: 1fr; } }

footer { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ring); padding-top: 20px; color: var(--muted); font-size: 13px; }

.social { display: flex; gap: 12px; }

.social a { display: inline-flex; padding: 10px; border: 1px solid var(--ring); border-radius: 12px; color: var(--muted); text-decoration: none; }

.social a:hover { color: var(--text); border-color: #3a3a45; }

.alert { display: none; margin-top: 12px; font-size: 14px; }

.alert.show { display: block; }

</style>

</head>

<body>

<span class="logo-text">VYIRA</span>

</a>

<a href="#story">Story</a>

<a href="#contact">Contact</a>

</nav>

</header>

<div class="badge"><span class="badge-dot"></span> COMING SOON</div>

<h1 class="headline">A New Era of Luxury</h1>

<p class="tagline">Crafted for the discerning few. Where innovation meets timeless elegance. Join the inner circle for early access to Vyira’s premiere.</p>

<label class="hp" for="company">Company</label>

<button class="btn" type="submit">Join the Inner Circle</button>

</form>

</div>

<div class="phrase">Finely tuned. Uncompromising by design.</div>

<div class="phrase">Materials elevated to art.</div>

<div class="phrase">Limited availability. Infinite presence.</div>

</div>

</section>

</aside>

</main>

</a>

</a>

</a>

</div>

</footer>

</div>

// Replace with your Google Apps Script (or other) endpoint if you want in-page email capture

const FORM_ENDPOINT = ""; // e.g. https://script.google.com/macros/s/AKfy.../exec

const f = document.getElementById('joinForm');

const alertBox = document.getElementById('formAlert');

const year = document.getElementById('year');

year.textContent = new Date().getFullYear();

f.addEventListener('submit', async (e) => {

e.preventDefault();

// Honeypot: if filled, treat as bot

if (document.getElementById('company').value.trim() !== '') {

showAlert('Thanks!');

return;

}

const email = document.getElementById('email').value.trim();

if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {

showAlert('Please enter a valid email.', true);

return;

}

if (!FORM_ENDPOINT) {

// Fallback: open mail client if endpoint not configured

window.location.href = `mailto:hello@vyira.example?subject=Early%20Access&body=Please%20add%20me%20(${encodeURIComponent(email)})`;

showAlert('Opening your email app…');

f.reset();

return;

}

try {

const res = await fetch(FORM_ENDPOINT, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ email, ts: Date.now() })

});

if (res.ok) {

showAlert('You\'re on the list. Welcome to Vyira.', false, true);

f.reset();

} else {

showAlert('Something went wrong. Please try again.', true);

}

} catch (err) {

showAlert('Network error. Try again later.', true);

}

});

function showAlert(msg, isError = false, isSuccess = false) {

alertBox.textContent = msg;

alertBox.className = 'alert show';

alertBox.style.color = isError ? 'var(--error)' : (isSuccess ? 'var(--success)' : 'var(--muted)');

}

</script>

</body>

</html>