Feauturing
Being in Your Control
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>4K Content Engine – Client Pitch</title>
<style>
/* —– RESET & BASE —– */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Segoe UI’, Roboto, system-ui, -apple-system, sans-serif;
background: #0b0b0b;
color: #fff;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* —– SLIDE CONTAINER —– */
.presentation-wrapper {
position: relative;
width: 100vw;
height: 100vh;
max-width: 1400px;
max-height: 900px;
background: #1a1a1a;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
overflow: hidden;
border-radius: 8px;
}
/* subtle ambient vignette + film-grain flicker to keep the room feeling “on-air” */
.presentation-wrapper::before {
content: “”;
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.slides-container {
position: relative;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 60px 80px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateX(48px) scale(0.985);
transition: opacity 0.65s cubic-bezier(.16,.84,.44,1),
transform 0.65s cubic-bezier(.16,.84,.44,1),
visibility 0.65s;
background: #1a1a1a;
overflow-y: auto;
}
.slide.prev {
transform: translateX(-48px) scale(0.985);
}
.slide.active {
opacity: 1;
visibility: visible;
transform: translateX(0) scale(1);
z-index: 10;
}
/* —– ENTRANCE ANIMATION FOR CONTENT —– */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
.slide .anim-item {
opacity: 0;
}
.slide.active .anim-item {
animation: fadeSlideUp 0.75s cubic-bezier(.16,.84,.44,1) forwards;
}
/* —– GOLD ACCENTS —– */
.gold {
color: #f5a623;
}
.gold-bg {
background: #f5a623;
color: #1a1a1a;
}
h1 {
font-size: clamp(2.8rem, 8vw, 5.5rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 0.5rem;
}
h2 {
font-size: clamp(2rem, 5vw, 3.8rem);
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 1.5rem;
}
h3 {
font-size: clamp(1.4rem, 3vw, 2.4rem);
font-weight: 600;
margin-bottom: 0.75rem;
}
.subhead {
font-size: clamp(1.2rem, 2.5vw, 2rem);
font-weight: 300;
opacity: 0.9;
}
.body-text {
font-size: clamp(1.1rem, 2vw, 1.8rem);
line-height: 1.6;
max-width: 900px;
}
.body-text li {
list-style: none;
margin-bottom: 0.5rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.body-text li::before {
content: “◆”;
color: #f5a623;
font-size: 1.2em;
line-height: 1.4;
}
.icon-list li::before {
content: none;
}
.icon-list li {
margin-bottom: 0.7rem;
}
/* —– GRID & LAYOUT HELPERS —– */
.flex-center {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
width: 100%;
max-width: 1100px;
}
.grid-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
width: 100%;
max-width: 1100px;
}
.stat-number {
font-size: clamp(3.5rem, 10vw, 7rem);
font-weight: 800;
line-height: 1;
}
.stat-label {
font-size: clamp(1rem, 1.8vw, 1.6rem);
font-weight: 300;
opacity: 0.85;
}
.card {
background: rgba(255, 255, 255, 0.04);
padding: 1.8rem 2rem;
border-radius: 16px;
border-left: 4px solid #f5a623;
backdrop-filter: blur(4px);
transition: transform 0.35s ease, background 0.35s ease;
}
.card:hover {
transform: translateY(-6px);
background: rgba(245, 166, 35, 0.08);
}
.card-gold {
background: #f5a623;
color: #1a1a1a;
padding: 2rem;
border-radius: 16px;
}
/* —– CTA SLIDE (all gold) —– */
.slide-cta {
background: #f5a623 !important;
color: #1a1a1a;
}
.slide-cta h1,
.slide-cta h2,
.slide-cta .body-text {
color: #1a1a1a;
}
.slide-cta .body-text li::before {
color: #1a1a1a;
}
/* —– LIVE / ON-AIR INDICATOR (cover) —– */
.live-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
letter-spacing: 2px;
text-transform: uppercase;
color: #ff4d4d;
border: 1px solid rgba(255, 77, 77, 0.4);
padding: 0.35rem 0.9rem;
border-radius: 40px;
margin-bottom: 1.4rem;
}
.live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff4d4d;
animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,77,77,0.6); }
50% { opacity: 0.4; box-shadow: 0 0 0 6px rgba(255,77,77,0); }
}
/* —– WORKFLOW DIAGRAM SLIDE —– */
.workflow-wrap {
width: 100%;
max-width: 1180px;
}
.workflow-svg {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
.wf-node rect, .wf-node circle.node-shape {
fill: rgba(255,255,255,0.05);
stroke: rgba(245,166,35,0.55);
stroke-width: 1.5;
}
.wf-node.wf-camera rect { fill: rgba(245,166,35,0.08); }
.wf-node text {
fill: #fff;
font-family: inherit;
}
.wf-node .wf-label {
font-size: 13px;
font-weight: 600;
}
.wf-node .wf-sub {
font-size: 10px;
fill: rgba(255,255,255,0.55);
}
.wf-path {
fill: none;
stroke: rgba(245,166,35,0.35);
stroke-width: 2;
}
.wf-flow-dash {
fill: none;
stroke: #f5a623;
stroke-width: 2;
stroke-dasharray: 6 10;
animation: dashFlow 1.2s linear infinite;
}
@keyframes dashFlow {
to { stroke-dashoffset: -32; }
}
.wf-pulse {
animation: nodePulse 2.4s ease-in-out infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes nodePulse {
0%, 100% { filter: drop-shadow(0 0 0px rgba(245,166,35,0)); }
50% { filter: drop-shadow(0 0 6px rgba(245,166,35,0.65)); }
}
/* —– NAVIGATION —– */
.nav-controls {
position: absolute;
bottom: 40px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
z-index: 20;
pointer-events: none;
}
.nav-controls > * {
pointer-events: auto;
}
.dot-group {
display: flex;
gap: 14px;
}
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
border: 2px solid transparent;
cursor: pointer;
transition: 0.3s;
}
.dot.active {
background: #f5a623;
border-color: #f5a623;
transform: scale(1.2);
}
.dot:hover {
background: rgba(245, 166, 35, 0.6);
}
.nav-btn {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
width: 52px;
height: 52px;
border-radius: 50%;
font-size: 1.8rem;
cursor: pointer;
transition: 0.25s;
display: flex;
align-items: center;
justify-content: center;
font-weight: 300;
backdrop-filter: blur(4px);
}
.nav-btn:hover {
background: #f5a623;
border-color: #f5a623;
color: #1a1a1a;
transform: scale(1.05);
}
.nav-btn:disabled {
opacity: 0.2;
cursor: default;
transform: none;
}
.slide-counter {
font-size: 1rem;
font-weight: 300;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5);
min-width: 70px;
text-align: center;
}
/* —– RESPONSIVE —– */
@media (max-width: 768px) {
.slide {
padding: 30px 24px;
}
.grid-2col,
.grid-3col {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.nav-btn {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.dot {
width: 10px;
height: 10px;
}
.stat-number {
font-size: 2.8rem;
}
}
@media (max-width: 480px) {
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 1.8rem;
}
.body-text {
font-size: 1rem;
}
.slide {
padding: 20px 16px;
}
}
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.slide, .slide .anim-item, .live-dot, .wf-flow-dash, .wf-pulse, .card {
animation: none !important;
transition: opacity 0.3s ease !important;
transform: none !important;
}
}
/* —– ICON SPRITE UTILITIES —– */
.icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.15em;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-fill { fill: currentColor; stroke: none; }
/* small consistent corner mark repeated on every slide as a visual reference point */
.corner-mark {
position: absolute;
top: 28px;
right: 32px;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.72rem;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(245, 166, 35, 0.55);
z-index: 5;
pointer-events: none;
}
.corner-mark .icon {
width: 20px;
height: 20px;
color: #f5a623;
opacity: 0.75;
}
.slide-cta .corner-mark {
color: rgba(26, 26, 26, 0.55);
}
.slide-cta .corner-mark .icon {
color: #1a1a1a;
}
@media (max-width: 768px) {
.corner-mark { top: 14px; right: 16px; font-size: 0.6rem; }
.corner-mark .icon { width: 15px; height: 15px; }
}
/* mini bar chart (weekly output slide) */
.barchart {
display: flex;
align-items: flex-end;
gap: 0.9rem;
height: 140px;
margin: 1.4rem 0;
}
.barchart .bar {
flex: 1;
background: linear-gradient(180deg, #f5a623, #b97a15);
border-radius: 6px 6px 2px 2px;
transform: scaleY(0);
transform-origin: bottom;
animation: growBar 0.9s cubic-bezier(.16,.84,.44,1) forwards;
position: relative;
}
.barchart .bar span {
position: absolute;
bottom: -26px;
left: 0;
right: 0;
text-align: center;
font-size: 0.72rem;
opacity: 0.6;
}
@keyframes growBar {
to { transform: scaleY(1); }
}
/* scrollbar styling */
.slide::-webkit-scrollbar {
width: 4px;
}
.slide::-webkit-scrollbar-track {
background: transparent;
}
.slide::-webkit-scrollbar-thumb {
background: #f5a623;
border-radius: 4px;
}
</style>
</head>
<body>
<!– ===== ICON SPRITE (reused across every slide) ===== –>
<svg style=”position:absolute; width:0; height:0; overflow:hidden;” aria-hidden=”true”>
<defs>
<symbol id=”icon-camera” viewBox=”0 0 24 24″>
<path d=”M3 8a2 2 0 0 1 2-2h2.2l1.1-1.6A2 2 0 0 1 10 3.6h4a2 2 0 0 1 1.7.9L16.8 6H19a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z”/>
<circle cx=”12″ cy=”13″ r=”3.6″/>
</symbol>
<symbol id=”icon-mic” viewBox=”0 0 24 24″>
<rect x=”9″ y=”2.5″ width=”6″ height=”11″ rx=”3″/>
<path d=”M5.5 11a6.5 6.5 0 0 0 13 0″/>
<path d=”M12 17.5V21M8.5 21h7″/>
</symbol>
<symbol id=”icon-cloud” viewBox=”0 0 24 24″>
<path d=”M7 18a4.5 4.5 0 0 1-.5-8.98A5.5 5.5 0 0 1 17.2 8.1 4 4 0 0 1 17 16H7Z”/>
</symbol>
<symbol id=”icon-signal” viewBox=”0 0 24 24″>
<path d=”M4 12a8 8 0 0 1 16 0M7 12a5 5 0 0 1 10 0″/>
<circle cx=”12″ cy=”12″ r=”1.6″ class=”icon-fill”/>
</symbol>
<symbol id=”icon-calendar” viewBox=”0 0 24 24″>
<rect x=”3.5″ y=”5″ width=”17″ height=”15″ rx=”2″/>
<path d=”M3.5 9.5h17M8 3v4M16 3v4″/>
</symbol>
<symbol id=”icon-clip” viewBox=”0 0 24 24″>
<rect x=”5″ y=”4″ width=”14″ height=”17″ rx=”2″/>
<path d=”M9 4V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1M8.5 11h7M8.5 15h5″/>
</symbol>
<symbol id=”icon-gear” viewBox=”0 0 24 24″>
<circle cx=”12″ cy=”12″ r=”3.2″/>
<path d=”M12 3v2.4M12 18.6V21M4.2 7.5l2 1.2M17.8 15.3l2 1.2M4.2 16.5l2-1.2M17.8 8.7l2-1.2M3 12h2.4M18.6 12H21″/>
</symbol>
<symbol id=”icon-live” viewBox=”0 0 24 24″>
<circle cx=”12″ cy=”12″ r=”3″ class=”icon-fill”/>
<path d=”M7.5 7.5a6.5 6.5 0 0 0 0 9M16.5 7.5a6.5 6.5 0 0 1 0 9″/>
</symbol>
<symbol id=”icon-deliver” viewBox=”0 0 24 24″>
<path d=”M3 11l9-7 9 7″/>
<path d=”M5 10v9a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1v-9″/>
</symbol>
<symbol id=”icon-gimbal” viewBox=”0 0 24 24″>
<circle cx=”12″ cy=”9″ r=”3″/>
<path d=”M6 9a6 6 0 0 1 12 0M12 12v5M8.5 20.5h7″/>
</symbol>
<symbol id=”icon-chart” viewBox=”0 0 24 24″>
<path d=”M4 20V10M11 20V4M18 20v-7″/>
<path d=”M3 20h18″/>
</symbol>
<symbol id=”icon-coin” viewBox=”0 0 24 24″>
<circle cx=”12″ cy=”12″ r=”8.5″/>
<path d=”M12 7.5v9M9.3 15.2c.4.9 1.4 1.4 2.7 1.4 1.7 0 2.8-.8 2.8-2s-1-1.7-2.8-2.1c-1.8-.4-2.7-1-2.7-2.1 0-1.2 1.1-2 2.7-2 1.3 0 2.3.5 2.7 1.4″/>
</symbol>
<symbol id=”icon-aperture” viewBox=”0 0 24 24″>
<circle cx=”12″ cy=”12″ r=”9.5″/>
<path d=”M12 2.5 14.6 9M21.5 12 15 14.6M12 21.5 9.4 15M2.5 12 9 9.4M18.7 5.3 13.3 8.6M18.7 18.7 13.3 15.4M5.3 18.7 8.6 13.3M5.3 5.3 8.6 9.4″/>
</symbol>
<symbol id=”icon-headphones” viewBox=”0 0 24 24″>
<path d=”M4 13v-1a8 8 0 0 1 16 0v1″/>
<rect x=”3″ y=”13″ width=”4″ height=”6″ rx=”1.5″/>
<rect x=”17″ y=”13″ width=”4″ height=”6″ rx=”1.5″/>
</symbol>
</defs>
</svg>
<div class=”presentation-wrapper”>
<div class=”slides-container”>
<!– ===== SLIDE 1: COVER ===== –>
<div class=”slide active” data-index=”0″>
<div class=”corner-mark”><svg class=”icon”><use href=”#icon-aperture”/></svg>4AM · REF 01</div>
<div class=”flex-center”>
<div style=”max-width: 900px;”>
<div class=”live-badge anim-item” style=”animation-delay:.05s;”><span class=”live-dot”></span>On Air Every Morning</div>
<div class=”anim-item” style=”animation-delay:.1s; font-size: clamp(0.9rem, 1.2vw, 1.2rem); letter-spacing: 4px; text-transform: uppercase; color: #f5a623; margin-bottom: 0.5rem;”>Remote Studio Solution</div>
<h1 class=”gold anim-item” style=”animation-delay:.18s;”>Your Daily<br>4K Content Engine</h1>
<p class=”subhead anim-item” style=”margin-bottom: 2.5rem; animation-delay:.32s;”>Live Streaming & Turnkey Video Production –<br>Delivered Every Morning</p>
<div class=”anim-item” style=”animation-delay:.46s; display: flex; flex-wrap: wrap; gap: 2rem; font-size: clamp(1rem, 1.4vw, 1.3rem); opacity: 0.7; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 2rem;”>
<span style=”display:flex; align-items:center; gap:0.5rem;”><svg class=”icon” style=”width:1.3em;height:1.3em;color:#f5a623;”><use href=”#icon-camera”/></svg> 5-Camera 4K Mobile 3-Axis Setup</span>
<span style=”display:flex; align-items:center; gap:0.5rem;”><svg class=”icon” style=”width:1.3em;height:1.3em;color:#f5a623;”><use href=”#icon-signal”/></svg> Hardware Live Stream Switching</span>
<span style=”display:flex; align-items:center; gap:0.5rem;”><svg class=”icon” style=”width:1.3em;height:1.3em;color:#f5a623;”><use href=”#icon-cloud”/></svg> Cloud Delivery by 4AM-Studio</span>
</div>
</div>
</div>
</div>
<!– ===== SLIDE 2: CHALLENGE ===== –>
<div class=”slide” data-index=”1″>
<div class=”corner-mark”><svg class=”icon”><use href=”#icon-aperture”/></svg>4AM · REF 02</div>
<div class=”flex-center”>
<div style=”max-width: 1000px;”>
<h2 class=”gold anim-item” style=”animation-delay:.05s;”>The Challenge</h2>
<ul class=”body-text anim-item” style=”margin-bottom: 1.6rem; animation-delay:.18s;”>
<li>Audiences demand <strong>daily</strong> engagement, but producing 4K daily is expensive.</li>
<li>Renting studios & hiring local crews breaks the budget.</li>
<li>Inconsistent posting kills the algorithm.</li>
</ul>
<!– graphic: a typical “inconsistent posting” week vs a consistent one –>
<div class=”anim-item” style=”animation-delay:.28s; display:flex; flex-wrap:wrap; gap:2.5rem; margin-bottom: 1.6rem;”>
<div>
<div style=”font-size:0.85rem; opacity:0.5; letter-spacing:1px; text-transform:uppercase; margin-bottom:0.5rem;”>Typical DIY Schedule</div>
<div style=”display:flex; gap:6px;”>
<span style=”width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,0.15);”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,0.05); border:1px dashed rgba(255,255,255,0.2);”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,0.05); border:1px dashed rgba(255,255,255,0.2);”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,0.15);”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,0.05); border:1px dashed rgba(255,255,255,0.2);”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,0.05); border:1px dashed rgba(255,255,255,0.2);”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,0.05); border:1px dashed rgba(255,255,255,0.2);”></span>
</div>
</div>
<div>
<div style=”font-size:0.85rem; color:#f5a623; letter-spacing:1px; text-transform:uppercase; margin-bottom:0.5rem;”>With 4AM-Studio</div>
<div style=”display:flex; gap:6px;”>
<span style=”width:26px;height:26px;border-radius:6px;background:#f5a623;”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:#f5a623;”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:#f5a623;”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:#f5a623;”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:#f5a623;”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:#f5a623;”></span>
<span style=”width:26px;height:26px;border-radius:6px;background:#f5a623;”></span>
</div>
</div>
</div>
<div class=”anim-item” style=”animation-delay:.4s; font-size: clamp(1.2rem, 2vw, 1.8rem); color: #f5a623; font-weight: 600; border-left: 4px solid #f5a623; padding-left: 1.5rem;”>
Broadcast quality, without the broadcast overhead.
</div>
</div>
</div>
</div>
<!– ===== SLIDE 3: SOLUTION / RETAINER ===== –>
<div class=”slide” data-index=”2″>
<div class=”corner-mark”><svg class=”icon”><use href=”#icon-aperture”/></svg>4AM · REF 03</div>
<div class=”flex-center”>
<div style=”width: 100%; max-width: 1100px;”>
<h2 class=”gold anim-item” style=”animation-delay:.05s;”>The Daily Retainer – <span style=”font-size: 1.2em;”>€100 / Day</span></h2>
<div class=”grid-2col” style=”margin-top: 1rem;”>
<div class=”anim-item” style=”animation-delay:.18s;”>
<div style=”font-size:0.85rem; opacity:0.5; letter-spacing:1px; text-transform:uppercase; margin-bottom:0.6rem;”>Content Output</div>
<ul class=”body-text icon-list” style=”list-style:none;”>
<li style=”display:flex; align-items:center; gap:0.75rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-live”/></svg><strong>2 x 60min</strong> Live / Recorded Shows</li>
<li style=”display:flex; align-items:center; gap:0.75rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-camera”/></svg><strong>30min</strong> Bonus B-Roll / Vlog Content</li>
<li style=”display:flex; align-items:center; gap:0.75rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-chart”/></svg><strong>5 x 30sec</strong> Vertical Shorts</li>
<li style=”display:flex; align-items:center; gap:0.75rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-deliver”/></svg><strong>1 x 60sec</strong> Hero Post</li>
</ul>
</div>
<div class=”anim-item” style=”animation-delay:.3s;”>
<div style=”font-size:0.85rem; opacity:0.5; letter-spacing:1px; text-transform:uppercase; margin-bottom:0.6rem;”>Production Coverage</div>
<ul class=”body-text icon-list” style=”list-style:none;”>
<li style=”display:flex; align-items:center; gap:0.75rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-signal”/></svg><strong>5-Camera 4K</strong> Live Switching</li>
<li style=”display:flex; align-items:center; gap:0.75rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-gimbal”/></svg>ISO Recording per camera</li>
<li style=”display:flex; align-items:center; gap:0.75rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-gear”/></svg>Real-time graphics & lower-thirds</li>
<li style=”display:flex; align-items:center; gap:0.75rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-cloud”/></svg><strong>Remote Cloud Delivery</strong> by 9 AM</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!– ===== SLIDE 4: WEEKLY OUTPUT ===== –>
<div class=”slide” data-index=”3″>
<div class=”corner-mark”><svg class=”icon”><use href=”#icon-aperture”/></svg>4AM · REF 04</div>
<div class=”flex-center”>
<div style=”width: 100%; max-width: 1000px;”>
<h2 class=”gold anim-item” style=”animation-delay:.05s;”>Weekly Output Calendar</h2>
<!– graphic: 7 equal daily-output bars, illustrating consistent volume every day –>
<div class=”anim-item” style=”animation-delay:.16s; margin-top: 1.4rem;”>
<div class=”barchart”>
<div class=”bar” style=”height:78%; animation-delay:.05s;”><span>Mon</span></div>
<div class=”bar” style=”height:100%; animation-delay:.12s;”><span>Tue</span></div>
<div class=”bar” style=”height:85%; animation-delay:.19s;”><span>Wed</span></div>
<div class=”bar” style=”height:92%; animation-delay:.26s;”><span>Thu</span></div>
<div class=”bar” style=”height:100%; animation-delay:.33s;”><span>Fri</span></div>
<div class=”bar” style=”height:70%; animation-delay:.4s;”><span>Sat</span></div>
<div class=”bar” style=”height:65%; animation-delay:.47s;”><span>Sun</span></div>
</div>
</div>
<p class=”body-text anim-item” style=”animation-delay:.5s; font-size: clamp(1.2rem, 2vw, 1.8rem); margin-top: 1.6rem; display:flex; align-items:center; gap:0.6rem;”>
<svg class=”icon” style=”color:#f5a623;”><use href=”#icon-calendar”/></svg>
<span><strong>Every single day:</strong> 120min Shows + 30min Extra + 6 Edited Posts</span>
</p>
<div class=”anim-item” style=”animation-delay:.6s; background: rgba(245,166,35,0.08); padding: 1.5rem 2rem; border-radius: 16px; margin-top: 1.5rem; border: 1px dashed #f5a623;”>
<span style=”font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 700; color: #f5a623;”>~1,075 minutes</span>
<span style=”font-size: clamp(1rem, 1.4vw, 1.4rem); opacity: 0.8; margin-left: 1rem;”>of finished 4K video delivered per month</span>
</div>
</div>
</div>
</div>
<!– ===== SLIDE 5: TECH SPECS ===== –>
<div class=”slide” data-index=”4″>
<div class=”corner-mark”><svg class=”icon”><use href=”#icon-aperture”/></svg>4AM · REF 05</div>
<div class=”flex-center”>
<div style=”width: 100%; max-width: 1100px;”>
<h2 class=”gold anim-item” style=”animation-delay:.05s;”>Remote 4K Studio – Tech Specs</h2>
<div class=”grid-3col” style=”margin-top: 1.5rem;”>
<div class=”card anim-item” style=”animation-delay:.16s;”>
<svg class=”icon” style=”width:2.4rem; height:2.4rem; color:#f5a623; margin-bottom: 0.5rem;”><use href=”#icon-camera”/></svg>
<h3>Capture</h3>
<p style=”font-size: clamp(0.95rem, 1.2vw, 1.2rem); opacity: 0.9; line-height: 1.5;”>
5x synchronized 4K cameras<br>
<strong>ISO recording</strong> per camera<br>
Broadcast-grade lenses
</p>
</div>
<div class=”card anim-item” style=”animation-delay:.28s;”>
<svg class=”icon” style=”width:2.4rem; height:2.4rem; color:#f5a623; margin-bottom: 0.5rem;”><use href=”#icon-signal”/></svg>
<h3>Broadcast</h3>
<p style=”font-size: clamp(0.95rem, 1.2vw, 1.2rem); opacity: 0.9; line-height: 1.5;”>
Hardware switcher (Blackmagic ATEM)<br>
Low-latency <strong>RTMP streaming</strong><br>
YouTube / Facebook / Custom CDN
</p>
</div>
<div class=”card anim-item” style=”animation-delay:.4s;”>
<svg class=”icon” style=”width:2.4rem; height:2.4rem; color:#f5a623; margin-bottom: 0.5rem;”><use href=”#icon-cloud”/></svg>
<h3>Delivery</h3>
<p style=”font-size: clamp(0.95rem, 1.2vw, 1.2rem); opacity: 0.9; line-height: 1.5;”>
Dedicated audio processing<br>
Real-time graphics overlays<br>
<strong>Frame.io</strong> / Google Drive handoff
</p>
</div>
</div>
</div>
</div>
</div>
<!– ===== SLIDE 6: PODCAST STUDIO FLOOR PLAN (NEW) ===== –>
<div class=”slide” data-index=”5″>
<div class=”corner-mark”><svg class=”icon”><use href=”#icon-aperture”/></svg>4AM · REF 06</div>
<div class=”flex-center”>
<div class=”workflow-wrap”>
<h2 class=”gold anim-item” style=”animation-delay:.05s;”>Studio Floor Plan</h2>
<p class=”anim-item” style=”animation-delay:.14s; opacity:0.7; margin-bottom:1.2rem; font-size: clamp(0.95rem, 1.3vw, 1.2rem); display:flex; align-items:center; gap:0.5rem;”>
<svg class=”icon” style=”color:#f5a623;”><use href=”#icon-mic”/></svg>
Top-down camera & mic placement for a 2-3 host podcast setup.
</p>
<svg class=”workflow-svg anim-item” style=”animation-delay:.22s; max-height: 380px;” viewBox=”0 0 1000 400″ xmlns=”http://www.w3.org/2000/svg”>
<!– room outline –>
<rect x=”20″ y=”20″ width=”960″ height=”360″ rx=”18″ fill=”none” stroke=”rgba(255,255,255,0.08)” stroke-width=”1.5″/>
<!– camera field-of-view cones toward the table –>
<path d=”M 150 90 L 430 190 L 150 210 Z” fill=”rgba(245,166,35,0.06)”/>
<path d=”M 850 90 L 570 190 L 850 210 Z” fill=”rgba(245,166,35,0.06)”/>
<path d=”M 500 40 L 420 170 L 580 170 Z” fill=”rgba(245,166,35,0.06)”/>
<path d=”M 150 330 L 430 220 L 150 210 Z” fill=”rgba(245,166,35,0.05)”/>
<path d=”M 850 330 L 570 220 L 850 210 Z” fill=”rgba(245,166,35,0.05)”/>
<!– table –>
<ellipse cx=”500″ cy=”200″ rx=”180″ ry=”70″ fill=”rgba(255,255,255,0.05)” stroke=”rgba(245,166,35,0.4)” stroke-width=”1.5″/>
<text x=”500″ y=”205″ text-anchor=”middle” class=”wf-sub” style=”font-size:12px;”>TABLE</text>
<!– host + guest seats with mics –>
<g class=”wf-node wf-pulse” style=”animation-delay:0s;”>
<circle cx=”430″ cy=”200″ r=”20″ fill=”rgba(245,166,35,0.15)” stroke=”#f5a623″ stroke-width=”1.5″/>
<text x=”430″ y=”205″ text-anchor=”middle” class=”wf-sub” style=”font-size:10px;”>HOST</text>
</g>
<g class=”wf-node wf-pulse” style=”animation-delay:.3s;”>
<circle cx=”570″ cy=”200″ r=”20″ fill=”rgba(245,166,35,0.15)” stroke=”#f5a623″ stroke-width=”1.5″/>
<text x=”570″ y=”205″ text-anchor=”middle” class=”wf-sub” style=”font-size:10px;”>GUEST</text>
</g>
<!– boom / lav mic icons above seats –>
<g transform=”translate(414,158)”><circle r=”12″ fill=”rgba(255,255,255,0.06)” stroke=”rgba(245,166,35,0.5)”/><svg x=”-8″ y=”-8″ width=”16″ height=”16″ class=”icon” style=”color:#f5a623;”><use href=”#icon-mic”/></svg></g>
<g transform=”translate(554,158)”><circle r=”12″ fill=”rgba(255,255,255,0.06)” stroke=”rgba(245,166,35,0.5)”/><svg x=”-8″ y=”-8″ width=”16″ height=”16″ class=”icon” style=”color:#f5a623;”><use href=”#icon-mic”/></svg></g>
<!– 5 cameras around the room –>
<g class=”wf-node wf-camera”>
<rect x=”95″ y=”70″ width=”110″ height=”36″ rx=”9″/>
<text x=”150″ y=”92″ text-anchor=”middle” class=”wf-label” style=”font-size:12px;”>📷 CAM 1 · Wide</text>
</g>
<g class=”wf-node wf-camera”>
<rect x=”795″ y=”70″ width=”110″ height=”36″ rx=”9″/>
<text x=”850″ y=”92″ text-anchor=”middle” class=”wf-label” style=”font-size:12px;”>📷 CAM 2 · Wide</text>
</g>
<g class=”wf-node wf-camera”>
<rect x=”445″ y=”16″ width=”110″ height=”36″ rx=”9″/>
<text x=”500″ y=”38″ text-anchor=”middle” class=”wf-label” style=”font-size:12px;”>📷 CAM 3 · Top</text>
</g>
<g class=”wf-node wf-camera”>
<rect x=”95″ y=”294″ width=”110″ height=”36″ rx=”9″/>
<text x=”150″ y=”316″ text-anchor=”middle” class=”wf-label” style=”font-size:12px;”>📷 CAM 4 · Close</text>
</g>
<g class=”wf-node wf-camera”>
<rect x=”795″ y=”294″ width=”110″ height=”36″ rx=”9″/>
<text x=”850″ y=”316″ text-anchor=”middle” class=”wf-label” style=”font-size:12px;”>📷 CAM 5 · Close</text>
</g>
<!– key lights –>
<g transform=”translate(280,60)”><circle r=”8″ fill=”#fff9e6″ opacity=”0.8″/></g>
<g transform=”translate(720,60)”><circle r=”8″ fill=”#fff9e6″ opacity=”0.8″/></g>
<g transform=”translate(280,340)”><circle r=”8″ fill=”#fff9e6″ opacity=”0.5″/></g>
<g transform=”translate(720,340)”><circle r=”8″ fill=”#fff9e6″ opacity=”0.5″/></g>
</svg>
<p class=”anim-item” style=”animation-delay:.5s; opacity:0.55; font-size: clamp(0.85rem, 1.1vw, 1.05rem); margin-top: 0.6rem;”>
Every angle covered — wide masters, close-ups, and a top-down b-roll shot, all synced.
</p>
</div>
</div>
</div>
<!– ===== SLIDE 7: LIVE SIGNAL FLOW ===== –>
<div class=”slide” data-index=”6″>
<div class=”corner-mark”><svg class=”icon”><use href=”#icon-aperture”/></svg>4AM · REF 07</div>
<div class=”flex-center”>
<div class=”workflow-wrap”>
<h2 class=”gold anim-item” style=”animation-delay:.05s;”>Live Signal & Delivery Flow</h2>
<p class=”anim-item” style=”animation-delay:.14s; opacity:0.7; margin-bottom:1.2rem; font-size: clamp(0.95rem, 1.3vw, 1.2rem);”>
Every device is routed and recorded in real time — from lens to your inbox.
</p>
<svg class=”workflow-svg anim-item” style=”animation-delay:.22s;” viewBox=”0 0 1120 460″ xmlns=”http://www.w3.org/2000/svg”>
<!– ================= PATHS (behind nodes) ================= –>
<!– 5 cameras -> switcher –>
<path id=”camPath1″ class=”wf-path” d=”M 150 44 C 230 44, 230 150, 300 200″ />
<path id=”camPath2″ class=”wf-path” d=”M 150 132 C 220 132, 240 170, 300 205″ />
<path id=”camPath3″ class=”wf-path” d=”M 150 220 L 300 220″ />
<path id=”camPath4″ class=”wf-path” d=”M 150 308 C 220 308, 240 260, 300 235″ />
<path id=”camPath5″ class=”wf-path” d=”M 150 396 C 230 396, 230 280, 300 240″ />
<!– switcher -> live encoder –>
<path id=”liveOut” class=”wf-path” d=”M 420 205 C 480 165, 500 130, 560 110″ />
<!– switcher -> ISO record –>
<path id=”isoOut” class=”wf-path” d=”M 420 235 C 480 275, 500 320, 560 340″ />
<!– encoder -> YouTube / CDN –>
<path id=”ytOut” class=”wf-path” d=”M 690 100 C 760 70, 780 50, 850 40″ />
<path id=”cdnOut” class=”wf-path” d=”M 690 118 C 760 130, 790 130, 850 128″ />
<!– iso record -> edit –>
<path id=”editOut” class=”wf-path” d=”M 690 340 L 850 340″ />
<!– edit -> cloud delivery –>
<path id=”cloudOut” class=”wf-path” d=”M 970 340 C 1010 320, 1020 280, 1000 240″ />
<!– cloud delivery -> client –>
<path id=”clientOut” class=”wf-path” d=”M 940 210 C 970 190, 1000 190, 1030 210″ />
<!– ================= ANIMATED FLOW DASH OVERLAYS ================= –>
<path class=”wf-flow-dash” d=”M 150 44 C 230 44, 230 150, 300 200″ style=”animation-delay:0s;”/>
<path class=”wf-flow-dash” d=”M 150 132 C 220 132, 240 170, 300 205″ style=”animation-delay:.1s;”/>
<path class=”wf-flow-dash” d=”M 150 220 L 300 220″ style=”animation-delay:.2s;”/>
<path class=”wf-flow-dash” d=”M 150 308 C 220 308, 240 260, 300 235″ style=”animation-delay:.3s;”/>
<path class=”wf-flow-dash” d=”M 150 396 C 230 396, 230 280, 300 240″ style=”animation-delay:.4s;”/>
<path class=”wf-flow-dash” d=”M 420 205 C 480 165, 500 130, 560 110″ style=”animation-delay:.15s;”/>
<path class=”wf-flow-dash” d=”M 420 235 C 480 275, 500 320, 560 340″ style=”animation-delay:.25s;”/>
<path class=”wf-flow-dash” d=”M 690 100 C 760 70, 780 50, 850 40″ style=”animation-delay:.3s;”/>
<path class=”wf-flow-dash” d=”M 690 118 C 760 130, 790 130, 850 128″ style=”animation-delay:.4s;”/>
<path class=”wf-flow-dash” d=”M 690 340 L 850 340″ style=”animation-delay:.35s;”/>
<path class=”wf-flow-dash” d=”M 970 340 C 1010 320, 1020 280, 1000 240″ style=”animation-delay:.45s;”/>
<path class=”wf-flow-dash” d=”M 940 210 C 970 190, 1000 190, 1030 210″ style=”animation-delay:.55s;”/>
<!– ================= TRAVELING SIGNAL DOTS ================= –>
<circle r=”4″ fill=”#f5a623″><animateMotion dur=”1.6s” repeatCount=”indefinite” begin=”0s”><mpath href=”#camPath1″/></animateMotion></circle>
<circle r=”4″ fill=”#f5a623″><animateMotion dur=”1.6s” repeatCount=”indefinite” begin=”.2s”><mpath href=”#camPath2″/></animateMotion></circle>
<circle r=”4″ fill=”#f5a623″><animateMotion dur=”1.6s” repeatCount=”indefinite” begin=”.4s”><mpath href=”#camPath3″/></animateMotion></circle>
<circle r=”4″ fill=”#f5a623″><animateMotion dur=”1.6s” repeatCount=”indefinite” begin=”.6s”><mpath href=”#camPath4″/></animateMotion></circle>
<circle r=”4″ fill=”#f5a623″><animateMotion dur=”1.6s” repeatCount=”indefinite” begin=”.8s”><mpath href=”#camPath5″/></animateMotion></circle>
<circle r=”4.5″ fill=”#ff4d4d”><animateMotion dur=”1.3s” repeatCount=”indefinite” begin=”1.1s”><mpath href=”#liveOut”/></animateMotion></circle>
<circle r=”4.5″ fill=”#f5a623″><animateMotion dur=”1.3s” repeatCount=”indefinite” begin=”1.3s”><mpath href=”#isoOut”/></animateMotion></circle>
<circle r=”4″ fill=”#ff4d4d”><animateMotion dur=”1.2s” repeatCount=”indefinite” begin=”1.6s”><mpath href=”#ytOut”/></animateMotion></circle>
<circle r=”4″ fill=”#ff4d4d”><animateMotion dur=”1.2s” repeatCount=”indefinite” begin=”1.8s”><mpath href=”#cdnOut”/></animateMotion></circle>
<circle r=”4″ fill=”#f5a623″><animateMotion dur=”1.2s” repeatCount=”indefinite” begin=”1.7s”><mpath href=”#editOut”/></animateMotion></circle>
<circle r=”4″ fill=”#f5a623″><animateMotion dur=”1.1s” repeatCount=”indefinite” begin=”2.0s”><mpath href=”#cloudOut”/></animateMotion></circle>
<circle r=”4.5″ fill=”#7CFC9C”><animateMotion dur=”1.1s” repeatCount=”indefinite” begin=”2.3s”><mpath href=”#clientOut”/></animateMotion></circle>
<!– ================= NODES ================= –>
<!– 5 cameras –>
<g class=”wf-node wf-camera”>
<rect x=”10″ y=”24″ width=”140″ height=”40″ rx=”10″/>
<text x=”80″ y=”42″ text-anchor=”middle” class=”wf-label”>📷 CAM 1</text>
<text x=”80″ y=”56″ text-anchor=”middle” class=”wf-sub”>Wide / Host</text>
</g>
<g class=”wf-node wf-camera”>
<rect x=”10″ y=”112″ width=”140″ height=”40″ rx=”10″/>
<text x=”80″ y=”130″ text-anchor=”middle” class=”wf-label”>📷 CAM 2</text>
<text x=”80″ y=”144″ text-anchor=”middle” class=”wf-sub”>Guest A</text>
</g>
<g class=”wf-node wf-camera”>
<rect x=”10″ y=”200″ width=”140″ height=”40″ rx=”10″/>
<text x=”80″ y=”218″ text-anchor=”middle” class=”wf-label”>📷 CAM 3</text>
<text x=”80″ y=”232″ text-anchor=”middle” class=”wf-sub”>Guest B</text>
</g>
<g class=”wf-node wf-camera”>
<rect x=”10″ y=”288″ width=”140″ height=”40″ rx=”10″/>
<text x=”80″ y=”306″ text-anchor=”middle” class=”wf-label”>📷 CAM 4</text>
<text x=”80″ y=”320″ text-anchor=”middle” class=”wf-sub”>3-Axis Gimbal</text>
</g>
<g class=”wf-node wf-camera”>
<rect x=”10″ y=”376″ width=”140″ height=”40″ rx=”10″/>
<text x=”80″ y=”394″ text-anchor=”middle” class=”wf-label”>📷 CAM 5</text>
<text x=”80″ y=”408″ text-anchor=”middle” class=”wf-sub”>Overhead / B-Roll</text>
</g>
<!– switcher –>
<g class=”wf-node wf-pulse” style=”animation-delay:0s;”>
<rect x=”300″ y=”196″ width=”120″ height=”48″ rx=”12″ style=”stroke:#f5a623; fill:rgba(245,166,35,0.12);”/>
<text x=”360″ y=”216″ text-anchor=”middle” class=”wf-label”>🎛 ATEM</text>
<text x=”360″ y=”230″ text-anchor=”middle” class=”wf-sub”>Live Switcher</text>
</g>
<!– live encoder –>
<g class=”wf-node wf-pulse” style=”animation-delay:.3s;”>
<rect x=”560″ y=”88″ width=”130″ height=”44″ rx=”10″/>
<text x=”625″ y=”107″ text-anchor=”middle” class=”wf-label”>📡 Encoder</text>
<text x=”625″ y=”121″ text-anchor=”middle” class=”wf-sub”>RTMP · Low Latency</text>
</g>
<!– iso record –>
<g class=”wf-node wf-pulse” style=”animation-delay:.6s;”>
<rect x=”560″ y=”318″ width=”130″ height=”44″ rx=”10″/>
<text x=”625″ y=”337″ text-anchor=”middle” class=”wf-label”>💾 ISO Record</text>
<text x=”625″ y=”351″ text-anchor=”middle” class=”wf-sub”>Local SSD, per cam</text>
</g>
<!– youtube –>
<g class=”wf-node”>
<rect x=”850″ y=”20″ width=”130″ height=”40″ rx=”10″/>
<text x=”915″ y=”38″ text-anchor=”middle” class=”wf-label”>▶️ YouTube</text>
<text x=”915″ y=”52″ text-anchor=”middle” class=”wf-sub”>Public Live</text>
</g>
<!– facebook/cdn –>
<g class=”wf-node”>
<rect x=”850″ y=”108″ width=”130″ height=”40″ rx=”10″/>
<text x=”915″ y=”126″ text-anchor=”middle” class=”wf-label”>📘 FB / CDN</text>
<text x=”915″ y=”140″ text-anchor=”middle” class=”wf-sub”>Custom Endpoint</text>
</g>
<!– edit –>
<g class=”wf-node wf-pulse” style=”animation-delay:.9s;”>
<rect x=”850″ y=”318″ width=”120″ height=”44″ rx=”10″/>
<text x=”910″ y=”337″ text-anchor=”middle” class=”wf-label”>✂️ Edit & Grade</text>
<text x=”910″ y=”351″ text-anchor=”middle” class=”wf-sub”>Shorts + Hero Post</text>
</g>
<!– cloud delivery –>
<g class=”wf-node wf-pulse” style=”animation-delay:1.1s;”>
<rect x=”940″ y=”188″ width=”130″ height=”44″ rx=”10″/>
<text x=”1005″ y=”207″ text-anchor=”middle” class=”wf-label”>☁️ Cloud Delivery</text>
<text x=”1005″ y=”221″ text-anchor=”middle” class=”wf-sub”>Frame.io / Drive</text>
</g>
<!– client –>
<g class=”wf-node”>
<circle class=”node-shape” cx=”1080″ cy=”216″ r=”30″ style=”stroke:#7CFC9C; fill:rgba(124,252,156,0.1);”/>
<text x=”1080″ y=”212″ text-anchor=”middle” class=”wf-label” style=”font-size:12px;”>📥 Client</text>
<text x=”1080″ y=”226″ text-anchor=”middle” class=”wf-sub”>9 AM Inbox</text>
</g>
</svg>
<p class=”anim-item” style=”animation-delay:.5s; opacity:0.55; font-size: clamp(0.85rem, 1.1vw, 1.05rem); margin-top: 0.8rem;”>
Simultaneous live routing + full-resolution ISO recording — nothing is captured twice.
</p>
</div>
</div>
</div>
<!– ===== SLIDE 8: INVESTMENT ===== –>
<div class=”slide” data-index=”7″>
<div class=”corner-mark”><svg class=”icon”><use href=”#icon-aperture”/></svg>4AM · REF 08</div>
<div class=”flex-center”>
<div style=”width: 100%; max-width: 1050px; text-align: center;”>
<h2 class=”gold anim-item” style=”animation-delay:.05s;”>Investment Breakdown</h2>
<div class=”grid-2col” style=”align-items:center; text-align:left; margin-top: 1rem;”>
<div>
<div class=”anim-item” style=”animation-delay:.16s; margin: 1.5rem 0;”>
<span class=”stat-number gold”>€100</span>
<span style=”font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 300; opacity: 0.7;”> / day</span>
</div>
<div class=”anim-item” style=”animation-delay:.26s; font-size: clamp(1.2rem, 2vw, 1.8rem); opacity: 0.85; margin-bottom: 1.5rem;”>
That’s <strong>€0.65 per finished minute</strong> of 4K content
</div>
<div class=”anim-item” style=”animation-delay:.36s; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; max-width: 500px;”>
<div style=”background: rgba(255,255,255,0.04); padding: 0.9rem; border-radius: 12px; display:flex; flex-direction:column; align-items:center; gap:0.3rem; font-size:0.85rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-clip”/></svg>Full Editing</div>
<div style=”background: rgba(255,255,255,0.04); padding: 0.9rem; border-radius: 12px; display:flex; flex-direction:column; align-items:center; gap:0.3rem; font-size:0.85rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-gear”/></svg>Color Grading</div>
<div style=”background: rgba(255,255,255,0.04); padding: 0.9rem; border-radius: 12px; display:flex; flex-direction:column; align-items:center; gap:0.3rem; font-size:0.85rem;”><svg class=”icon” style=”color:#f5a623;”><use href=”#icon-headphones”/></svg>Audio Mix</div>
</div>
<p class=”anim-item” style=”animation-delay:.46s; margin-top: 1.6rem; font-size: clamp(0.9rem, 1.1vw, 1.15rem); opacity: 0.6;”>
No equipment rental fees. No hidden overtime. Cancel with 7-day notice.
</p>
</div>
<!– graphic: where the €100/day goes –>
<div class=”anim-item” style=”animation-delay:.3s; display:flex; flex-direction:column; align-items:center;”>
<svg viewBox=”0 0 200 200″ width=”200″ height=”200″>
<circle cx=”100″ cy=”100″ r=”70″ fill=”none” stroke=”rgba(255,255,255,0.08)” stroke-width=”26″/>
<circle cx=”100″ cy=”100″ r=”70″ fill=”none” stroke=”#f5a623″ stroke-width=”26″
stroke-dasharray=”184 440″ stroke-dashoffset=”0″ transform=”rotate(-90 100 100)”/>
<circle cx=”100″ cy=”100″ r=”70″ fill=”none” stroke=”#ff9d3f” stroke-width=”26″
stroke-dasharray=”110 440″ stroke-dashoffset=”-184″ transform=”rotate(-90 100 100)”/>
<circle cx=”100″ cy=”100″ r=”70″ fill=”none” stroke=”#ffd08a” stroke-width=”26″
stroke-dasharray=”88 440″ stroke-dashoffset=”-294″ transform=”rotate(-90 100 100)”/>
<circle cx=”100″ cy=”100″ r=”70″ fill=”none” stroke=”rgba(124,252,156,0.85)” stroke-width=”26″
stroke-dasharray=”58 440″ stroke-dashoffset=”-382″ transform=”rotate(-90 100 100)”/>
<text x=”100″ y=”96″ text-anchor=”middle” style=”font-size:15px; fill:#fff; font-weight:700;”>€100</text>
<text x=”100″ y=”114″ text-anchor=”middle” style=”font-size:9px; fill:rgba(255,255,255,0.5);”>per day</text>
</svg>
<div style=”display:grid; grid-template-columns:1fr 1fr; gap:0.4rem 1.2rem; margin-top:0.8rem; font-size:0.8rem; opacity:0.75;”>
<span style=”display:flex; align-items:center; gap:0.4rem;”><span style=”width:10px;height:10px;border-radius:2px;background:#f5a623;display:inline-block;”></span>Crew & shoot</span>
<span style=”display:flex; align-items:center; gap:0.4rem;”><span style=”width:10px;height:10px;border-radius:2px;background:#ff9d3f;display:inline-block;”></span>Editing</span>
<span style=”display:flex; align-items:center; gap:0.4rem;”><span style=”width:10px;height:10px;border-radius:2px;background:#ffd08a;display:inline-block;”></span>Gear & software</span>
<span style=”display:flex; align-items:center; gap:0.4rem;”><span style=”width:10px;height:10px;border-radius:2px;background:#7CFC9C;display:inline-block;”></span>Delivery & storage</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!– ===== SLIDE 9: WORKFLOW STEPS ===== –>
<div class=”slide” data-index=”8″>
<div class=”corner-mark”><svg class=”icon”><use href=”#icon-aperture”/></svg>4AM · REF 09</div>
<div class=”flex-center”>
<div style=”width: 100%; max-width: 1000px;”>
<h2 class=”gold anim-item” style=”animation-delay:.05s;”>Our 4‑Step Workflow</h2>
<div style=”display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.5rem;”>
<div class=”anim-item” style=”animation-delay:.14s; display: flex; align-items: center; gap: 1.5rem; background: rgba(255,255,255,0.03); padding: 1rem 1.8rem; border-radius: 12px; border-left: 4px solid #f5a623;”>
<svg class=”icon” style=”width:2rem; height:2rem; color:#f5a623; min-width:60px;”><use href=”#icon-clip”/></svg>
<div><strong>Brief</strong> – You send topics / scripts 24 hours in advance.</div>
</div>
<div class=”anim-item” style=”animation-delay:.24s; display: flex; align-items: center; gap: 1.5rem; background: rgba(255,255,255,0.03); padding: 1rem 1.8rem; border-radius: 12px; border-left: 4px solid #f5a623;”>
<svg class=”icon” style=”width:2rem; height:2rem; color:#f5a623; min-width:60px;”><use href=”#icon-gimbal”/></svg>
<div><strong>Pre‑Production</strong> – We set up virtual sets, graphics, and camera angles.</div>
</div>
<div class=”anim-item” style=”animation-delay:.34s; display: flex; align-items: center; gap: 1.5rem; background: rgba(255,255,255,0.03); padding: 1rem 1.8rem; border-radius: 12px; border-left: 4px solid #f5a623;”>
<svg class=”icon” style=”width:2rem; height:2rem; color:#f5a623; min-width:60px;”><use href=”#icon-live”/></svg>
<div><strong>Go Live / Record</strong> – We run the entire technical production remotely.</div>
</div>
<div class=”anim-item” style=”animation-delay:.44s; display: flex; align-items: center; gap: 1.5rem; background: rgba(255,255,255,0.03); padding: 1rem 1.8rem; border-radius: 12px; border-left: 4px solid #f5a623;”>
<svg class=”icon” style=”width:2rem; height:2rem; color:#f5a623; min-width:60px;”><use href=”#icon-deliver”/></svg>
<div><strong>Post & Deliver</strong> – We edit highlights, shorts, and deliver masters to your cloud before you wake up.</div>
</div>
</div>
</div>
</div>
</div>
<!– ===== SLIDE 10: CALL TO ACTION ===== –>
<div class=”slide slide-cta” data-index=”9″>
<div class=”corner-mark”><svg class=”icon”><use href=”#icon-aperture”/></svg>4AM · REF 10</div>
<div class=”flex-center” style=”text-align: center;”>
<div style=”max-width: 800px; margin: 0 auto;”>
<svg class=”anim-item icon” style=”animation-delay:0s; width:52px; height:52px; color:#1a1a1a; opacity:0.7; margin-bottom:0.5rem;”><use href=”#icon-aperture”/></svg>
<h1 class=”anim-item” style=”animation-delay:.05s; color: #1a1a1a; font-size: clamp(2.8rem, 7vw, 5rem);”>Ready to go live<br>in 48 hours?</h1>
<p class=”anim-item” style=”animation-delay:.2s; font-size: clamp(1.4rem, 2.5vw, 2.2rem); margin: 1.5rem 0 2.5rem 0; font-weight: 500; color: #1a1a1a;”>
Book your <strong>Trial Week</strong> (5 days) to test our quality.
</p>
<div class=”anim-item” style=”animation-delay:.34s; background: rgba(0,0,0,0.06); padding: 2rem 2.5rem; border-radius: 20px; display: inline-block; text-align: left;”>
<div style=”font-size: clamp(1.6rem, 2.5vw, 2.4rem); font-weight: 700;”>📧 andrei.marcu@icloud.com</div>
<div style=”font-size: clamp(1.2rem, 1.8vw, 1.6rem); margin-top: 0.5rem; opacity: 0.8;”>📞 +40 744 520 699</div>
<div style=”font-size: clamp(0.9rem, 1vw, 1.1rem); margin-top: 0.8rem; opacity: 0.6; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 0.8rem;”>
We handle the tech. You handle the creativity.
</div>
</div>
</div>
</div>
</div>
</div><!– /slides-container –>
<!– ===== NAVIGATION ===== –>
<div class=”nav-controls”>
<button class=”nav-btn” id=”prevBtn” aria-label=”Previous”>‹</button>
<div class=”dot-group” id=”dotGroup”></div>
<span class=”slide-counter” id=”slideCounter”>1 / 10</span>
<button class=”nav-btn” id=”nextBtn” aria-label=”Next”>›</button>
</div>
</div>
<script>
(function() {
const slides = document.querySelectorAll(‘.slide’);
const total = slides.length;
let current = 0;
const dotGroup = document.getElementById(‘dotGroup’);
const counter = document.getElementById(‘slideCounter’);
const prevBtn = document.getElementById(‘prevBtn’);
const nextBtn = document.getElementById(‘nextBtn’);
// Create dots
for (let i = 0; i < total; i++) {
const dot = document.createElement(‘span’);
dot.className = ‘dot’ + (i === 0 ? ‘ active’ : ”);
dot.dataset.index = i;
dot.addEventListener(‘click’, () => goTo(i));
dotGroup.appendChild(dot);
}
const dots = dotGroup.querySelectorAll(‘.dot’);
function updateUI() {
slides.forEach((slide, i) => {
slide.classList.remove(‘active’, ‘prev’, ‘next’);
if (i === current) {
slide.classList.add(‘active’);
} else if (i < current) {
slide.classList.add(‘prev’);
} else {
slide.classList.add(‘next’);
}
});
dots.forEach((dot, i) => {
dot.classList.toggle(‘active’, i === current);
});
counter.textContent = (current + 1) + ‘ / ‘ + total;
prevBtn.disabled = (current === 0);
nextBtn.disabled = (current === total – 1);
}
function goTo(index) {
if (index < 0) index = 0;
if (index >= total) index = total – 1;
if (index === current) return;
current = index;
updateUI();
}
function next() {
if (current < total – 1) goTo(current + 1);
}
function prev() {
if (current > 0) goTo(current – 1);
}
// Event listeners
prevBtn.addEventListener(‘click’, () => prev());
nextBtn.addEventListener(‘click’, () => next());
// Keyboard support
document.addEventListener(‘keydown’, (e) => {
if (e.key === ‘ArrowRight’ || e.key === ‘ArrowDown’ || e.key === ‘ ‘) {
e.preventDefault();
next();
} else if (e.key === ‘ArrowLeft’ || e.key === ‘ArrowUp’) {
e.preventDefault();
prev();
} else if (e.key === ‘Home’) {
e.preventDefault();
goTo(0);
} else if (e.key === ‘End’) {
e.preventDefault();
goTo(total – 1);
}
});
// Touch / swipe support for mobile
let touchStartX = 0;
let touchStartY = 0;
const wrapper = document.querySelector(‘.presentation-wrapper’);
wrapper.addEventListener(‘touchstart’, (e) => {
touchStartX = e.changedTouches[0].screenX;
touchStartY = e.changedTouches[0].screenY;
}, { passive: true });
wrapper.addEventListener(‘touchend’, (e) => {
const dx = e.changedTouches[0].screenX – touchStartX;
const dy = e.changedTouches[0].screenY – touchStartY;
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
if (dx < 0) next();
else prev();
}
}, { passive: true });
// Initialize
updateUI();
})();
</script>
</body>
</html>

