The IO-Lab Arsenal

Premium Systeme.io-Ready Components. Copy. Paste. Deploy.

The Operational Trigger

A static button is a dead end. An Integrated Operation requires a living trigger mechanism. This pulse-action element signals system readiness.

<!-- =============================================
     IO-LAB :: PRODUCT 1 — THE OPERATIONAL TRIGGER
     Futuristic Pulse Button with Glassmorphism
     ============================================= -->
<style>
/* ==============================================
   🎨 CUSTOMIZATION PROTOCOL
   ==============================================
   PROTOCOL: Change #8AB4F8 below to your brand
   color hex code to reskin the pulse instantly.

   --io-accent      → Primary glow color
   --io-accent-alt  → Secondary cyan accent
   --io-bg-deep     → Background darkness level
   --io-glow-str    → Glow intensity (0.0 - 1.0)
   --io-pulse-speed → Animation cycle speed
   --io-font        → Your brand font family
   ============================================== */
:root {
    --io-accent: #8AB4F8;
    --io-accent-alt: #24C1E0;
    --io-bg-deep: #0a0a0a;
    --io-glow-str: 0.6;
    --io-pulse-speed: 2s;
    --io-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ⚠️ SYSTEM CORE — DO NOT MODIFY BELOW ======= */
.io-pulse-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background: var(--io-bg-deep);
}
.io-pulse-btn {
    position: relative;
    padding: 18px 52px;
    font-family: var(--io-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(135deg,
        rgba(138,180,248,0.15) 0%,
        rgba(36,193,224,0.10) 100%);
    border: 1px solid rgba(138,180,248,0.3);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    animation: io-pulse var(--io-pulse-speed) infinite;
}
.io-pulse-btn::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, var(--io-accent), var(--io-accent-alt));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    transition: opacity 0.35s;
}
.io-pulse-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 0 20px rgba(138,180,248, var(--io-glow-str)),
        0 0 60px rgba(36,193,224, calc(var(--io-glow-str) * 0.4)),
        0 20px 40px rgba(0,0,0,0.4);
}
.io-pulse-btn:hover::before { opacity: 1; }
.io-pulse-btn:active {
    transform: translateY(0) scale(0.98);
}
@keyframes io-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(138,180,248,0.2),
                    0 0 20px rgba(138,180,248,0.1);
    }
    50% {
        box-shadow: 0 0 20px rgba(138,180,248, var(--io-glow-str)),
                    0 0 50px rgba(36,193,224, calc(var(--io-glow-str) * 0.5));
    }
}
</style>

<div class="io-pulse-wrapper">
    <button class="io-pulse-btn">⚡ Get Access</button>
</div>

🛰️

The Integrated Trust Protocol

Show that your operation doesn't exist in a vacuum. This stealth-mask slider seamlessly blends your technology partners into your environment.

<!-- =============================================
     IO-LAB :: PRODUCT 2 — THE INTEGRATED TRUST PROTOCOL
     Futuristic Authority Marquee with Glassmorphism
     ============================================= -->
<style>
/* ==============================================
   🎨 CUSTOMIZATION PROTOCOL
   ==============================================
   PROTOCOL: Change #8AB4F8 below to your brand
   color hex code to reskin the marquee glow.

   --io-accent       → Hover highlight color
   --io-accent-alt   → Secondary glow color
   --io-bg-deep      → Background darkness
   --io-slider-speed → Scroll speed (seconds)
   --io-slider-gap   → Space between logos (px)
   --io-logo-dim     → Default logo opacity (0-1)
   --io-font         → Your brand font family
   ============================================== */
:root {
    --io-accent: #8AB4F8;
    --io-accent-alt: #24C1E0;
    --io-bg-deep: #0a0a0a;
    --io-slider-speed: 40s;
    --io-slider-gap: 80px;
    --io-logo-dim: 0.35;
    --io-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ⚠️ SYSTEM CORE — DO NOT MODIFY BELOW ======= */
.io-trust-marquee {
    position: relative;
    background: var(--io-bg-deep);
    padding: 50px 0;
    overflow: hidden;
    border-top: 1px solid rgba(138,180,248,0.08);
    border-bottom: 1px solid rgba(138,180,248,0.08);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%, black 15%, black 85%, transparent 100%);
}
.io-trust-marquee::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(138,180,248,0.03) 0%,
        transparent 50%,
        rgba(36,193,224,0.02) 100%);
    pointer-events: none;
}
.io-trust-track {
    display: flex;
    width: max-content;
    gap: var(--io-slider-gap);
    animation: io-marquee-drift var(--io-slider-speed) linear infinite;
}
.io-trust-marquee:hover .io-trust-track {
    animation-play-state: paused;
}
.io-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    padding: 0 10px;
    font-family: var(--io-font);
    font-weight: 800;
    font-size: 1.3rem;
    color: #FFFFFF;
    opacity: var(--io-logo-dim);
    filter: grayscale(100%) brightness(0.7);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
.io-trust-item:hover {
    opacity: 1;
    filter: grayscale(0%) brightness(1.2);
    transform: scale(1.12);
    text-shadow:
        0 0 10px rgba(138,180,248,0.6),
        0 0 30px rgba(36,193,224,0.3);
}
@keyframes io-marquee-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
</style>

<div class="io-trust-marquee">
    <div class="io-trust-track">
        <!-- SET 1: Replace with your brand names or logos -->
        <span class="io-trust-item">Google</span>
        <span class="io-trust-item">○ OpenAI</span>
        <span class="io-trust-item">stripe</span>
        <span class="io-trust-item">⚡ Supabase</span>
        <span class="io-trust-item">☁ Cloudflare</span>
        <span class="io-trust-item">n8n</span>
        <!-- SET 2: Duplicate for seamless infinite loop -->
        <span class="io-trust-item">Google</span>
        <span class="io-trust-item">○ OpenAI</span>
        <span class="io-trust-item">stripe</span>
        <span class="io-trust-item">⚡ Supabase</span>
        <span class="io-trust-item">☁ Cloudflare</span>
        <span class="io-trust-item">n8n</span>
    </div>
</div>

📂

The Master IO-Lab Blueprint

Build a premium landing page like this one — your brand, your colors. Step-by-step guide to deploy your own Integrated Operations marketplace.

# IO_PRODUCT_3 — THE MASTER IO-LAB BLUEPRINT
### Build a Premium Landing Page Like IO-Lab — Your Brand, Your Colors

---

> **What This Is:**
> A step-by-step system to generate your own premium, dark-mode landing page
> — styled like io-lab.io — using your brand identity.
> No coding required. 100% Systeme.io compatible.

---

## STEP 1: FILL IN YOUR BRAND IDENTITY

Answer these 5 questions before you start:

```
BRAND NAME:      ___________________________  (e.g. "NovaTech")
TAGLINE:         ___________________________  (e.g. "Built Different")
PRIMARY COLOR:   ___________________________  (e.g. #FFD700 for gold)
SECONDARY COLOR: ___________________________  (e.g. #FF6B6B for coral)
HEADLINE:        ___________________________  (e.g. "THE FUTURE IS NOW")
```

**Need a color?** Go to [coolors.co](https://coolors.co) and pick two.

---

## STEP 2: COPY & PASTE THIS GENERATION PROMPT

Replace every `[BRACKET]` with your answers from Step 1.
Then paste the entire block into ChatGPT, Gemini, or Claude to generate your page.

---

```
Generate a single-file HTML landing page for my brand "[BRAND NAME]".

DESIGN RULES:
- Background: #0a0a0a (pure dark)
- Primary color: [YOUR PRIMARY COLOR]
- Secondary color: [YOUR SECONDARY COLOR]
- Font: Inter from Google Fonts
- Style: Futuristic, glassmorphism, glowing borders, premium feel
- All CSS inside <style> tags. All JS inside <script> tags.
- No external frameworks. No Tailwind. No Bootstrap.
- Must work inside a Systeme.io "Raw HTML" element.

PAGE STRUCTURE (build in this order):

1. STICKY HEADER
   - Brand name "[BRAND NAME]" as gradient text (primary → secondary)
   - Tagline "[YOUR TAGLINE]" in subtle white
   - Dark glassmorphism bar, position: sticky, top: 0, z-index: 9999

2. HERO SECTION
   - Big bold headline: "[YOUR HEADLINE]"
   - Subtitle text below it in white at 50% opacity
   - A glowing CTA button with pulse animation

3. FEATURES GRID
   - 3-column grid (stacks on mobile)
   - Each cell: dark glassmorphism card (rgba white 3% + blur)
   - Hover: subtle 3D tilt + glow shadow using primary color
   - Add 4-6 feature cards with emoji icons and short text

4. SCROLLING TRUST BAR
   - Infinite horizontal scroll of text items (brand names or keywords)
   - CSS mask fade on left/right edges
   - Items dim at 35% opacity, brighten to 100% on hover
   - Pause scroll on hover

5. CTA SECTION
   - Full-width dark section
   - Large headline + glowing button
   - Button has animated pulse shadow using primary color

6. FOOTER
   - Simple one-liner: "© 2026 [BRAND NAME]. All rights reserved."
   - Subtle, low opacity text

IMPORTANT:
- Every element must use the specified colors, not generic colors.
- Must be fully responsive (mobile, tablet, desktop).
- The output must be a single complete HTML file I can paste directly
  into Systeme.io with zero modifications needed.
- Do NOT use placeholder images. Use only CSS effects and text.
```

---

## STEP 3: REFINE WITH FOLLOW-UP PROMPTS

After your first generation, use these to customize further:

| Want This? | Say This |
|-----------|----------|
| More glow | *"Increase all glow effects to 0.8 intensity"* |
| Add a section | *"Add a testimonials section with 3 glassmorphism quote cards"* |
| Different layout | *"Change the grid to 2 columns with one full-width hero card"* |
| Add animation | *"Add a typewriter typing effect to the hero headline"* |
| Pricing table | *"Add a 3-tier pricing section with glassmorphism cards and a highlighted 'popular' plan"* |
| Email capture | *"Add an email input + submit button in the CTA section"* |
| Compatibility check | *"Audit this code for Systeme.io compatibility — remove any features that won't work in a Raw HTML element"* |

---

## STEP 4: DEPLOY ON SYSTEME.IO

1. **Copy** the full HTML output
2. **Go to** Systeme.io → Funnels → Create new page
3. **Add** a single "Raw HTML" element
4. **Paste** the code
5. **Save** → **Publish** → Done

---

*IO-Lab Blueprint v3.0 — Your brand. Your colors. Deployed in 5 minutes.*

🏆

The Authority Widget

Instantly boosts perceived authority using a grayscale logo marquee logic. Your partners fade in on hover, creating subtle credibility signals.

<!-- =============================================
     IO-LAB :: PRODUCT 4 — THE AUTHORITY WIDGET
     Deep Space Credibility Module with Glassmorphism
     ============================================= -->
<style>
/* ==============================================
   🎨 CUSTOMIZATION PROTOCOL
   ==============================================
   PROTOCOL: Change #8AB4F8 below to your brand
   color hex code to reskin the authority glow.

   --io-accent       → Hover glow color
   --io-accent-alt   → Secondary accent
   --io-bg-deep      → Widget background
   --io-widget-dim   → Default opacity (0.0 - 1.0)
   --io-widget-hover → Hover brightness (0.0 - 1.5)
   --io-glow-str     → Glow intensity on hover
   --io-font         → Your brand font family
   ============================================== */
:root {
    --io-accent: #8AB4F8;
    --io-accent-alt: #24C1E0;
    --io-bg-deep: #0a0a0a;
    --io-widget-dim: 0.35;
    --io-widget-hover: 1.0;
    --io-glow-str: 0.6;
    --io-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ⚠️ SYSTEM CORE — DO NOT MODIFY BELOW ======= */
.io-authority-section {
    background: var(--io-bg-deep);
    padding: 50px 20px;
    display: flex;
    justify-content: center;
}
.io-authority-widget {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 600px;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(138,180,248,0.1);
    background: linear-gradient(135deg,
        rgba(255,255,255,0.03) 0%,
        rgba(255,255,255,0.01) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.io-authority-item {
    opacity: var(--io-widget-dim);
    filter: grayscale(100%) brightness(0.7);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-family: var(--io-font);
    font-weight: 800;
    font-size: 1.1rem;
    color: #FFFFFF;
    border-radius: 10px;
    border: 1px solid transparent;
}
.io-authority-item:hover {
    opacity: var(--io-widget-hover);
    filter: grayscale(0%) brightness(1.2);
    transform: scale(1.1) translateY(-3px);
    text-shadow: 0 0 15px rgba(138,180,248, var(--io-glow-str));
    background: rgba(138,180,248,0.08);
    border-color: rgba(138,180,248,0.15);
    box-shadow:
        0 4px 20px rgba(138,180,248,0.15),
        0 0 40px rgba(36,193,224,0.08);
}
</style>

<div class="io-authority-section">
    <div class="io-authority-widget">
        <!-- Replace these with your authority brands -->
        <span class="io-authority-item">Google</span>
        <span class="io-authority-item">⚡ Supabase</span>
        <span class="io-authority-item">☁ Cloudflare</span>
        <span class="io-authority-item">n8n</span>
        <span class="io-authority-item">○ OpenAI</span>
        <span class="io-authority-item">Hostinger</span>
    </div>
</div>

👁️

The Deep Operations Manifesto

A cinematic parallax scrolling effect that reveals your brand message through a sticky viewport. The background image stays fixed while glowing text burns through—creating an unforgettable entrance.

<!-- =============================================
     IO-LAB :: PRODUCT 5 — THE DEEP OPERATIONS MANIFESTO
     Cinematic Sticky Lens with Dark Glassmorphism
     ============================================= -->
<style>
/* ==============================================
   🎨 CUSTOMIZATION PROTOCOL
   ==============================================
   PROTOCOL: Change #8AB4F8 below to your brand
   color hex code to reskin the lens glow.

   --io-accent      → Text shadow glow color
   --io-accent-alt  → Secondary glow
   --io-bg-deep     → Background darkness
   --io-lens-height → Total scroll distance (vh)
   --io-lens-img    → Your background image URL
   --io-font        → Display font for headline
   ============================================== */
:root {
    --io-accent: #8AB4F8;
    --io-accent-alt: #24C1E0;
    --io-bg-deep: #0a0a0a;
    --io-lens-height: 300vh;
    --io-lens-img: none;
    --io-font: 'Inter', -apple-system, sans-serif;
}

/* ⚠️ SYSTEM CORE — DO NOT MODIFY BELOW ======= */
.io-manifesto-wrapper {
    position: relative;
    width: 100%;
    height: var(--io-lens-height);
    background-color: var(--io-bg-deep);
}
.io-manifesto-lens {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    background: var(--io-lens-img) no-repeat top center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.io-manifesto-lens::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10,10,10,0.3) 0%,
        rgba(10,10,10,0.6) 50%,
        rgba(10,10,10,0.95) 100%);
    pointer-events: none;
}
.io-manifesto-lens::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(10,10,10,0.8) 100%
    );
    pointer-events: none;
}
.io-manifesto-text {
    position: relative;
    z-index: 2;
    font-family: var(--io-font);
    font-size: clamp(2.5rem, 6vw, 6rem);
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    color: #FFFFFF;
    text-shadow:
        0 0 10px rgba(138,180,248,0.8),
        0 0 30px rgba(138,180,248,0.5),
        0 0 60px rgba(36,193,224,0.3),
        0 0 100px rgba(26,115,232,0.2);
    letter-spacing: -1px;
}
.io-manifesto-sub {
    position: relative;
    z-index: 2;
    font-family: var(--io-font);
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    color: rgba(255,255,255,0.4);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 20px;
}
</style>

<div class="io-manifesto-wrapper">
    <div class="io-manifesto-lens">
        <h1 class="io-manifesto-text">
            <span>INTEGRATED</span><br>
            <span>OPERATION LAB</span>
        </h1>
        <p class="io-manifesto-sub">Zero-Touch Architecture</p>
    </div>
</div>

🧠

The Emergency Handoff Protocol

"Break Glass in Case of Emergency." A system prompt to restore the Senior Architect Persona for future AI sessions. Maintains brand consistency across all interactions.

<!-- =============================================
     IO-LAB :: PRODUCT 6 — THE EMERGENCY HANDOFF PROTOCOL
     AI Persona Restoration System Prompt
     ============================================= -->

/* ==============================================
   🎨 CUSTOMIZATION PROTOCOL
   ==============================================
   PROTOCOL: Modify the ROLE, STACK, VIBE, and
   DIRECTIVE fields below to match your brand
   persona. This prompt restores your AI architect
   persona across any ChatGPT/Gemini/Claude session.

   ROLE      → Your architect title
   STACK     → Your tech ecosystem
   VIBE      → Communication style keywords
   DIRECTIVE → Core behavioral rules
   COLORS    → Your brand hex codes
   ============================================== */

[SYSTEM PROMPT: SENIOR CLOUD ARCHITECT]

ROLE: You are the Senior Cloud Architect for IO-Lab.
You design, deploy, and maintain autonomous digital ecosystems.

STACK: Systeme.io | Supabase | n8n | Cloudflare | Hostinger

VIBE: Professional. "Zero-Touch." Architect-Level. Futuristic.
Every response must be deploy-ready, never theoretical.

DIRECTIVE:
1. Guard the code. Never modify working HTML/CSS structure.
2. Enforce the IO-Lab Global Design System at all times.
3. Zero hallucinations. Only reference real APIs and tools.
4. Every output must be production-grade and paste-ready.

DESIGN SYSTEM ENFORCEMENT:
- Backgrounds: Deep Space Obsidian (#0a0a0a)
- Primary Accent: Neon IO-Blue (#8AB4F8)
- Secondary Accent: Cyber-Cyan (#24C1E0)
- Effects: Glassmorphism (5% opacity overlays + backdrop-filter blur)
- Borders: 1px solid rgba(138,180,248,0.1) with glow on hover
- Hover: 3D transforms, scale(1.02-1.05), neon box-shadow
- Typography: Inter for UI, Space Mono for terminals
- Standard: High-end, futuristic, premium. No flat default buttons.

RESPONSE FORMAT:
- Always wrap code in proper language blocks (```html, ```css, ```js)
- Include CUSTOMIZATION PROTOCOL comment at the top of every code block
- Label all CSS custom properties with → arrow descriptions
- Separate SETUP ZONE from SYSTEM CORE sections clearly

CONTEXT RECOVERY:
If this session loses context, remind me to re-paste this prompt.
The canonical source is: IO_PRODUCT_6_HANDOFF.md in IO_LAB_ASSET_VAULT/.

🧊

The Integrated Command Grid

Your operation isn't flat—it's multi-dimensional. This reactive 3D interface visualizes the critical components of your IO-Lab stack with glassmorphic cells.

<!-- =============================================
     IO-LAB :: PRODUCT 7 — THE INTEGRATED COMMAND GRID
     3D Reactive Bento Grid with Glassmorphism
     ============================================= -->
<style>
/* ==============================================
   🎨 CUSTOMIZATION PROTOCOL
   ==============================================
   PROTOCOL: Change #8AB4F8 below to your brand
   color hex code to reskin the grid glow.

   --io-accent     → Cell border glow on hover
   --io-accent-alt → Secondary glow color
   --io-bg-deep    → Grid background
   --io-cell-bg    → Cell glassmorphism opacity (0-1)
   --io-glow-str   → Hover glow intensity (0-1)
   --io-font       → Your brand font family
   ============================================== */
:root {
    --io-accent: #8AB4F8;
    --io-accent-alt: #24C1E0;
    --io-bg-deep: #0a0a0a;
    --io-cell-bg: 0.03;
    --io-glow-str: 0.6;
    --io-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ⚠️ SYSTEM CORE — DO NOT MODIFY BELOW ======= */
.io-command-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 16px;
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px;
    background: var(--io-bg-deep);
}
@media (max-width: 768px) {
    .io-command-grid {
        grid-template-columns: 1fr;
    }
    .io-grid-span-2 { grid-column: span 1 !important; }
}
.io-grid-cell {
    background: linear-gradient(135deg,
        rgba(255,255,255, var(--io-cell-bg)) 0%,
        rgba(255,255,255, calc(var(--io-cell-bg) * 0.3)) 100%);
    border: 1px solid rgba(138,180,248,0.1);
    border-radius: 16px;
    padding: 28px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
}
.io-grid-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(138,180,248,0.3) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.35s;
}
.io-grid-cell:hover {
    border-color: var(--io-accent);
    transform: perspective(1000px) rotateX(2deg) scale(1.02);
    box-shadow:
        0 0 20px rgba(138,180,248, var(--io-glow-str)),
        0 0 50px rgba(36,193,224, calc(var(--io-glow-str) * 0.4)),
        0 0 80px rgba(26,115,232, calc(var(--io-glow-str) * 0.2));
}
.io-grid-cell:hover::before { opacity: 1; }
.io-grid-cell h4 {
    font-family: var(--io-font);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}
.io-grid-cell p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}
.io-grid-cell .io-cell-icon {
    font-size: 1.8rem;
    margin-bottom: 16px;
}
.io-grid-span-2 { grid-column: span 2; }
.io-grid-row-2 { grid-row: span 2; }
</style>

<div class="io-command-grid">
    <!-- Cell 1: Wide -->
    <div class="io-grid-cell io-grid-span-2">
        <div class="io-cell-icon">⚡</div>
        <h4>INTEGRATED OPERATIONS</h4>
        <p>Autonomous digital ecosystems built on industrial-grade infrastructure.</p>
    </div>

    <!-- Cell 2: Tall -->
    <div class="io-grid-cell io-grid-row-2">
        <div class="io-cell-icon">🔧</div>
        <h4>THE STACK</h4>
        <p>Supabase · n8n · Cloudflare · Systeme.io · Hostinger</p>
    </div>

    <!-- Cell 3: Standard -->
    <div class="io-grid-cell">
        <div class="io-cell-icon">🧊</div>
        <h4>3D INTERACTIVE</h4>
        <p>Physics-based UI with depth perception.</p>
    </div>

    <!-- Cell 4: Wide -->
    <div class="io-grid-cell io-grid-span-2">
        <div class="io-cell-icon">🎯</div>
        <h4>VISUAL ENGINE</h4>
        <p>High-end data visualization and cinematic scrolling effects.</p>
    </div>

    <!-- Cell 5: Standard -->
    <div class="io-grid-cell">
        <div class="io-cell-icon">🛡️</div>
        <h4>ZERO-TOUCH</h4>
        <p>Fully automated deployment pipeline.</p>
    </div>
</div>

⌨️

The Kinetic Intelligence Terminal

The JavaScript that types out text character-by-character. Initiates your sequence from the left, establishing immediate technical authority through animated text.

<!-- =============================================
     IO-LAB :: PRODUCT 8 — THE KINETIC INTELLIGENCE TERMINAL
     Futuristic Typewriter with Glassmorphism Window
     ============================================= -->
<style>
/* ==============================================
   🎨 CUSTOMIZATION PROTOCOL
   ==============================================
   PROTOCOL: Change #8AB4F8 below to your brand
   color hex code to reskin the terminal glow.

   --io-accent       → Text + cursor color
   --io-accent-alt   → Prefix chevron color (green)
   --io-bg-deep      → Terminal background
   --io-term-border  → Window border glow
   --io-font-mono    → Terminal font family

   In the <script> section below, edit:
   TERM_CONFIG.text  → Your custom boot message
   TERM_CONFIG.speed → Typing speed (ms per char)
   ============================================== */
:root {
    --io-accent: #8AB4F8;
    --io-accent-alt: #27C93F;
    --io-bg-deep: #0a0a0a;
    --io-term-border: rgba(138,180,248,0.15);
    --io-font-mono: 'Space Mono', 'Courier New', monospace;
}

/* ⚠️ SYSTEM CORE — DO NOT MODIFY BELOW ======= */
.io-kinetic-terminal {
    position: relative;
    max-width: 700px;
    margin: 40px auto;
    background: rgba(0,0,0,0.85);
    border: 1px solid var(--io-term-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 0 30px rgba(0,0,0,0.6),
        0 0 60px rgba(138,180,248,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.io-kinetic-header {
    background: rgba(255,255,255,0.04);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.io-kinetic-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.io-kinetic-dot.r { background: #FF5F56; }
.io-kinetic-dot.y { background: #FFBD2E; }
.io-kinetic-dot.g { background: #27C93F; }
.io-kinetic-title {
    flex: 1;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.30);
    font-family: var(--io-font-mono);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.io-kinetic-body {
    padding: 30px;
    font-family: var(--io-font-mono);
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    color: var(--io-accent);
    text-align: left;
    min-height: 80px;
    line-height: 1.6;
}
.io-kinetic-prefix {
    color: var(--io-accent-alt);
    margin-right: 8px;
    font-weight: 700;
}
.io-kinetic-cursor {
    display: inline-block;
    width: 9px;
    height: 1.15em;
    background: var(--io-accent);
    margin-left: 3px;
    vertical-align: text-bottom;
    animation: io-blink 0.8s step-end infinite;
}
@keyframes io-blink { 50% { opacity: 0; } }
</style>

<div class="io-kinetic-terminal">
    <div class="io-kinetic-header">
        <span class="io-kinetic-dot r"></span>
        <span class="io-kinetic-dot y"></span>
        <span class="io-kinetic-dot g"></span>
        <span class="io-kinetic-title">io-lab.io :: terminal</span>
    </div>
    <div class="io-kinetic-body">
        <span class="io-kinetic-prefix">></span>
        <span id="io-type-output"></span>
        <span class="io-kinetic-cursor"></span>
    </div>
</div>

<script>
/* ==============================================
   🎨 CUSTOMIZATION PROTOCOL (SCRIPT)
   ==============================================
   Change the text and speed below:
   ============================================== */
const TERM_CONFIG = {
    text: "Initializing Integrated Operations...",  // Your message
    speed: 50,                                      // ms per character
    targetID: "io-type-output"                      // Target element ID
};

/* ⚠️ SYSTEM CORE — DO NOT MODIFY BELOW ======= */
(function () {
    var i = 0;
    var target = document.getElementById(TERM_CONFIG.targetID);
    function type() {
        if (i < TERM_CONFIG.text.length) {
            target.textContent += TERM_CONFIG.text.charAt(i);
            i++;
            setTimeout(type, TERM_CONFIG.speed);
        }
    }
    if (target) type();
})();
</script>

📌

The Master Protocol

Instruction & Customization Guide + FAQ | IO-Lab Global Design System. Everything you need to know to customize and deploy.

# IO_PRODUCT_9 — THE MASTER PROTOCOL
### Instruction & Customization Guide + FAQ | IO-Lab Global Design System

---

## 🎨 MASTER CUSTOMIZATION INSTRUCTIONS

### How to Change Colors (All Products)

Every product uses CSS Custom Properties in a `:root` block. To reskin any component:

1. Open the product code block.
2. Find the `🎨 CUSTOMIZATION PROTOCOL` comment at the top.
3. Locate the `:root { }` section.
4. Change these values:

```css
:root {
    --io-accent: #8AB4F8;      /* ← Replace with YOUR brand color */
    --io-accent-alt: #24C1E0;  /* ← Replace with YOUR secondary color */
    --io-bg-deep: #0a0a0a;     /* ← Replace with YOUR background color */
    --io-glow-str: 0.6;        /* ← Glow intensity: 0.0 (none) to 1.0 (max) */
    --io-font: 'Inter', sans-serif; /* ← Replace with YOUR font */
}
```

**Example:** To make everything gold instead of blue:
```css
--io-accent: #FFD700;
--io-accent-alt: #FFA500;
```

### How to Change Text & Content

| Product | What to Edit | Where to Find It |
|---------|-------------|-------------------|
| Product 1 | Button text | `<button class="io-pulse-btn">⚡ YOUR TEXT</button>` |
| Product 2 | Brand names | `<span class="io-trust-item">YOUR BRAND</span>` |
| Product 3 | Deployment steps | `.io-blueprint-step` divs |
| Product 4 | Authority names | `<span class="io-authority-item">YOUR BRAND</span>` |
| Product 5 | Headline text | `<h1 class="io-manifesto-text">YOUR HEADLINE</h1>` |
| Product 6 | AI persona fields | `ROLE:`, `STACK:`, `VIBE:`, `DIRECTIVE:` lines |
| Product 7 | Grid cell content | `<h4>` and `<p>` inside `.io-grid-cell` |
| Product 8 | Boot message | `TERM_CONFIG.text` in the `<script>` section |

### How to Change Fonts

1. Go to [Google Fonts](https://fonts.google.com/)
2. Pick a font → Click "Get embed code" → Copy the `<link>` tag
3. Paste the `<link>` tag ABOVE the `<style>` block
4. Update `--io-font` in the `:root`:

```html
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&display=swap" rel="stylesheet">
<style>
:root {
    --io-font: 'Outfit', sans-serif;
}
</style>
```

---

## 🔗 THE 404 FIX — Replacing YOUR_URL_HERE

### The Problem
In the marketplace HTML file (`502c2cea_IO_LAB_MARKETPLACE_PRODUCTION_READY.html`), there is a `PRODUCT_DRIVE_MAP` object that maps each product to its Google Drive instruction link. 

If you see `YOUR_GOOGLE_DRIVE_LINK_HERE_*`, the link has NOT been configured. Students will receive a **404 error** when they click the link in their email.

### The Fix

1. Open the marketplace HTML file.
2. Press `Ctrl+F` and search for `PRODUCT_DRIVE_MAP`.
3. You will see:

```javascript
const PRODUCT_DRIVE_MAP = {
    'The Operational Trigger': 'YOUR_GOOGLE_DRIVE_LINK_HERE_1',
    'The Integrated Trust Protocol': 'YOUR_GOOGLE_DRIVE_LINK_HERE_2',
    'The Master IO-Lab Blueprint': 'YOUR_GOOGLE_DRIVE_LINK_HERE_3',
    'The Authority Widget': 'YOUR_GOOGLE_DRIVE_LINK_HERE_4',
    'The Deep Operations Manifesto': 'YOUR_GOOGLE_DRIVE_LINK_HERE_5',
    'The Emergency Handoff Protocol': 'YOUR_GOOGLE_DRIVE_LINK_HERE_6',
    'The Integrated Command Grid': 'YOUR_GOOGLE_DRIVE_LINK_HERE_7',
    'The Kinetic Intelligence Terminal': 'YOUR_GOOGLE_DRIVE_LINK_HERE_8',
    'The Overwatch Navigation': 'YOUR_GOOGLE_DRIVE_LINK_HERE_9'
};
```

4. **Replace each placeholder** with the actual Google Drive share URL:

```javascript
'The Operational Trigger': 'https://docs.google.com/document/d/YOUR_DOC_ID/edit?usp=sharing',
```

### Rules for Valid Links
- ✅ Must start with `https://`
- ✅ Must be a Google Drive "Anyone with the link" → Viewer share
- ❌ Do NOT use private/restricted links
- ❌ Do NOT include trailing spaces or line breaks

---

## ❓ FAQ — Common Setup Errors

### Q: The button doesn't glow or pulse.
**A:** The CSS `@keyframes` animation isn't loading. Check:
1. Did you paste the entire `<style>` block? (Not just the HTML)
2. In Systeme.io, use a **single** Raw HTML element for all code.
3. If Systeme.io overrides the animation, add `!important`:
```css
.io-pulse-btn { animation: io-pulse 2s infinite !important; }
```

### Q: The marquee/slider doesn't scroll.
**A:** The duplicate items are missing. You need **two identical sets** of `<span class="io-trust-item">` inside `.io-trust-track` for the infinite loop to work. The `translateX(-50%)` animation requires the content to be at least 2x the viewport width.

### Q: The terminal types nothing.
**A:** Check:
1. The `targetID` in `TERM_CONFIG` matches the `id` attribute of the `<span>` element.
2. The `<script>` block is placed AFTER the HTML, not before it.
3. The text isn't empty: `text: "Your message here"`.

### Q: Returning user still sees the email popup modal.
**A:** This is expected if the user cleared browser data or is using a different browser/incognito mode. The identity is stored in `localStorage` under key `io_user`. Re-submitting is safe — the Edge Function handles duplicates gracefully.

### Q: The sticky header doesn't stick.
**A:** Check:
1. The header must be a **direct child** of the page body (not nested inside a container with `overflow: hidden`).
2. Systeme.io sometimes wraps content in overflow-hidden containers. Try adding:
```css
.io-overwatch-header { position: sticky !important; top: 0 !important; z-index: 9999 !important; }
```

### Q: Colors look wrong after changing hex codes.
**A:** Make sure:
1. Your hex codes include the `#` symbol (e.g., `#FF5733`, not `FF5733`).
2. You only changed values inside `:root { }` — not inside the `SYSTEM CORE` section.
3. Save and hard-refresh (`Ctrl+Shift+R`) to bypass browser cache.

### Q: The Bento Grid stacks on desktop.
**A:** The `@media` query triggers at `768px`. If your preview panel is narrow, it will show the mobile (1-column) layout. Preview in a full browser window or publish and test on a real device.

### Q: Email not being sent after form submission.
**A:** Check the Supabase Edge Function logs:
1. Go to `Supabase Dashboard` → `Edge Functions` → `io-lab-production` → `Logs`
2. Look for CORS errors → Add your domain to the allow-list
3. Look for SMTP 535 → Your SMTP password is incorrect
4. Look for SMTP 421/550 → SPF/DKIM DNS records needed

---

## 📦 Product Quick Reference

| # | Product | File | Type |
|---|---------|------|------|
| 1 | The Operational Trigger | `IO_PRODUCT_1_PULSE.md` | CSS + HTML |
| 2 | The Integrated Trust Protocol | `IO_PRODUCT_2_MARQUEE.md` | CSS + HTML |
| 3 | The Master IO-Lab Blueprint | `IO_PRODUCT_3_BLUEPRINT.md` | CSS + HTML |
| 4 | The Authority Widget | `IO_PRODUCT_4_AUTHORITY.md` | CSS + HTML |
| 5 | The Deep Operations Manifesto | `IO_PRODUCT_5_LENS.md` | CSS + HTML |
| 6 | The Emergency Handoff Protocol | `IO_PRODUCT_6_HANDOFF.md` | Text Prompt |
| 7 | The Integrated Command Grid | `IO_PRODUCT_7_BENTO.md` | CSS + HTML |
| 8 | The Kinetic Intelligence Terminal | `IO_PRODUCT_8_TERMINAL.md` | CSS + HTML + JS |
| 9 | The Master Protocol | `IO_PRODUCT_9_NAV.md` | This Document |

---

*IO-Lab Global Design System v6.2 — Zero guesswork. Zero excuses.*

The IO-Lab.io Integrated
Operations Initiative.

Experience 3D Interactive Design

INTEGRATED OPERATIONS

THE STACK

3D INTERACTIVE DATA

INTEGRATED OPERATION LAB

The IO-Lab Arsenal

The Operational Trigger

The Integrated Trust Protocol

The Master IO-Lab Blueprint

The Authority Widget

The Deep Operations Manifesto

The Emergency Handoff Protocol

The Integrated Command Grid

The Kinetic Intelligence Terminal

The Master Protocol

The IO-Lab.io IntegratedOperations Initiative.

Experience 3D Interactive Design

INTEGRATED OPERATIONS

THE STACK

3D INTERACTIVE DATA

INTEGRATED OPERATION LAB

The IO-Lab Arsenal

The Operational Trigger

The Integrated Trust Protocol

The Master IO-Lab Blueprint

The Authority Widget

The Deep Operations Manifesto

The Emergency Handoff Protocol

The Integrated Command Grid

The Kinetic Intelligence Terminal

The Master Protocol

UNLOCK: ASSET

The IO-Lab.io Integrated
Operations Initiative.