<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1" />

<title>Demo Page – Goldcast Embed</title>

<style>

:root { --max: 1100px; --pad: 24px; --bg: #0b1020; --card:#121a33; --text:#e7eaf3; }

body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background: var(--bg); color: var(--text); }

header { position: sticky; top: 0; background: rgba(11,16,32,.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.nav { display:flex; align-items:center; justify-content:space-between; height:64px; }

.hero { padding: 56px 0 28px; }

.grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 24px; }

.card { background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 18px; }

.embed { aspect-ratio: 16/9; width: 100%; border: 0; border-radius: 14px; background:#000; }

footer { padding: 36px 0; opacity:.8; }

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

</style>

</head>

<body>

<header>

<div class="wrap nav">

<div style="font-weight:700;">DemoCo</div>

<div style="display:flex; gap:14px; opacity:.9;">

<span>Product</span><span>Customers</span><span>Pricing</span>

</div>

</div>

</header>


<main class="wrap">

<section class="hero">

<h1 style="margin:.2em 0;">Virtual event experience</h1>

<p style="max-width: 60ch; opacity:.9;">Static mock page to test embed placement, responsiveness, and scroll behavior.</p>

</section>


<section class="grid">

<div class="card">

<h2 style="margin-top:0;">Event</h2>


<!-- Replace this with your Goldcast embed code -->

<iframe class="embed" src="ABOUT:BLANK" title="Goldcast Event"></iframe>


<p style="opacity:.85;">Notes: test sticky header overlap, mobile layout, and container sizing.</p>

</div>


<aside class="card">

<h3 style="margin-top:0;">Sidebar</h3>

<p style="opacity:.85;">Add realistic elements that might interfere with the embed:</p>

<ul style="opacity:.85;">

<li>CTA buttons</li>

<li>Testimonials</li>

<li>Chat widget spacing</li>

</ul>

</aside>

</section>


<footer>

<div>© DemoCo — not a real site</div>

</footer>

</main>

</body>

</html>