Spaces:

CompactAI-O
/

Tiny-model-golf

Running

App Files Files Community

CompactAI commited on 3 days ago

Commit

a759e31

verified ·

1 Parent(s): 812487b

Upload 3 files

Browse files

Files changed (2) hide show

compact.webp +0 -0
index.html +759 -219

compact.webp ADDED Viewed

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Model Golf | FMN-GPT</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=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
@@ -29,7 +29,7 @@
         --gold-gradient: linear-gradient(135deg, #ffd633 0%, #c8960c 50%, #a0760a 100%);
         --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
         --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
-        --container-max: 1100px;
     }
     * { box-sizing: border-box; margin: 0; padding: 0; }
     html { font-size: 16px; scroll-behavior: smooth; }
@@ -39,7 +39,6 @@
         color: var(--white-muted);
         line-height: 1.7;
         -webkit-font-smoothing: antialiased;
-        position: relative;
     }
     body::before {
         content: '';
@@ -65,70 +64,216 @@
         background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
         background-size: 256px 256px;
     }
-    a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
     a:hover { color: var(--accent); }
-    .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
-    @keyframes fadeSlideUp {
-        from { opacity: 0; transform: translateY(24px); }
-        to { opacity: 1; transform: translateY(0); }
     }
-    @keyframes fadeSlideUpScroll {
-        from { opacity: 0; transform: translateY(30px); }
-        to { opacity: 1; transform: translateY(0); }
     }
-    @keyframes pulse {
-        0%, 100% { opacity: 1; transform: scale(1); }
-        50% { opacity: 0.4; transform: scale(0.9); }
     }
-    @keyframes goldShimmer {
-        0% { background-position: -200% center; }
-        100% { background-position: 200% center; }
     }
-    @keyframes borderGlow {
-        0%, 100% { border-color: rgba(200, 150, 12, 0.2); box-shadow: 0 0 20px rgba(200, 150, 12, 0.02); }
-        50% { border-color: rgba(200, 150, 12, 0.5); box-shadow: 0 0 40px rgba(200, 150, 12, 0.08); }
     }
-    @keyframes shimmerSweep {
-        0% { transform: translateX(-100%); }
-        100% { transform: translateX(100%); }
     }
-    .reveal {
         opacity: 0;
-        transform: translateY(30px);
-        transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
     }
-    .reveal.visible {
         opacity: 1;
-        transform: translateY(0);
     }
-    .reveal-delay-1 { transition-delay: 0.1s; }
-    .reveal-delay-2 { transition-delay: 0.2s; }
-    .reveal-delay-3 { transition-delay: 0.3s; }
-    .reveal-delay-4 { transition-delay: 0.4s; }
-    nav {
         position: fixed;
-        top: 0; left: 0; right: 0;
-        z-index: 100;
-        background: rgba(0, 0, 0, 0.85);
-        backdrop-filter: blur(12px);
-        border-bottom: 1px solid var(--blue-600);
-        padding: 16px 0;
     }
-    nav .container { display: flex; justify-content: space-between; align-items: center; }
-    .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
-    .nav-brand span { color: var(--accent); }
-    .nav-links { display: flex; gap: 32px; }
-    .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
-    .nav-links a:hover { color: var(--white); }
     .hero {
         min-height: 100vh;
         display: flex;
         flex-direction: column;
         justify-content: center;
-        padding: 140px 0 80px;
         position: relative;
         overflow: hidden;
     }
@@ -140,8 +285,38 @@
             radial-gradient(ellipse 100% 60% at 50% -20%, rgba(200, 150, 12, 0.08), transparent),
             radial-gradient(ellipse 60% 50% at 80% 80%, rgba(200, 150, 12, 0.04), transparent);
         pointer-events: none;
     }
-    .hero-content { position: relative; z-index: 1; }
     .hero-badge {
         display: inline-flex;
         align-items: center;
@@ -156,13 +331,13 @@
         letter-spacing: 0.08em;
         margin-bottom: 32px;
         opacity: 0;
-        animation: fadeSlideUp 0.8s ease 0.1s forwards;
     }
     .hero-badge .dot {
         width: 6px; height: 6px;
         background: var(--accent-bright);
         border-radius: 50%;
-        animation: pulse 2s infinite;
     }
     .hero h1 {
         font-size: clamp(64px, 12vw, 120px);
@@ -171,7 +346,7 @@
         letter-spacing: -0.04em;
         margin-bottom: 16px;
         opacity: 0;
-        animation: fadeSlideUp 0.8s ease 0.2s forwards;
     }
     .hero h1 .highlight {
         background: linear-gradient(135deg, #ffd633, #c8960c, #ffd633);
@@ -179,42 +354,52 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
-        animation: goldShimmer 4s linear infinite;
-    }
-    .hero h1 {
-        perspective: 800px;
-    }
-    .hero h1 .highlight {
-        display: inline-block;
     }
     .hero-subtitle {
-        font-size: clamp(18px, 2.5vw, 24px);
         color: var(--blue-200);
-        max-width: 640px;
         margin-bottom: 48px;
-        line-height: 1.5;
         opacity: 0;
-        animation: fadeSlideUp 0.8s ease 0.3s forwards;
     }
     .hero-cta {
         display: flex;
         gap: 16px;
         flex-wrap: wrap;
         margin-bottom: 80px;
         opacity: 0;
-        animation: fadeSlideUp 0.8s ease 0.4s forwards;
     }
     .btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        padding: 14px 28px;
         font-size: 15px;
         font-weight: 500;
         border-radius: 8px;
-        transition: all 0.15s ease;
         cursor: pointer;
         font-family: var(--font-sans);
     }
     .btn-primary {
         background: linear-gradient(135deg, #ffd633, #c8960c, #ffd633);
@@ -222,12 +407,11 @@
         color: var(--blue-900);
         border: none;
         font-weight: 600;
-        animation: goldShimmer 4s linear infinite;
-        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
     }
     .btn-primary:hover {
-        transform: translateY(-3px) scale(1.02);
-        box-shadow: 0 12px 40px rgba(200, 150, 12, 0.35);
     }
     .btn-secondary {
         background: transparent;
@@ -237,7 +421,7 @@
     .btn-secondary:hover {
         border-color: var(--accent);
         color: var(--white);
-        transform: translateY(-2px);
     }
     .hero-stats {
@@ -245,7 +429,7 @@
         grid-template-columns: repeat(4, 1fr);
         gap: 16px;
         opacity: 0;
-        animation: fadeSlideUp 0.8s ease 0.5s forwards;
     }
     .hero-stat {
         background: rgba(10, 10, 10, 0.8);
@@ -253,25 +437,25 @@
         border-radius: 12px;
         padding: 28px 16px;
         text-align: center;
-        transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
     }
-    .hero-stat:hover {
-        border-color: rgba(200, 150, 12, 0.4);
-        transform: translateY(-4px);
-        box-shadow: 0 8px 30px rgba(200, 150, 12, 0.08);
-    }
     .hero-stat::before {
         content: '';
         position: absolute;
-        top: 0; left: 0; right: 0;
-        height: 2px;
-        background: var(--gold-gradient);
         opacity: 0;
-        transition: opacity 0.3s ease;
     }
     .hero-stat:hover::before { opacity: 1; }
     .hero-stat .number {
         font-size: clamp(32px, 4vw, 48px);
         font-weight: 700;
@@ -283,15 +467,17 @@
         font-family: var(--font-mono);
         line-height: 1.1;
         margin-bottom: 6px;
-        animation: goldShimmer 5s linear infinite;
     }
-    .hero-stat .label { font-size: 13px; color: var(--blue-200); font-weight: 500; }
-    .hero-stat .sublabel { font-size: 11px; color: var(--blue-300); margin-top: 4px; }
     .section {
-        padding: 80px 0;
         position: relative;
-        z-index: 1;
     }
     .section.alt {
         background: var(--blue-800);
@@ -300,7 +486,7 @@
     }
     .section-header {
         text-align: center;
-        margin-bottom: 48px;
     }
     .section-header h2 {
         font-size: 36px;
@@ -316,7 +502,7 @@
         margin: 0 auto;
     }
     .section-body {
-        max-width: 720px;
         margin: 0 auto;
     }
     .section-body p {
@@ -329,35 +515,43 @@
     .two-col {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        gap: 24px;
         margin: 0 auto;
-        max-width: 900px;
     }
     .col-card {
         background: var(--blue-800);
         border: 1px solid var(--blue-600);
         border-radius: 12px;
         padding: 32px;
-        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
         position: relative;
         overflow: hidden;
     }
     .col-card::after {
         content: '';
         position: absolute;
         top: 0; left: -100%;
         width: 100%; height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(200, 150, 12, 0.03), transparent);
-        transition: left 0.6s ease;
         pointer-events: none;
     }
-    .col-card:hover::after {
-        left: 100%;
-    }
     .col-card:hover {
         border-color: rgba(200, 150, 12, 0.35);
-        transform: translateY(-3px);
-        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
     }
     .col-card h3 {
         font-size: 20px;
@@ -367,18 +561,10 @@
         display: flex;
         align-items: center;
         gap: 10px;
     }
-    .col-card h3 .icon {
-        width: 32px; height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 18px;
-    }
-    .col-card ul {
-        list-style: none;
-        padding: 0;
-    }
     .col-card li {
         padding: 10px 0;
         border-bottom: 1px solid var(--blue-600);
@@ -391,12 +577,66 @@
     .col-card li:last-child { border-bottom: none; }
     .col-card li .check { color: var(--accent); font-weight: 700; flex-shrink: 0; }
     .rules-card {
         background: var(--blue-800);
         border: 1px solid var(--blue-600);
         border-radius: 12px;
         padding: 32px;
-        max-width: 720px;
         margin: 0 auto;
         transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
         animation: borderGlow 4s ease-in-out infinite;
@@ -408,6 +648,8 @@
         padding: 14px 0;
         border-bottom: 1px solid var(--blue-600);
         gap: 12px;
     }
     .rules-card .rule-row:last-child { border-bottom: none; }
     .rules-card .rule-icon { color: var(--accent); font-weight: 700; width: 20px; text-align: center; flex-shrink: 0; }
@@ -421,46 +663,46 @@
         margin-top: 16px;
         padding-top: 16px;
         border-top: 1px solid var(--blue-600);
     }
     .how-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        gap: 20px;
-        max-width: 900px;
         margin: 0 auto;
     }
     .how-step {
         background: var(--blue-800);
         border: 1px solid var(--blue-600);
         border-radius: 12px;
-        padding: 32px 24px;
         text-align: center;
-        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
         position: relative;
         overflow: hidden;
     }
-    .how-step::after {
         content: '';
         position: absolute;
-        top: 0; left: -100%;
-        width: 100%; height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(200, 150, 12, 0.03), transparent);
-        transition: left 0.6s ease;
         pointer-events: none;
     }
-    .how-step:hover::after {
-        left: 100%;
-    }
     .how-step:hover {
         border-color: rgba(200, 150, 12, 0.35);
-        transform: translateY(-4px);
-        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
     }
     .how-step .step-num {
-        width: 40px; height: 40px;
         border-radius: 50%;
-        background: var(--gold-gradient);
         color: var(--blue-900);
         font-weight: 700;
         font-size: 16px;
@@ -468,15 +710,89 @@
         align-items: center;
         justify-content: center;
         margin: 0 auto 16px;
     }
-    .how-step h4 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 10px; }
-    .how-step p { font-size: 14px; color: var(--blue-200); line-height: 1.6; margin: 0; }
     .cta-section {
-        padding: 100px 0;
         text-align: center;
         position: relative;
         overflow: hidden;
     }
     .cta-section::before {
         content: '';
@@ -494,9 +810,11 @@
     }
     .cta-section h2 .highlight {
         background: var(--gold-gradient);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
     }
     .cta-section p {
         font-size: 18px;
@@ -511,23 +829,38 @@
         flex-wrap: wrap;
     }
     footer {
         padding: 60px 0;
         background: var(--blue-800);
         border-top: 1px solid var(--blue-600);
         text-align: center;
         position: relative;
-        z-index: 1;
     }
     footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
     footer a { color: var(--blue-200); }
     footer a:hover { color: var(--accent); }
     @media (max-width: 768px) {
         .hero-stats { grid-template-columns: repeat(2, 1fr); }
         .two-col { grid-template-columns: 1fr; }
         .how-grid { grid-template-columns: 1fr; }
-        .nav-links { display: none; }
         .hero h1 { font-size: clamp(40px, 15vw, 64px); }
         .cta-section h2 { font-size: 32px; }
         .rules-card .rule-row { flex-wrap: wrap; gap: 4px; }
@@ -537,148 +870,161 @@
 </head>
 <body>
-<nav>
-    <div class="container">
-        <a href="https://compactai-o-homepage.static.hf.space/" class="nav-brand"><span>/</span>FMN-GPT</a>
-        <div class="nav-links">
-            <a href="https://compactai-o-homepage.static.hf.space/blog.html">Blog</a>
-            <a href="https://compactai-o-homepage.static.hf.space/status.html">Model Status</a>
-            <a href="https://huggingface.co/CompactAI-O" target="_blank">HuggingFace Org</a>
-        </div>
-    </div>
-</nav>
-<main>
-    <section class="hero">
         <div class="container hero-content">
-            <div class="hero-badge">
-                <span class="dot"></span>
                 Monthly Competition &mdash; Open To Everyone
             </div>
-            <h1>Model <span class="highlight">Golf</span></h1>
-            <p class="hero-subtitle">Build the best language model under 100 million parameters. Minimum 1028-token context. Winner receives $50 in RunPod credits. Open source only. Monthly rounds.</p>
-            <div class="hero-cta">
                 <a href="#rules" class="btn btn-primary">View Rules</a>
                 <a href="#participate" class="btn btn-secondary">How To Join</a>
-                <a href="https://discord.gg/y2jTct6Cxv" target="_blank" class="btn btn-secondary">Join Discord</a>
             </div>
-            <div class="hero-stats">
-                <div class="hero-stat">
-                    <div class="number">&lt;100M</div>
                     <div class="label">Parameter Limit</div>
                     <div class="sublabel">Strict upper bound</div>
                 </div>
-                <div class="hero-stat">
-                    <div class="number">1028+</div>
                     <div class="label">Context Window</div>
                     <div class="sublabel">Minimum tokens</div>
                 </div>
-                <div class="hero-stat">
-                    <div class="number">$50</div>
                     <div class="label">RunPod Credits</div>
                     <div class="sublabel">Monthly prize</div>
                 </div>
-                <div class="hero-stat">
-                    <div class="number">30d</div>
-                    <div class="label">Competition Cycle</div>
-                    <div class="sublabel">Monthly rounds</div>
                 </div>
             </div>
         </div>
     </section>
-    <section class="section reveal" id="what">
         <div class="container">
             <div class="section-header">
-                <h2>What It Is</h2>
             </div>
             <div class="two-col">
-                <div class="col-card">
-                    <h3><span class="icon">&#x2713;</span>What Model Golf <em style="font-style: normal; color: var(--white);">Is</em></h3>
-                    <ul>
-                        <li><span class="check">&#x2713;</span> A monthly parameter-efficiency competition</li>
-                        <li><span class="check">&#x2713;</span> Open to anyone, anywhere</li>
-                        <li><span class="check">&#x2713;</span> Fully custom architectures allowed</li>
-                        <li><span class="check">&#x2713;</span> Novel tokenization &amp; training schemes welcome</li>
-                        <li><span class="check">&#x2713;</span> Open source by design</li>
-                        <li><span class="check">&#x2713;</span> $50 RunPod credits to the winner</li>
                     </ul>
                 </div>
-                <div class="col-card">
-                    <h3><span class="icon" style="color: var(--blue-400);">&#x2717;</span>What It Is <em style="font-style: normal; color: var(--blue-400);">Not</em></h3>
-                    <ul>
-                        <li><span class="check" style="color: var(--blue-400);">&#x2717;</span> Not a Kaggle-style dataset contest</li>
-                        <li><span class="check" style="color: var(--blue-400);">&#x2717;</span> Not restricted to existing architectures</li>
-                        <li><span class="check" style="color: var(--blue-400);">&#x2717;</span> Not limited by llama.cpp compatibility</li>
-                        <li><span class="check" style="color: var(--blue-400);">&#x2717;</span> Not a fixed-benchmark leaderboard</li>
-                        <li><span class="check" style="color: var(--blue-400);">&#x2717;</span> Not for closed-source submissions</li>
                     </ul>
                 </div>
             </div>
         </div>
     </section>
-    <section class="section reveal reveal-delay-1" id="rules">
         <div class="container">
             <div class="section-header">
-                <h2>The Rules</h2>
                 <p>Simple and clear. Complexity discourages participation.</p>
             </div>
-            <div class="rules-card">
                 <div class="rule-row">
-                    <span class="rule-icon">&#x2713;</span>
                     <span class="rule-label">License</span>
                     <span class="rule-desc">MIT, GPL, Apache, or AGPL (any version)</span>
                 </div>
                 <div class="rule-row">
-                    <span class="rule-icon">&#x2713;</span>
                     <span class="rule-label">Parameters</span>
                     <span class="rule-desc">Must be smaller than 100 million</span>
                 </div>
                 <div class="rule-row">
-                    <span class="rule-icon">&#x2713;</span>
                     <span class="rule-label">Context</span>
                     <span class="rule-desc">Minimum 1028 tokens</span>
                 </div>
                 <div class="rule-row">
-                    <span class="rule-icon">&#x2713;</span>
                     <span class="rule-label">Platform</span>
                     <span class="rule-desc">No requirement for llama.cpp compatibility</span>
                 </div>
                 <div class="rule-row">
-                    <span class="rule-icon">&#x2713;</span>
                     <span class="rule-label">AI Assistance</span>
                     <span class="rule-desc">Up to 45% of work can be AI-generated</span>
                 </div>
                 <div class="rule-row">
-                    <span class="rule-icon">&#x2713;</span>
                     <span class="rule-label">Submission</span>
                     <span class="rule-desc">Open source repository with documentation</span>
                 </div>
-                <div class="rules-tagline"># Simple. Clear. Enforceable.</div>
             </div>
         </div>
     </section>
-    <section class="section alt reveal reveal-delay-2" id="participate">
         <div class="container">
             <div class="section-header">
-                <h2>How To Join</h2>
-                <p>The first competition launches soon. Here is how it will work.</p>
             </div>
             <div class="how-grid">
-                <div class="how-step">
-                    <div class="step-num">1</div>
                     <h4>Build</h4>
                     <p>Create a language model under 100M parameters with at least 1028-token context. Any architecture. Any approach.</p>
                 </div>
-                <div class="how-step">
-                    <div class="step-num">2</div>
                     <h4>Document</h4>
                     <p>Open source your repository with full documentation. Include parameter count, context window, and approach summary.</p>
                 </div>
-                <div class="how-step">
-                    <div class="step-num">3</div>
                     <h4>Submit</h4>
                     <p>Submit your repo link when the competition opens. Submissions are evaluated monthly. Winner gets $50 in RunPod credits.</p>
                 </div>
@@ -686,10 +1032,83 @@
         </div>
     </section>
-    <section class="section reveal reveal-delay-1">
         <div class="container">
             <div class="section-header">
-                <h2>Why Small Models?</h2>
                 <p>Parameter efficiency is the path to democratized AI.</p>
             </div>
             <div class="section-body">
@@ -701,39 +1120,160 @@
     <section class="cta-section">
         <div class="container">
-            <h2>Ready To <span class="highlight">Compete</span>?</h2>
-            <p>The first Model Golf competition launches soon. Join the Discord for updates.</p>
             <div class="cta-links">
-                <a href="https://discord.gg/y2jTct6Cxv" target="_blank" class="btn btn-primary">Join Discord</a>
-                <a href="https://compactai-o-homepage.static.hf.space/blog.html" class="btn btn-secondary">Read The Blog</a>
             </div>
         </div>
     </section>
 </main>
-<footer>
     <div class="container">
         <p>Built with curiosity over compute</p>
-        <p>FMN-GPT by <a href="https://huggingface.co/CompactAI-O" target="_blank">CompactAI-O</a> | 2026</p>
     </div>
 </footer>
 <script>
-    (function() {
-        var reveal = document.querySelectorAll('.reveal');
-        if ('IntersectionObserver' in window) {
-            var observer = new IntersectionObserver(function(entries) {
-                entries.forEach(function(entry) {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('visible');
-                    }
-                });
-            }, { threshold: 0.15 });
-            reveal.forEach(function(el) { observer.observe(el); });
-        } else {
-            reveal.forEach(function(el) { el.classList.add('visible'); });
         }
-    })();
 </script>
 </body>
 </html>

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Model Golf — Monthly Parameter-Efficiency Competition</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=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
         --gold-gradient: linear-gradient(135deg, #ffd633 0%, #c8960c 50%, #a0760a 100%);
         --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
         --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
+        --container-max: 1400px;
     }
     * { box-sizing: border-box; margin: 0; padding: 0; }
     html { font-size: 16px; scroll-behavior: smooth; }
         color: var(--white-muted);
         line-height: 1.7;
         -webkit-font-smoothing: antialiased;
     }
     body::before {
         content: '';
         background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
         background-size: 256px 256px;
     }
+    a { color: var(--white); text-decoration: none; }
     a:hover { color: var(--accent); }
+    a:focus-visible {
+        outline: 2px solid var(--accent-bright);
+        outline-offset: 3px;
+        border-radius: 2px;
+    }
+    .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
+    .sr-only {
+        position: absolute;
+        width: 1px; height: 1px;
+        margin: -1px; padding: 0;
+        overflow: hidden;
+        clip: rect(0,0,0,0);
+        border: 0;
     }
+    .skip-link {
+        position: absolute;
+        top: -100%;
+        left: 16px;
+        padding: 12px 24px;
+        background: var(--accent);
+        color: var(--blue-900);
+        font-weight: 600;
+        border-radius: 0 0 8px 8px;
+        z-index: 999;
+        transition: top 0.2s;
     }
+    .skip-link:focus {
+        top: 0;
     }
+    #bg-canvas {
+        position: fixed;
+        top: 0; left: 0;
+        width: 100vw;
+        height: 100vh;
+        z-index: 0;
+        pointer-events: none;
+        opacity: 0.45;
     }
+    .scroll-track {
+        position: fixed;
+        right: 24px;
+        top: 100px;
+        bottom: 100px;
+        width: 3px;
+        z-index: 3;
+        pointer-events: none;
     }
+    .scroll-track .track-bg {
+        position: absolute;
+        inset: 0;
+        background: var(--blue-500);
+        border-radius: 2px;
     }
+    .scroll-track .track-fill {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%;
+        height: 0%;
+        background: linear-gradient(to bottom, var(--accent-bright), var(--accent));
+        border-radius: 2px;
+        transition: height 0.1s linear;
+    }
+    .scroll-track .track-label {
+        position: absolute;
+        right: 14px;
+        font-size: 10px;
+        font-weight: 600;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--blue-300);
+        white-space: nowrap;
+    }
+    .scroll-track .track-label.top {
+        top: 0;
+        transform: translateY(-50%);
+    }
+    .scroll-track .track-label.bottom {
+        bottom: 0;
+        transform: translateY(50%);
+    }
+    .scroll-track .track-pct {
+        position: absolute;
+        right: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 10px;
+        font-weight: 600;
+        font-family: var(--font-mono);
+        color: var(--blue-300);
         opacity: 0;
+        transition: opacity 0.3s ease;
     }
+    .scroll-track:hover .track-pct {
         opacity: 1;
     }
+    .side-ghost {
         position: fixed;
+        z-index: 1;
+        pointer-events: none;
+        font-weight: 800;
+        line-height: 1;
+        letter-spacing: -0.06em;
+        font-family: var(--font-sans);
+        user-select: none;
+        writing-mode: vertical-lr;
+        text-orientation: mixed;
+        background: linear-gradient(to bottom, rgba(200,150,12,0.15), rgba(200,150,12,0.05));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+    .side-ghost.left {
+        left: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: clamp(120px, 20vw, 300px);
+    }
+    .side-ghost.right {
+        right: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: clamp(80px, 14vw, 200px);
+        background: linear-gradient(to bottom, rgba(255,214,51,0.15), rgba(200,150,12,0.05));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+    .corner-accent {
+        position: fixed;
+        z-index: 1;
+        pointer-events: none;
+    }
+    .corner-accent.tl {
+        top: 32px; left: 32px;
+        width: 48px; height: 48px;
+        border-top: 1px solid rgba(200, 150, 12, 0.12);
+        border-left: 1px solid rgba(200, 150, 12, 0.12);
+    }
+    .corner-accent.tr {
+        top: 32px; right: 32px;
+        width: 48px; height: 48px;
+        border-top: 1px solid rgba(200, 150, 12, 0.12);
+        border-right: 1px solid rgba(200, 150, 12, 0.12);
+    }
+    .corner-accent.bl {
+        bottom: 32px; left: 32px;
+        width: 48px; height: 48px;
+        border-bottom: 1px solid rgba(200, 150, 12, 0.12);
+        border-left: 1px solid rgba(200, 150, 12, 0.12);
+    }
+    .corner-accent.br {
+        bottom: 32px; right: 32px;
+        width: 48px; height: 48px;
+        border-bottom: 1px solid rgba(200, 150, 12, 0.12);
+        border-right: 1px solid rgba(200, 150, 12, 0.12);
+    }
+    @media (max-width: 1024px) {
+        .side-ghost { display: none; }
+        .corner-accent { display: none; }
+    }
+    @media (max-width: 768px) {
+        .scroll-track { display: none; }
+    }
+    @keyframes fadeUp {
+        from { opacity: 0; transform: translateY(40px) scale(0.96); }
+        to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    @keyframes float {
+        0%, 100% { transform: translateY(0) rotate(0deg); }
+        33% { transform: translateY(-8px) rotate(1deg); }
+        66% { transform: translateY(4px) rotate(-0.5deg); }
+    }
+    @keyframes borderGlow {
+        0%, 100% { border-color: rgba(200, 150, 12, 0.2); box-shadow: 0 0 20px rgba(200, 150, 12, 0.02); }
+        50% { border-color: rgba(200, 150, 12, 0.5); box-shadow: 0 0 40px rgba(200, 150, 12, 0.08); }
+    }
+    @keyframes shimmer {
+        0% { background-position: -200% center; }
+        100% { background-position: 200% center; }
+    }
+    @keyframes accordionOpen {
+        from { opacity: 0; max-height: 0; }
+        to { opacity: 1; max-height: 300px; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        *, *::before, *::after {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+        }
+        html { scroll-behavior: auto; }
+        #bg-canvas { display: none; }
     }
     .hero {
         min-height: 100vh;
         display: flex;
         flex-direction: column;
         justify-content: center;
+        padding: 80px 0;
         position: relative;
         overflow: hidden;
     }
             radial-gradient(ellipse 100% 60% at 50% -20%, rgba(200, 150, 12, 0.08), transparent),
             radial-gradient(ellipse 60% 50% at 80% 80%, rgba(200, 150, 12, 0.04), transparent);
         pointer-events: none;
+        z-index: 1;
+    }
+    .hero-content { position: relative; z-index: 2; }
+    .logo-wrap {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin-bottom: 36px;
+        opacity: 0;
+        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
+    }
+    .logo-wrap img {
+        width: 44px;
+        height: 44px;
+        border-radius: 10px;
+        border: 1px solid var(--blue-600);
+        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     }
+    .logo-wrap img:hover {
+        transform: scale(1.1) rotate(-4deg);
+        border-color: var(--accent);
+        box-shadow: 0 0 40px rgba(200, 150, 12, 0.2);
+    }
+    .logo-wrap .logo-text {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--blue-300);
+        letter-spacing: 0.02em;
+    }
+    .logo-wrap .logo-text span { color: var(--accent); }
     .hero-badge {
         display: inline-flex;
         align-items: center;
         letter-spacing: 0.08em;
         margin-bottom: 32px;
         opacity: 0;
+        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
     }
     .hero-badge .dot {
         width: 6px; height: 6px;
         background: var(--accent-bright);
         border-radius: 50%;
+        animation: float 3s ease-in-out infinite;
     }
     .hero h1 {
         font-size: clamp(64px, 12vw, 120px);
         letter-spacing: -0.04em;
         margin-bottom: 16px;
         opacity: 0;
+        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
     }
     .hero h1 .highlight {
         background: linear-gradient(135deg, #ffd633, #c8960c, #ffd633);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
+        animation: shimmer 4s linear infinite;
     }
     .hero-subtitle {
+        font-size: clamp(17px, 2vw, 21px);
         color: var(--blue-200);
+        max-width: 800px;
         margin-bottom: 48px;
+        line-height: 1.6;
         opacity: 0;
+        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
     }
     .hero-cta {
         display: flex;
         gap: 16px;
         flex-wrap: wrap;
         margin-bottom: 80px;
         opacity: 0;
+        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
     }
     .btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        padding: 14px 32px;
         font-size: 15px;
         font-weight: 500;
         border-radius: 8px;
+        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
         cursor: pointer;
         font-family: var(--font-sans);
+        position: relative;
+        overflow: hidden;
+    }
+    .btn::before {
+        content: '';
+        position: absolute;
+        top: 0; left: -100%;
+        width: 100%; height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
+        transition: left 0.6s ease;
+    }
+    .btn:hover::before { left: 100%; }
+    .btn:focus-visible {
+        outline: 2px solid var(--accent-bright);
+        outline-offset: 3px;
     }
     .btn-primary {
         background: linear-gradient(135deg, #ffd633, #c8960c, #ffd633);
         color: var(--blue-900);
         border: none;
         font-weight: 600;
+        animation: shimmer 4s linear infinite;
     }
     .btn-primary:hover {
+        transform: translateY(-4px) scale(1.02);
+        box-shadow: 0 16px 50px rgba(200, 150, 12, 0.35);
     }
     .btn-secondary {
         background: transparent;
     .btn-secondary:hover {
         border-color: var(--accent);
         color: var(--white);
+        transform: translateY(-3px);
     }
     .hero-stats {
         grid-template-columns: repeat(4, 1fr);
         gap: 16px;
         opacity: 0;
+        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
     }
     .hero-stat {
         background: rgba(10, 10, 10, 0.8);
         border-radius: 12px;
         padding: 28px 16px;
         text-align: center;
+        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
         position: relative;
         overflow: hidden;
     }
     .hero-stat::before {
         content: '';
         position: absolute;
+        inset: 0;
+        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200, 150, 12, 0.12), transparent 70%);
         opacity: 0;
+        transition: opacity 0.4s ease;
+        pointer-events: none;
     }
     .hero-stat:hover::before { opacity: 1; }
+    .hero-stat:hover {
+        border-color: rgba(200, 150, 12, 0.4);
+        transform: translateY(-4px);
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+    }
     .hero-stat .number {
         font-size: clamp(32px, 4vw, 48px);
         font-weight: 700;
         font-family: var(--font-mono);
         line-height: 1.1;
         margin-bottom: 6px;
+        animation: shimmer 5s linear infinite;
+        position: relative;
+        z-index: 1;
     }
+    .hero-stat .label { font-size: 13px; color: var(--blue-200); font-weight: 500; position: relative; z-index: 1; }
+    .hero-stat .sublabel { font-size: 11px; color: var(--blue-300); margin-top: 4px; position: relative; z-index: 1; }
     .section {
+        padding: 100px 0;
         position: relative;
+        z-index: 2;
     }
     .section.alt {
         background: var(--blue-800);
     }
     .section-header {
         text-align: center;
+        margin-bottom: 56px;
     }
     .section-header h2 {
         font-size: 36px;
         margin: 0 auto;
     }
     .section-body {
+        max-width: 900px;
         margin: 0 auto;
     }
     .section-body p {
     .two-col {
         display: grid;
         grid-template-columns: 1fr 1fr;
+        gap: 28px;
+        max-width: 1100px;
         margin: 0 auto;
     }
     .col-card {
         background: var(--blue-800);
         border: 1px solid var(--blue-600);
         border-radius: 12px;
         padding: 32px;
+        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
         position: relative;
         overflow: hidden;
     }
+    .col-card::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200, 150, 12, 0.08), transparent 70%);
+        opacity: 0;
+        transition: opacity 0.5s ease;
+        pointer-events: none;
+    }
+    .col-card:hover::before { opacity: 1; }
     .col-card::after {
         content: '';
         position: absolute;
         top: 0; left: -100%;
         width: 100%; height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(200, 150, 12, 0.04), transparent);
+        transition: left 0.8s ease;
         pointer-events: none;
     }
+    .col-card:hover::after { left: 100%; }
     .col-card:hover {
         border-color: rgba(200, 150, 12, 0.35);
+        transform: translateY(-6px);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
     }
     .col-card h3 {
         font-size: 20px;
         display: flex;
         align-items: center;
         gap: 10px;
+        position: relative;
+        z-index: 1;
     }
+    .col-card ul { list-style: none; padding: 0; position: relative; z-index: 1; }
     .col-card li {
         padding: 10px 0;
         border-bottom: 1px solid var(--blue-600);
     .col-card li:last-child { border-bottom: none; }
     .col-card li .check { color: var(--accent); font-weight: 700; flex-shrink: 0; }
+    .three-col {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 24px;
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    .info-card {
+        background: var(--blue-800);
+        border: 1px solid var(--blue-600);
+        border-radius: 12px;
+        padding: 32px 24px;
+        text-align: center;
+        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+        position: relative;
+        overflow: hidden;
+    }
+    .info-card::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200, 150, 12, 0.08), transparent 70%);
+        opacity: 0;
+        transition: opacity 0.5s ease;
+        pointer-events: none;
+    }
+    .info-card:hover::before { opacity: 1; }
+    .info-card:hover {
+        border-color: rgba(200, 150, 12, 0.35);
+        transform: translateY(-6px);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+    }
+    .info-card .card-icon {
+        width: 48px; height: 48px;
+        border-radius: 12px;
+        background: linear-gradient(135deg, #ffd633 0%, #c8960c 50%, #a0760a 100%);
+        color: var(--blue-900);
+        font-weight: 700;
+        font-size: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 16px;
+        position: relative;
+        z-index: 1;
+        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .info-card:hover .card-icon {
+        transform: scale(1.1);
+        box-shadow: 0 0 40px rgba(200, 150, 12, 0.3);
+    }
+    .info-card h3 { font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 10px; position: relative; z-index: 1; }
+    .info-card p { font-size: 14px; color: var(--blue-200); line-height: 1.6; margin: 0; position: relative; z-index: 1; }
     .rules-card {
         background: var(--blue-800);
         border: 1px solid var(--blue-600);
         border-radius: 12px;
         padding: 32px;
+        max-width: 900px;
         margin: 0 auto;
         transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
         animation: borderGlow 4s ease-in-out infinite;
         padding: 14px 0;
         border-bottom: 1px solid var(--blue-600);
         gap: 12px;
+        position: relative;
+        z-index: 1;
     }
     .rules-card .rule-row:last-child { border-bottom: none; }
     .rules-card .rule-icon { color: var(--accent); font-weight: 700; width: 20px; text-align: center; flex-shrink: 0; }
         margin-top: 16px;
         padding-top: 16px;
         border-top: 1px solid var(--blue-600);
+        position: relative;
+        z-index: 1;
     }
     .how-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
+        gap: 24px;
+        max-width: 1100px;
         margin: 0 auto;
     }
     .how-step {
         background: var(--blue-800);
         border: 1px solid var(--blue-600);
         border-radius: 12px;
+        padding: 36px 24px;
         text-align: center;
+        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
         position: relative;
         overflow: hidden;
     }
+    .how-step::before {
         content: '';
         position: absolute;
+        inset: 0;
+        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200, 150, 12, 0.08), transparent 70%);
+        opacity: 0;
+        transition: opacity 0.5s ease;
         pointer-events: none;
     }
+    .how-step:hover::before { opacity: 1; }
     .how-step:hover {
         border-color: rgba(200, 150, 12, 0.35);
+        transform: translateY(-6px);
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
     }
     .how-step .step-num {
+        width: 44px; height: 44px;
         border-radius: 50%;
+        background: linear-gradient(135deg, #ffd633 0%, #c8960c 50%, #a0760a 100%);
         color: var(--blue-900);
         font-weight: 700;
         font-size: 16px;
         align-items: center;
         justify-content: center;
         margin: 0 auto 16px;
+        position: relative;
+        z-index: 1;
+        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .how-step:hover .step-num {
+        transform: scale(1.15);
+        box-shadow: 0 0 40px rgba(200, 150, 12, 0.3);
+    }
+    .how-step h4 { font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 10px; position: relative; z-index: 1; }
+    .how-step p { font-size: 14px; color: var(--blue-200); line-height: 1.6; margin: 0; position: relative; z-index: 1; }
+    .faq-list {
+        max-width: 900px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+    .faq-item {
+        background: var(--blue-800);
+        border: 1px solid var(--blue-600);
+        border-radius: 10px;
+        overflow: hidden;
+        transition: border-color 0.3s ease;
+    }
+    .faq-item:hover { border-color: var(--blue-500); }
+    .faq-question {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 18px 24px;
+        background: none;
+        border: none;
+        color: var(--white);
+        font-size: 15px;
+        font-weight: 500;
+        font-family: var(--font-sans);
+        cursor: pointer;
+        text-align: left;
+        transition: color 0.2s ease;
+    }
+    .faq-question:hover { color: var(--accent); }
+    .faq-question:focus-visible {
+        outline: 2px solid var(--accent-bright);
+        outline-offset: -2px;
+    }
+    .faq-question .icon {
+        width: 20px; height: 20px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color: var(--accent);
+        transition: transform 0.3s ease;
+    }
+    .faq-item.open .faq-question .icon {
+        transform: rotate(45deg);
+    }
+    .faq-answer {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.35s ease, padding 0.35s ease;
+    }
+    .faq-item.open .faq-answer {
+        max-height: 300px;
+    }
+    .faq-answer p {
+        padding: 0 24px 18px;
+        font-size: 14px;
+        color: var(--blue-200);
+        line-height: 1.7;
+        margin: 0;
     }
     .cta-section {
+        padding: 120px 0;
         text-align: center;
         position: relative;
         overflow: hidden;
+        z-index: 2;
     }
     .cta-section::before {
         content: '';
     }
     .cta-section h2 .highlight {
         background: var(--gold-gradient);
+        background-size: 200% auto;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
+        animation: shimmer 4s linear infinite;
     }
     .cta-section p {
         font-size: 18px;
         flex-wrap: wrap;
     }
     footer {
         padding: 60px 0;
         background: var(--blue-800);
         border-top: 1px solid var(--blue-600);
         text-align: center;
         position: relative;
+        z-index: 2;
     }
     footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
     footer a { color: var(--blue-200); }
     footer a:hover { color: var(--accent); }
+    .reveal {
+        opacity: 0;
+        transform: translateY(40px);
+        transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .reveal.visible {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    .reveal-delay-1 { transition-delay: 0.1s; }
+    .reveal-delay-2 { transition-delay: 0.2s; }
+    .reveal-delay-3 { transition-delay: 0.3s; }
     @media (max-width: 768px) {
         .hero-stats { grid-template-columns: repeat(2, 1fr); }
         .two-col { grid-template-columns: 1fr; }
+        .three-col { grid-template-columns: 1fr; }
         .how-grid { grid-template-columns: 1fr; }
         .hero h1 { font-size: clamp(40px, 15vw, 64px); }
         .cta-section h2 { font-size: 32px; }
         .rules-card .rule-row { flex-wrap: wrap; gap: 4px; }
 </head>
 <body>
+<a href="#main-content" class="skip-link">Skip to main content</a>
+<canvas id="bg-canvas" aria-hidden="true"></canvas>
+<div class="corner-accent tl" aria-hidden="true"></div>
+<div class="corner-accent tr" aria-hidden="true"></div>
+<div class="corner-accent bl" aria-hidden="true"></div>
+<div class="corner-accent br" aria-hidden="true"></div>
+<div class="side-ghost left" aria-hidden="true">MODEL GOLF</div>
+<div class="side-ghost right" aria-hidden="true">ROUND ONE</div>
+<div class="scroll-track" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Scroll progress">
+    <div class="track-bg"></div>
+    <div class="track-fill"></div>
+    <span class="track-label top">Top</span>
+    <span class="track-label bottom">Bottom</span>
+    <span class="track-pct">0%</span>
+</div>
+<main id="main-content">
+    <section class="hero" id="hero" aria-label="Hero banner" role="region">
         <div class="container hero-content">
+            <div class="logo-wrap">
+                <img src="compact.webp" alt="CompactAI-O organization logo">
+                <span class="logo-text">by <span>CompactAI-O</span></span>
+            </div>
+            <div class="hero-badge" role="status" aria-live="polite">
+                <span class="dot" aria-hidden="true"></span>
                 Monthly Competition &mdash; Open To Everyone
             </div>
+            <h1>Model <span class="highlight" aria-hidden="true">Golf</span><span class="sr-only">Golf</span></h1>
+            <p class="hero-subtitle">Build the best language model under 100 million parameters. Minimum 1028-token context. Winner receives $50 in RunPod credits. Round one: June 1&ndash;30, 2026.</p>
+            <div class="hero-cta" role="group" aria-label="Call to action buttons">
                 <a href="#rules" class="btn btn-primary">View Rules</a>
                 <a href="#participate" class="btn btn-secondary">How To Join</a>
+                <a href="https://discord.gg/y2jTct6Cxv" target="_blank" class="btn btn-secondary" rel="noopener">Join Discord</a>
             </div>
+            <div class="hero-stats" role="list" aria-label="Competition statistics">
+                <div class="hero-stat" data-tilt role="listitem">
+                    <div class="number" aria-hidden="true">&lt;100M</div>
                     <div class="label">Parameter Limit</div>
                     <div class="sublabel">Strict upper bound</div>
                 </div>
+                <div class="hero-stat" data-tilt role="listitem">
+                    <div class="number" aria-hidden="true">1028+</div>
                     <div class="label">Context Window</div>
                     <div class="sublabel">Minimum tokens</div>
                 </div>
+                <div class="hero-stat" data-tilt role="listitem">
+                    <div class="number" aria-hidden="true">$50</div>
                     <div class="label">RunPod Credits</div>
                     <div class="sublabel">Monthly prize</div>
                 </div>
+                <div class="hero-stat" data-tilt role="listitem">
+                    <div class="number" aria-hidden="true">30d</div>
+                    <div class="label">Current Round</div>
+                    <div class="sublabel">June 1&ndash;30, 2026</div>
                 </div>
             </div>
         </div>
     </section>
+    <section class="section reveal" id="what" aria-labelledby="what-heading">
         <div class="container">
             <div class="section-header">
+                <h2 id="what-heading">What It Is</h2>
             </div>
             <div class="two-col">
+                <div class="col-card" data-tilt>
+                    <h3><span class="check" aria-hidden="true">&#x2713;</span> What Model <em style="font-style: normal; color: var(--white);">Is</em></h3>
+                    <ul role="list">
+                        <li><span class="check" aria-hidden="true">&#x2713;</span> A monthly parameter-efficiency competition</li>
+                        <li><span class="check" aria-hidden="true">&#x2713;</span> Open to anyone, anywhere</li>
+                        <li><span class="check" aria-hidden="true">&#x2713;</span> Fully custom architectures allowed</li>
+                        <li><span class="check" aria-hidden="true">&#x2713;</span> Novel tokenization &amp; training schemes welcome</li>
+                        <li><span class="check" aria-hidden="true">&#x2713;</span> Open source by design</li>
+                        <li><span class="check" aria-hidden="true">&#x2713;</span> $50 RunPod credits to the winner</li>
                     </ul>
                 </div>
+                <div class="col-card" data-tilt>
+                    <h3><span class="icon" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> What It Is <em style="font-style: normal; color: var(--blue-400);">Not</em></h3>
+                    <ul role="list">
+                        <li><span class="check" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> Not a Kaggle-style dataset contest</li>
+                        <li><span class="check" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> Not restricted to existing architectures</li>
+                        <li><span class="check" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> Not limited by llama.cpp compatibility</li>
+                        <li><span class="check" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> Not a fixed-benchmark leaderboard</li>
+                        <li><span class="check" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> Not for closed-source submissions</li>
                     </ul>
                 </div>
             </div>
         </div>
     </section>
+    <section class="section reveal reveal-delay-1" id="rules" aria-labelledby="rules-heading">
         <div class="container">
             <div class="section-header">
+                <h2 id="rules-heading">The Rules</h2>
                 <p>Simple and clear. Complexity discourages participation.</p>
             </div>
+            <div class="rules-card" aria-label="Competition rules">
                 <div class="rule-row">
+                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                     <span class="rule-label">License</span>
                     <span class="rule-desc">MIT, GPL, Apache, or AGPL (any version)</span>
                 </div>
                 <div class="rule-row">
+                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                     <span class="rule-label">Parameters</span>
                     <span class="rule-desc">Must be smaller than 100 million</span>
                 </div>
                 <div class="rule-row">
+                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                     <span class="rule-label">Context</span>
                     <span class="rule-desc">Minimum 1028 tokens</span>
                 </div>
                 <div class="rule-row">
+                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                     <span class="rule-label">Platform</span>
                     <span class="rule-desc">No requirement for llama.cpp compatibility</span>
                 </div>
                 <div class="rule-row">
+                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                     <span class="rule-label">AI Assistance</span>
                     <span class="rule-desc">Up to 45% of work can be AI-generated</span>
                 </div>
                 <div class="rule-row">
+                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                     <span class="rule-label">Submission</span>
                     <span class="rule-desc">Open source repository with documentation</span>
                 </div>
+                <div class="rules-tagline" aria-label="Tagline: Simple. Clear. Enforceable."># Simple. Clear. Enforceable.</div>
             </div>
         </div>
     </section>
+    <section class="section alt reveal reveal-delay-2" id="participate" aria-labelledby="participate-heading">
         <div class="container">
             <div class="section-header">
+                <h2 id="participate-heading">How To Join</h2>
+                <p>Round one runs <strong>June 1&ndash;30, 2026</strong>. Here is how it works.</p>
             </div>
             <div class="how-grid">
+                <div class="how-step" data-tilt>
+                    <div class="step-num" aria-hidden="true">1</div>
                     <h4>Build</h4>
                     <p>Create a language model under 100M parameters with at least 1028-token context. Any architecture. Any approach.</p>
                 </div>
+                <div class="how-step" data-tilt>
+                    <div class="step-num" aria-hidden="true">2</div>
                     <h4>Document</h4>
                     <p>Open source your repository with full documentation. Include parameter count, context window, and approach summary.</p>
                 </div>
+                <div class="how-step" data-tilt>
+                    <div class="step-num" aria-hidden="true">3</div>
                     <h4>Submit</h4>
                     <p>Submit your repo link when the competition opens. Submissions are evaluated monthly. Winner gets $50 in RunPod credits.</p>
                 </div>
         </div>
     </section>
+    <section class="section reveal reveal-delay-1" id="resources" aria-labelledby="resources-heading">
+        <div class="container">
+            <div class="section-header">
+                <h2 id="resources-heading">Resources &amp; Evaluation</h2>
+                <p>Everything you need to build and submit your model.</p>
+            </div>
+            <div class="three-col">
+                <div class="info-card" data-tilt>
+                    <div class="card-icon" aria-hidden="true">B</div>
+                    <h3>Benchmark</h3>
+                    <p>Models evaluated on a held-out suite of reasoning, coding, and language understanding tasks. Final ranking by aggregate score.</p>
+                </div>
+                <div class="info-card" data-tilt>
+                    <div class="card-icon" aria-hidden="true">T</div>
+                    <h3>Tools</h3>
+                    <p>Use any framework &mdash; PyTorch, JAX, TensorFlow, or custom CUDA. Bring your own tokenizer, architecture, and training pipeline.</p>
+                </div>
+                <div class="info-card" data-tilt>
+                    <div class="card-icon" aria-hidden="true">G</div>
+                    <h3>Guidelines</h3>
+                    <p>Submit via a pull request to the Model Golf repository with your model weights, config, and a short technical report.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="section alt reveal reveal-delay-1" id="faq" aria-labelledby="faq-heading">
+        <div class="container">
+            <div class="section-header">
+                <h2 id="faq-heading">Frequently Asked Questions</h2>
+                <p>Common questions about Model Golf.</p>
+            </div>
+            <div class="faq-list" role="list">
+                <div class="faq-item" role="listitem">
+                    <button class="faq-question" aria-expanded="false" aria-controls="faq1-answer">
+                        <span>Can I use a pre-trained model as a starting point?</span>
+                        <span class="icon" aria-hidden="true">+</span>
+                    </button>
+                    <div class="faq-answer" id="faq1-answer" role="region" aria-hidden="true">
+                        <p>Yes, you may fine-tune or adapt existing open-source models as long as the final parameter count is under 100 million and all code is open source. You must document your starting point clearly in your submission.</p>
+                    </div>
+                </div>
+                <div class="faq-item" role="listitem">
+                    <button class="faq-question" aria-expanded="false" aria-controls="faq2-answer">
+                        <span>How is the 100M parameter limit enforced?</span>
+                        <span class="icon" aria-hidden="true">+</span>
+                    </button>
+                    <div class="faq-answer" id="faq2-answer" role="region" aria-hidden="true">
+                        <p>Submissions must include a parameter count script that counts every trainable parameter. Organizers verify counts and reserve the right to reject submissions that creatively circumvent the limit (e.g., large embedding tables with sparse usage).</p>
+                    </div>
+                </div>
+                <div class="faq-item" role="listitem">
+                    <button class="faq-question" aria-expanded="false" aria-controls="faq3-answer">
+                        <span>What does "open source" mean for Model Golf?</span>
+                        <span class="icon" aria-hidden="true">+</span>
+                    </button>
+                    <div class="faq-answer" id="faq3-answer" role="region" aria-hidden="true">
+                        <p>All training code, model weights, configuration, and a technical report must be publicly available under an OSI-approved license. We accept MIT, GPL, Apache 2.0, and AGPL licenses.</p>
+                    </div>
+                </div>
+                <div class="faq-item" role="listitem">
+                    <button class="faq-question" aria-expanded="false" aria-controls="faq4-answer">
+                        <span>When does the first round begin?</span>
+                        <span class="icon" aria-hidden="true">+</span>
+                    </button>
+                    <div class="faq-answer" id="faq4-answer" role="region" aria-hidden="true">
+                        <p>Round one runs <strong>June 1&ndash;30, 2026</strong>. Submissions close at 23:59 UTC on June 30. Join the Discord for early-access resources.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="section reveal reveal-delay-2" aria-labelledby="why-heading">
         <div class="container">
             <div class="section-header">
+                <h2 id="why-heading">Why Small Models?</h2>
                 <p>Parameter efficiency is the path to democratized AI.</p>
             </div>
             <div class="section-body">
     <section class="cta-section">
         <div class="container">
+            <h2>Ready To <span class="highlight" aria-hidden="true">Compete</span><span class="sr-only">Compete</span>?</h2>
+            <p>Round one ends June 30, 2026. Submit your model by 23:59 UTC.</p>
             <div class="cta-links">
+                <a href="https://discord.gg/y2jTct6Cxv" target="_blank" class="btn btn-primary" rel="noopener">Join Discord</a>
+                <a href="https://compactai-o-homepage.static.hf.space/blog.html" class="btn btn-secondary" rel="noopener">Read The Blog</a>
             </div>
         </div>
     </section>
 </main>
+<footer role="contentinfo">
     <div class="container">
         <p>Built with curiosity over compute</p>
+        <p>FMN-GPT by <a href="https://huggingface.co/CompactAI-O" target="_blank" rel="noopener">CompactAI-O</a> | 2026</p>
     </div>
 </footer>
 <script>
+(function() {
+    // --- Scroll reveal ---
+    var reveal = document.querySelectorAll('.reveal');
+    if ('IntersectionObserver' in window) {
+        var observer = new IntersectionObserver(function(entries) {
+            entries.forEach(function(entry) {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, { threshold: 0.15 });
+        reveal.forEach(function(el) { observer.observe(el); });
+    } else {
+        reveal.forEach(function(el) { el.classList.add('visible'); });
+    }
+    // --- FAQ accordion ---
+    var faqButtons = document.querySelectorAll('.faq-question');
+    faqButtons.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            var item = btn.closest('.faq-item');
+            var isOpen = item.classList.contains('open');
+            var answer = document.getElementById(btn.getAttribute('aria-controls'));
+            if (isOpen) {
+                item.classList.remove('open');
+                btn.setAttribute('aria-expanded', 'false');
+                answer.setAttribute('aria-hidden', 'true');
+            } else {
+                item.classList.add('open');
+                btn.setAttribute('aria-expanded', 'true');
+                answer.setAttribute('aria-hidden', 'false');
+            }
+        });
+    });
+    // --- Fluid background canvas ---
+    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    var canvas = document.getElementById('bg-canvas');
+    if (prefersReduced) { canvas.remove(); }
+    else {
+        var ctx = canvas.getContext('2d');
+        var w, h, time = 0;
+        var mouse = { x: 0.5, y: 0.5 };
+        function resize() {
+            w = canvas.width = window.innerWidth;
+            h = canvas.height = window.innerHeight;
+        }
+        resize();
+        window.addEventListener('resize', resize);
+        document.addEventListener('mousemove', function(e) {
+            mouse.x = e.clientX / w;
+            mouse.y = e.clientY / h;
+        });
+        function drawFluid(time) {
+            ctx.clearRect(0, 0, w, h);
+            var imageData = ctx.createImageData(w, h);
+            var data = imageData.data;
+            var cx = mouse.x * w;
+            var cy = mouse.y * h;
+            for (var y = 0; y < h; y += 2) {
+                for (var x = 0; x < w; x += 2) {
+                    var dx = x - cx;
+                    var dy = y - cy;
+                    var dist = Math.sqrt(dx * dx + dy * dy);
+                    var angle = Math.atan2(dy, dx);
+                    var n1 = Math.sin(x * 0.003 + time * 0.4) * Math.cos(y * 0.003 + time * 0.3);
+                    var n2 = Math.sin((x - cx) * 0.005 + time * 0.5) * Math.cos((y - cy) * 0.005 + time * 0.4);
+                    var n3 = Math.sin(dist * 0.01 - time * 0.6 + angle);
+                    var val = (n1 * 0.5 + n2 * 0.3 + n3 * 0.2);
+                    val = Math.max(-1, Math.min(1, val));
+                    var push = Math.max(0, 1 - dist / (w * 0.4));
+                    val += push * 0.3;
+                    var intensity = (val * 0.5 + 0.5) * 0.06;
+                    var idx = (y * w + x) * 4;
+                    data[idx] = 200 * intensity;
+                    data[idx + 1] = 150 * intensity;
+                    data[idx + 2] = 12 * intensity;
+                    data[idx + 3] = intensity * 255;
+                }
+            }
+            ctx.putImageData(imageData, 0, 0);
         }
+        function animate() {
+            time += 1;
+            drawFluid(time);
+            requestAnimationFrame(animate);
+        }
+        animate();
+    }
+    // --- Scroll progress bar ---
+    var track = document.querySelector('.scroll-track');
+    var fill = track.querySelector('.track-fill');
+    var pct = track.querySelector('.track-pct');
+    function updateProgress() {
+        var scrollTop = window.scrollY;
+        var docHeight = document.documentElement.scrollHeight - window.innerHeight;
+        var progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+        fill.style.height = progress + '%';
+        pct.textContent = Math.round(progress) + '%';
+        track.setAttribute('aria-valuenow', Math.round(progress));
+    }
+    window.addEventListener('scroll', updateProgress);
+    window.addEventListener('resize', updateProgress);
+    updateProgress();
+    // --- Tilt effect ---
+    var tiltEls = document.querySelectorAll('[data-tilt]');
+    tiltEls.forEach(function(el) {
+        el.addEventListener('mousemove', function(e) {
+            var rect = el.getBoundingClientRect();
+            var x = e.clientX - rect.left;
+            var y = e.clientY - rect.top;
+            var centerX = rect.width / 2;
+            var centerY = rect.height / 2;
+            var rotateX = (y - centerY) / centerY * -8;
+            var rotateY = (x - centerX) / centerX * 8;
+            el.style.transform = 'perspective(600px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg) translateY(-4px)';
+            el.style.setProperty('--mx', ((x / rect.width) * 100) + '%');
+            el.style.setProperty('--my', ((y / rect.height) * 100) + '%');
+        });
+        el.addEventListener('mouseleave', function() {
+            el.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) translateY(0px)';
+        });
+    });
+})();
 </script>
 </body>
 </html>