<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optiim — Cloud. Engineered.</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=Space+Grotesk:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0B0B0F;
--surface: #1A1A22;
--text: #F8FAFC;
--text-secondary: #94A3B8;
--accent: #FF2D7A;
--accent-dim: rgba(255,45,122,0.12);
--border: rgba(255,255,255,0.07);
--font: 'Space Grotesk', sans-serif;
--font-mono: 'DM Mono', monospace;
--section-pad: 120px;
--card-pad: 32px;
--gap: 24px;
--radius: 12px;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 18px; line-height: 1.6; overflow-x: hidden; }
h1 { font-size: 64px; font-weight: 700; line-height: 1.0; letter-spacing: -0.03em; }
h2 { font-size: 42px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.3; }
p { color: var(--text-secondary); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
section { padding: var(--section-pad) 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.container--narrow { max-width: 900px; margin: 0 auto; padding: 0 48px; }
.container--cta { max-width: 700px; margin: 0 auto; padding: 0 48px; }
/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 8px; font-family: var(--font); font-size: 16px; font-weight: 600; cursor: pointer; border: none; transition: transform 0.2s, box-shadow 0.2s; letter-spacing: 0.01em; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,45,122,0.4); }
.btn--ghost { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(8px); }
.btn--ghost:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
/* ---- Cards ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad); transition: transform 0.25s, box-shadow 0.25s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 48px rgba(255,45,122,0.15); }
.card h3 { color: var(--text); margin-bottom: 12px; }
.card p { font-size: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.section-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.divider { height: 1px; background: var(--border); }
.card__icon { width: 48px; height: 48px; background: var(--accent-dim); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.card__icon svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.service-tag { display: inline-flex; align-items: center; background: var(--accent-dim); border: 1px solid rgba(255,45,122,0.2); border-radius: 100px; padding: 5px 12px; font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
/* =====================
NAVIGATION
===================== */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 20px 0;
transition: padding 0.3s, background 0.3s;
}
nav.scrolled { background: rgba(11,11,15,0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 14px 0; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; flex-direction: column; gap: 1px; }
.nav-logo-mark { font-size: 18px; font-weight: 700; letter-spacing: 0.06em; color: var(--text); }
.nav-logo-mark span { color: var(--accent); }
.nav-logo-sub { font-size: 9px; font-weight: 600; letter-spacing: 0.2em; color: var(--text-secondary); text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
/* =====================
HERO — full bleed, diagram centred
===================== */
#hero {
position: relative;
height: 100vh;
min-height: 800px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0;
}
/* Particle bg */
#hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Infinity canvas — fills the whole hero */
#infinity-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
cursor: default;
z-index: 2;
}
/* Bottom gradient so text sits on dark */
.hero__vignette {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 60% 50% at 20% 55%,
rgba(11,11,15,0.82) 0%,
rgba(11,11,15,0.3) 55%,
rgba(11,11,15,0) 100%
);
z-index: 3;
pointer-events: none;
}
.hero__vignette-bottom {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 240px;
background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
z-index: 3;
pointer-events: none;
}
/* Text block — bottom-left, sits above everything */
.hero__content {
position: relative;
z-index: 4;
padding: 0 64px 72px;
max-width: 680px;
pointer-events: auto;
}
/* No separate right col needed */
.hero__right-col { display: none; }
.hero__eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}
.hero__eyebrow-line { width: 28px; height: 2px; background: var(--accent); }
.hero__eyebrow-text { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.hero__h1 { margin-bottom: 28px; color: var(--text); }
.hero__h1 em { color: var(--accent); font-style: normal; }
.hero__sub { font-size: 19px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 44px; max-width: 500px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 64px; }
/* Trusted-by strip */
.hero__trusted { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 28px; }
.hero__trusted-label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 16px; opacity: 0.6; }
.hero__logos { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.hero__logo-item { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.25); letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; }
.hero__logo-item:hover { color: rgba(255,255,255,0.5); }
/* Hero entrance animations */
@keyframes heroUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
.h-anim { animation: heroUp 0.75s cubic-bezier(0.22,1,0.36,1) both; }
.h-anim:nth-child(1) { animation-delay: 0.05s; }
.h-anim:nth-child(2) { animation-delay: 0.18s; }
.h-anim:nth-child(3) { animation-delay: 0.3s; }
.h-anim:nth-child(4) { animation-delay: 0.42s; }
.h-anim:nth-child(5) { animation-delay: 0.55s; }
.h-anim:nth-child(6) { animation-delay: 0.68s; }
/* =====================
SECTION 2: PROBLEM
===================== */
#problem { text-align: center; }
#problem h2 { margin-bottom: 12px; }
.problem-sub { font-size: 18px; margin-bottom: 56px; }
.problem-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad); text-align: left; transition: transform 0.25s, box-shadow 0.25s; }
.problem-card:hover { transform: translateY(-4px); box-shadow: 0 12px 48px rgba(255,45,122,0.12); }
.problem-card__num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 16px; }
.problem-card h3 { font-size: 19px; color: var(--text); margin-bottom: 10px; }
.problem-card p { font-size: 15px; }
.closing-line { margin-top: 48px; font-size: 17px; font-style: italic; }
.closing-line strong { color: var(--accent); font-style: normal; font-weight: 600; }
/* =====================
SECTION 3: WHAT WE DO
===================== */
#what-we-do .section-header { margin-bottom: 64px; }
#what-we-do h2 { margin-bottom: 14px; }
/* =====================
SECTION 4: SIGNATURE — cinematic full bleed
===================== */
#signature {
position: relative;
height: 520px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
#sig-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.sig__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(11,11,15,0.3) 0%, rgba(11,11,15,0) 40%, rgba(11,11,15,0) 60%, rgba(11,11,15,0.3) 100%);
}
.sig__overlay-top { position: absolute; top: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%); }
.sig__overlay-bot { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to top, var(--bg) 0%, transparent 100%); }
.sig__content {
position: relative;
z-index: 2;
text-align: center;
}
.sig__words {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
}
.sig__word {
font-size: 52px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff;
padding: 0 40px;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.sig__word.visible { opacity: 1; transform: translateY(0); }
.sig__word:nth-child(1).visible { transition-delay: 0s; }
.sig__word:nth-child(3).visible { transition-delay: 0.12s; }
.sig__word:nth-child(5).visible { transition-delay: 0.24s; }
.sig__divider {
width: 1px;
height: 44px;
background: var(--accent);
opacity: 0.7;
flex-shrink: 0;
}
/* =====================
SECTION 5: PROOF
===================== */
#proof { text-align: center; }
.proof-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); margin-top: 64px; }
.proof-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px var(--card-pad); text-align: center; transition: transform 0.25s, box-shadow 0.25s; }
.proof-card:hover { transform: translateY(-4px); box-shadow: 0 12px 48px rgba(255,45,122,0.12); }
.proof-number { font-size: 54px; font-weight: 700; color: var(--text); letter-spacing: -0.03em; line-height: 1; display: inline-block; position: relative; }
.proof-number::after { content:''; position:absolute; bottom:-5px; left:0; right:0; height:3px; background:var(--accent); border-radius:2px; }
.proof-card p { margin-top: 20px; font-size: 15px; line-height: 1.5; }
/* =====================
IAC SECTION
===================== */
.iac-diagram { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; font-family: var(--font-mono); font-size: 13px; line-height: 1.85; }
.iac-line { display: flex; align-items: center; gap: 10px; }
.iac-indent { padding-left: 22px; }
.iac-mod { color: var(--accent); font-weight: 500; }
.iac-key { color: #7DD3FC; }
.iac-val { color: #86EFAC; }
.iac-cmt { color: #3E4C5E; }
.iac-arrow { color: var(--accent); }
#iac .iac-copy { font-size: 18px; margin-bottom: 32px; line-height: 1.7; }
/* =====================
PROCESS
===================== */
#process .section-header { margin-bottom: 64px; }
.process-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad); transition: transform 0.25s, box-shadow 0.25s; }
.process-card:hover { transform: translateY(-4px); box-shadow: 0 12px 48px rgba(255,45,122,0.12); }
.process-step-num { font-size: 44px; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 20px; font-family: var(--font-mono); }
.process-card h3 { font-size: 22px; margin-bottom: 12px; }
/* =====================
CTA
===================== */
.cta-box { background: var(--surface); border: 1px solid rgba(255,45,122,0.2); border-radius: var(--radius); padding: 72px 48px; text-align: center; position: relative; overflow: hidden; }
.cta-box::before { content:''; position:absolute; inset:-1px; border-radius:var(--radius); background:linear-gradient(135deg,rgba(255,45,122,0.12) 0%,transparent 50%,rgba(255,45,122,0.05) 100%); pointer-events:none; }
.cta-box h2 { font-size: 42px; margin-bottom: 16px; position: relative; }
.cta-box > p { margin-bottom: 40px; font-size: 18px; position: relative; }
.cta-box .btn { position: relative; font-size: 17px; padding: 18px 40px; }
/* =====================
FOOTER
===================== */
footer { background: var(--surface); border-top: 1px solid var(--border); padding: 48px 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-links { display: flex; gap: 32px; list-style: none; }
.footer-links a { font-size: 14px; color: var(--text-secondary); transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 14px; color: var(--text-secondary); }
/* =====================
SCROLL REVEALS
===================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0s; }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.1s; }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.2s; }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.3s; }
.reveal-stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.4s; }
/* =====================
MOBILE
===================== */
@media (max-width: 768px) {
h1 { font-size: 38px; }
h2 { font-size: 28px; }
body { font-size: 16px; }
:root { --section-pad: 72px; --card-pad: 24px; }
.container, .container--narrow, .container--cta { padding: 0 20px; }
#hero { height: auto; min-height: 100svh; justify-content: flex-end; }
.hero__content { padding: 0 20px 56px; }
#infinity-canvas { height: 100%; }
.hero__h1 { font-size: 38px; }
.hero__sub { font-size: 16px; }
.hero__ctas { flex-direction: column; }
.hero__ctas .btn { width: 100%; justify-content: center; }
.grid-3, .grid-2, .proof-grid { grid-template-columns: 1fr; }
.nav-links, .nav-cta-wrap { display: none; }
.sig__word { font-size: 28px; padding: 0 16px; letter-spacing: 0.1em; }
.sig__divider { height: 28px; }
#signature { height: 280px; }
.cta-box { padding: 48px 24px; }
.cta-box h2 { font-size: 26px; }
.cta-box .btn { width: 100%; justify-content: center; }
.footer-inner { flex-direction: column; align-items: flex-start; }
.footer-links { flex-wrap: wrap; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav id="navbar">
<div class="nav-inner">
<a href="#" class="nav-logo">
<span class="nav-logo-mark">OPTI<span>IM</span></span>
<span class="nav-logo-sub">Cloud. Engineered.</span>
</a>
<ul class="nav-links">
<li><a href="#what-we-do">Services</a></li>
<li><a href="#process">Approach</a></li>
<li><a href="#proof">Results</a></li>
<li><a href="#iac">Platform</a></li>
</ul>
<div class="nav-cta-wrap">
<a href="#cta" class="btn btn--primary" style="padding:11px 22px;font-size:14px;">Get Assessment</a>
</div>
</div>
</nav>
<!-- =====================
HERO
===================== -->
<section id="hero">
<!-- Layer 1: particle field bg -->
<canvas id="hero-canvas"></canvas>
<!-- Layer 2: infinity diagram — full bleed, centred -->
<canvas id="infinity-canvas"></canvas>
<!-- Layer 3: vignettes for readability -->
<div class="hero__vignette"></div>
<div class="hero__vignette-bottom"></div>
<!-- Layer 4: text — bottom-left -->
<div class="hero__content">
<div class="hero__eyebrow h-anim">
<div class="hero__eyebrow-line"></div>
<span class="hero__eyebrow-text">Cloud Engineering & Optimisation</span>
</div>
<h1 class="hero__h1 h-anim">
Cloud. Engineered<br>for <em>Scale.</em>
</h1>
<p class="hero__sub h-anim">
We design, automate and secure cloud platforms for high-growth businesses that can't afford inefficiency, risk, or downtime.
</p>
<div class="hero__ctas h-anim">
<a href="#cta" class="btn btn--primary">👉 Get a 30-Day Assessment</a>
<a href="#what-we-do" class="btn btn--ghost">Learn More</a>
</div>
<div class="hero__trusted h-anim">
<div class="hero__trusted-label">Trusted by high-growth businesses</div>
<div class="hero__logos">
<span class="hero__logo-item">TechVantage</span>
<span class="hero__logo-item">Novus</span>
<span class="hero__logo-item">DataPoint</span>
<span class="hero__logo-item">Synergy</span>
<span class="hero__logo-item">Mara</span>
</div>
</div>
</div>
</section>
<!-- PROBLEM -->
<section id="problem">
<div class="container--narrow">
<span class="section-label reveal">The Problem</span>
<h2 class="reveal">Most cloud environments<br>aren't built to scale.</h2>
<div class="grid-3 reveal-stagger" style="margin-top:52px;">
<div class="problem-card">
<div class="problem-card__num">01</div>
<h3>Costs spiral without control</h3>
<p>Unmanaged cloud spend grows faster than your business — and nobody can explain why.</p>
</div>
<div class="problem-card">
<div class="problem-card__num">02</div>
<h3>Security is reactive, not engineered</h3>
<p>Most teams fix vulnerabilities after discovery. By then, the exposure has already happened.</p>
</div>
<div class="problem-card">
<div class="problem-card__num">03</div>
<h3>Infrastructure becomes fragile under growth</h3>
<p>What works today breaks under scale. Technical debt accumulates silently until it becomes a crisis.</p>
</div>
</div>
<p class="closing-line reveal">The result? <strong>Risk, inefficiency, and lost momentum.</strong></p>
</div>
</section>
<div class="divider"></div>
<!-- WHAT WE DO -->
<section id="what-we-do">
<div class="container">
<div class="section-header">
<span class="section-label reveal">What We Do</span>
<h2 class="reveal">We don't manage cloud.<br>We engineer it.</h2>
</div>
<div class="grid-3 reveal-stagger">
<div class="card">
<div class="card__icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div>
<div class="service-tag">Cloud Optimisation</div>
<h3>Cloud Optimisation</h3>
<p>Reduce cloud costs by 20–40% through intelligent architecture and automation — without sacrificing performance or reliability.</p>
</div>
<div class="card">
<div class="card__icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></div>
<div class="service-tag">DevOps & Automation</div>
<h3>DevOps & Automation</h3>
<p>Deploy faster, safer, and repeatably using Infrastructure as Code — eliminating manual effort and letting your teams ship with confidence.</p>
</div>
<div class="card">
<div class="card__icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
<div class="service-tag">Security by Design</div>
<h3>Security by Design</h3>
<p>Embed security into every layer — not bolt it on afterwards. Continuous compliance, not point-in-time audits.</p>
</div>
</div>
</div>
</section>
<!-- =====================
SIGNATURE — cinematic
===================== -->
<section id="signature">
<canvas id="sig-canvas"></canvas>
<div class="sig__overlay"></div>
<div class="sig__overlay-top"></div>
<div class="sig__overlay-bot"></div>
<div class="sig__content">
<div class="sig__words">
<span class="sig__word" id="sw1">AUTOMATED</span>
<div class="sig__divider"></div>
<span class="sig__word" id="sw2">SECURE</span>
<div class="sig__divider"></div>
<span class="sig__word" id="sw3">SCALABLE</span>
</div>
</div>
</section>
<!-- PROOF -->
<section id="proof">
<div class="container">
<span class="section-label reveal">Results That Matter</span>
<div class="proof-grid reveal-stagger">
<div class="proof-card">
<div class="proof-number">30%+</div>
<p>Cost reduction opportunities identified across cloud environments</p>
</div>
<div class="proof-card">
<div class="proof-number">∞</div>
<p>Built for businesses scaling fast — platform grows with you</p>
</div>
<div class="proof-card">
<div class="proof-number" style="font-size:32px;letter-spacing:-0.01em;">Enterprise</div>
<p>Grade architecture and delivery — from day one</p>
</div>
</div>
<div class="reveal" style="margin-top:64px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);padding:40px;max-width:740px;margin-left:auto;margin-right:auto;">
<p style="font-size:19px;font-style:italic;color:var(--text);line-height:1.65;margin-bottom:24px;">"Optiim's contributions to infrastructure management have been invaluable and we are grateful to have such a talented team help us as part of Mara."</p>
<div style="display:flex;align-items:center;gap:16px;">
<div style="width:44px;height:44px;background:var(--accent-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--accent);">SM</div>
<div>
<p style="color:var(--text);font-size:15px;font-weight:600;margin-bottom:2px;">Simon Mbugua</p>
<p style="font-size:13px;margin:0;">SRE / DevOps Infrastructure Manager, Mara</p>
</div>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- IAC -->
<section id="iac">
<div class="container">
<div class="grid-2" style="gap:72px;align-items:start;">
<div>
<span class="section-label reveal">The Differentiator</span>
<h2 class="reveal">Powered by reusable<br>Infrastructure as Code.</h2>
<p class="iac-copy reveal">Our library of proven, reusable modules enables faster deployment, reduced risk, and consistent, scalable environments across your cloud platform.</p>
<div class="reveal" style="display:flex;flex-direction:column;gap:14px;">
<div style="display:flex;gap:14px;align-items:flex-start;"><div style="width:7px;height:7px;background:var(--accent);border-radius:50%;margin-top:9px;flex-shrink:0;"></div><p style="font-size:16px;">Faster deployment through pre-built, tested modules</p></div>
<div style="display:flex;gap:14px;align-items:flex-start;"><div style="width:7px;height:7px;background:var(--accent);border-radius:50%;margin-top:9px;flex-shrink:0;"></div><p style="font-size:16px;">Reduced risk via peer-reviewed, version-controlled code</p></div>
<div style="display:flex;gap:14px;align-items:flex-start;"><div style="width:7px;height:7px;background:var(--accent);border-radius:50%;margin-top:9px;flex-shrink:0;"></div><p style="font-size:16px;">Consistent environments from development to production</p></div>
</div>
</div>
<div class="iac-diagram reveal">
<div class="iac-line"><span class="iac-cmt"># optiim / iac-library</span></div>
<div style="height:10px"></div>
<div class="iac-line"><span class="iac-mod">module</span> <span style="color:var(--text)">"landing-zone" {</span></div>
<div class="iac-line iac-indent"><span class="iac-key">source</span> <span style="color:var(--text-secondary)">=</span> <span class="iac-val">"optiim/aws/landing-zone"</span></div>
<div class="iac-line iac-indent"><span class="iac-key">version</span> <span style="color:var(--text-secondary)">=</span> <span class="iac-val">"~> 3.2"</span></div>
<div style="height:8px"></div>
<div class="iac-line iac-indent"><span class="iac-key">enable_finops</span> <span style="color:var(--text-secondary)">=</span> <span class="iac-val">true</span></div>
<div class="iac-line iac-indent"><span class="iac-key">enable_secops</span> <span style="color:var(--text-secondary)">=</span> <span class="iac-val">true</span></div>
<div class="iac-line iac-indent"><span class="iac-key">compliance</span> <span style="color:var(--text-secondary)">=</span> <span class="iac-val">"cis-aws"</span></div>
<div class="iac-line"><span style="color:var(--text)">}</span></div>
<div style="height:12px"></div>
<div class="iac-line"><span class="iac-cmt">✓ Deployed · Validated · Monitored</span></div>
<div style="height:8px;border-top:1px solid rgba(255,255,255,0.05);margin-top:8px;padding-top:12px;"></div>
<div class="iac-line" style="gap:8px;"><span style="color:#86EFAC;font-size:11px">●</span><span style="color:var(--text-secondary);font-size:12px">landing-zone</span><span class="iac-arrow">→</span><span style="color:var(--text-secondary);font-size:12px">finops-module</span></div>
<div class="iac-line iac-indent" style="gap:8px;margin-top:4px;"><span style="color:#86EFAC;font-size:11px">●</span><span style="color:var(--text-secondary);font-size:12px">secops-module</span></div>
<div class="iac-line iac-indent" style="gap:8px;margin-top:4px;"><span style="color:#86EFAC;font-size:11px">●</span><span style="color:var(--text-secondary);font-size:12px">cloudops-module</span></div>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- PROCESS -->
<section id="process">
<div class="container">
<div class="section-header">
<span class="section-label reveal">Engagement Model</span>
<h2 class="reveal">Advisory-led.<br>Outcome-focused.</h2>
</div>
<div class="grid-3 reveal-stagger">
<div class="process-card">
<div class="process-step-num">01</div>
<h3>Assess</h3>
<p>Understand your current environment — costs, security posture, architecture, and operational gaps — with a comprehensive 30-day cloud audit.</p>
</div>
<div class="process-card">
<div class="process-step-num">02</div>
<h3>Design</h3>
<p>Architect for cost, performance, and security. We design a phased, prioritised roadmap using our proven IaC library to accelerate delivery.</p>
</div>
<div class="process-card">
<div class="process-step-num">03</div>
<h3>Optimise</h3>
<p>Continuously improve and scale. Automation, monitoring, and co-pilot delivery ensure your cloud keeps pace as your business grows.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section id="cta">
<div class="container--cta">
<div class="cta-box reveal">
<span class="section-label">Free Assessment</span>
<h2>Know where your cloud<br>is failing.</h2>
<p>Get your 30-Day Cloud, Security & Cost Assessment — delivered by cloud engineers, not a sales deck.</p>
<a href="mailto:engage@optiim.io" class="btn btn--primary">👉 Get your 30-Day Cloud, Security & Cost Assessment</a>
<p style="margin-top:20px;font-size:14px;">No obligation · +44 0204 583 3215 · engage@optiim.io</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-inner">
<div class="nav-logo">
<span class="nav-logo-mark">OPTI<span>IM</span></span>
<span class="nav-logo-sub">Cloud. Engineered.</span>
</div>
<ul class="footer-links">
<li><a href="#what-we-do">Services</a></li>
<li><a href="#process">Approach</a></li>
<li><a href="#proof">Results</a></li>
<li><a href="mailto:engage@optiim.io">Contact</a></li>
</ul>
<p class="footer-copy">© Optiim 2024 — All rights reserved.</p>
</div>
</footer>
<script>
/* ============================================================
HERO BACKGROUND CANVAS — speed-line particle field
============================================================ */
(function(){
const canvas = document.getElementById('hero-canvas');
const ctx = canvas.getContext('2d');
let W, H;
function resize(){
W = canvas.width = canvas.offsetWidth;
H = canvas.height = canvas.offsetHeight;
}
resize();
window.addEventListener('resize', resize);
const VP = { get x(){ return W*0.72; }, get y(){ return H*0.44; } };
const N = 160;
const lines = [];
function mkLine(){
return { angle: Math.random()*Math.PI*2, r: Math.random()*Math.max(500,Math.max(W,H))*0.65,
speed: 0.6+Math.random()*2.8, len: 18+Math.random()*110,
alpha: 0.1+Math.random()*0.45, hue: Math.random()>0.55?'pink':'blue', w: 0.25+Math.random()*0.75 };
}
for(let i=0;i<N;i++) lines.push(mkLine());
const flares=[];
for(let i=0;i<22;i++) flares.push({ angle:Math.random()*Math.PI*2, r:50+Math.random()*Math.max(400,W)*0.5,
size:0.8+Math.random()*2.2, alpha:0.3+Math.random()*0.5, c:Math.random()>0.5?'p':'b', sp:0.4+Math.random()*1.8 });
function draw(){
ctx.clearRect(0,0,W,H);
const vx=VP.x,vy=VP.y;
const pg=ctx.createRadialGradient(vx,vy,0,vx,vy,W*0.6);
pg.addColorStop(0,'rgba(60,10,30,0.4)'); pg.addColorStop(1,'rgba(0,0,0,0)');
ctx.fillStyle=pg; ctx.fillRect(0,0,W,H);
const bg=ctx.createRadialGradient(W*0.85,H*0.2,0,W*0.85,H*0.2,W*0.45);
bg.addColorStop(0,'rgba(20,50,160,0.12)'); bg.addColorStop(1,'rgba(0,0,0,0)');
ctx.fillStyle=bg; ctx.fillRect(0,0,W,H);
lines.forEach(l=>{
const sx=vx+Math.cos(l.angle)*l.r, sy=vy+Math.sin(l.angle)*l.r;
const ex=vx+Math.cos(l.angle)*(l.r+l.len), ey=vy+Math.sin(l.angle)*(l.r+l.len);
const g=ctx.createLinearGradient(sx,sy,ex,ey);
if(l.hue==='pink'){ g.addColorStop(0,'rgba(255,45,122,0)'); g.addColorStop(0.5,`rgba(255,45,122,${l.alpha*0.6})`); g.addColorStop(1,`rgba(255,90,150,${l.alpha})`); }
else { g.addColorStop(0,'rgba(60,120,255,0)'); g.addColorStop(0.5,`rgba(80,150,255,${l.alpha*0.5})`); g.addColorStop(1,`rgba(140,200,255,${l.alpha})`); }
ctx.beginPath(); ctx.moveTo(sx,sy); ctx.lineTo(ex,ey); ctx.strokeStyle=g; ctx.lineWidth=l.w; ctx.stroke();
l.r+=l.speed;
if(l.r>Math.max(W,H)*0.88) Object.assign(l,mkLine());
});
flares.forEach(f=>{
const x=vx+Math.cos(f.angle)*f.r, y=vy+Math.sin(f.angle)*f.r;
ctx.beginPath(); ctx.arc(x,y,f.size,0,Math.PI*2);
ctx.fillStyle=f.c==='p'?`rgba(255,45,122,${f.alpha})`:`rgba(100,165,255,${f.alpha})`;
ctx.fill();
f.r+=f.sp;
if(f.r>Math.max(W,H)*0.82){ f.r=20+Math.random()*60; f.angle=Math.random()*Math.PI*2; }
});
requestAnimationFrame(draw);
}
draw();
})();
/* ============================================================
INFINITY LOOP DIAGRAM — full-bleed hero centrepiece
Matches reference: large lemniscate, pink/blue neon,
4 icon+label node boxes, circuit connectors, starfield bg
============================================================ */
(function(){
const canvas = document.getElementById('infinity-canvas');
if(!canvas) return;
const ctx = canvas.getContext('2d');
let W, H, cx, cy, R; // R = half-width of lemniscate
let hovered = null;
let introT = 0; // 0→1 eased intro
let time = 0;
const NODES = [
{ id:'automated', label:'AUTOMATED', icon:'⚙', sub:'DevOps & IaC', target:'#what-we-do', side:'pink', qx:-1, qy:-1 },
{ id:'scalable', label:'SCALABLE', icon:'↗', sub:'FinOps & Cost', target:'#iac', side:'pink', qx:-1, qy: 1 },
{ id:'secure', label:'SECURE', icon:'🔒', sub:'SecOps & Compliance', target:'#process', side:'blue', qx: 1, qy:-1 },
{ id:'resilient', label:'RESILIENT &|RELIABLE', icon:'✓', sub:'24/7 Managed Ops', target:'#proof', side:'blue', qx: 1, qy: 1 },
];
function resize(){
W = canvas.width = canvas.offsetWidth;
H = canvas.height = canvas.offsetHeight;
cx = W * 0.5;
cy = H * 0.46;
R = Math.min(W * 0.30, H * 0.38, 320);
}
resize();
window.addEventListener('resize', resize);
// ── Lemniscate of Bernoulli ──────────────────────────────────────────
// x(t) = R*√2·cos(t) / (sin²(t)+1)
// y(t) = R*√2·cos(t)·sin(t) / (sin²(t)+1)
function lemnPt(t){
const s = Math.sin(t), c = Math.cos(t), d = s*s + 1;
return { x: R * Math.SQRT2 * c / d,
y: R * Math.SQRT2 * c * s / d };
}
// Precompute path segments
const STEPS = 600;
function pathPts(Rv){
const pts = [];
for(let i = 0; i <= STEPS; i++){
const t = (i / STEPS) * Math.PI * 2;
const s = Math.sin(t), c = Math.cos(t), d = s*s + 1;
pts.push({
x: cx + Rv * Math.SQRT2 * c / d,
y: cy + Rv * Math.SQRT2 * c * s / d,
t
});
}
return pts;
}
// ── Starfield ────────────────────────────────────────────────────────
const STARS = [];
for(let i = 0; i < 220; i++){
STARS.push({
x: Math.random(), y: Math.random(),
r: 0.4 + Math.random() * 1.4,
a: 0.15 + Math.random() * 0.55,
twinkle: Math.random() * Math.PI * 2,
speed: 0.005 + Math.random() * 0.025,
blue: Math.random() > 0.65
});
}
// ── Travelling dots on the loop ──────────────────────────────────────
let dotT1 = 0, dotT2 = Math.PI;
// ── Spark particles at crossover ─────────────────────────────────────
const sparks = [];
function addSparks(){
for(let i = 0; i < 5; i++){
const a = Math.random() * Math.PI * 2;
const sp = 0.4 + Math.random() * 1.8;
sparks.push({ x: cx, y: cy, vx: Math.cos(a)*sp, vy: Math.sin(a)*sp,
life: 1, c: Math.random()>0.5 ? 'p':'b', r: 0.8+Math.random()*1.8 });
}
}
// ── Node box layout ──────────────────────────────────────────────────
// Each node: icon box left, text right, outer border
const BW = 185, BH = 56; // box width/height
const ICON_W = 46;
function nodePos(node){
// Spread nodes well outside the loop in their quadrant
const xOff = R * 1.62;
const yOff = R * 0.72;
return {
x: cx + node.qx * xOff,
y: cy + node.qy * yOff
};
}
// Where the connector line leaves the loop
function loopAnchor(node){
const tMap = { automated: Math.PI*1.18, scalable: Math.PI*0.82,
secure: Math.PI*1.82, resilient: Math.PI*0.18 };
const t = tMap[node.id];
const p = lemnPt(t);
return { x: cx + p.x, y: cy + p.y };
}
// ── Draw a node box (icon + label + sub) ─────────────────────────────
function drawNode(node, alpha, isHov){
const pos = nodePos(node);
const bx = pos.x - BW/2;
const by = pos.y - BH/2;
const col = node.side === 'pink' ? [255,45,122] : [40,130,255];
const cs = `${col[0]},${col[1]},${col[2]}`;
ctx.save();
ctx.globalAlpha = alpha;
// Outer glow on hover
if(isHov){
const hg = ctx.createRadialGradient(pos.x, pos.y, 0, pos.x, pos.y, 100);
hg.addColorStop(0, `rgba(${cs},0.25)`);
hg.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = hg;
ctx.fillRect(bx-40, by-40, BW+80, BH+80);
}
// Box background
ctx.fillStyle = isHov ? `rgba(${cs},0.18)` : 'rgba(8,10,20,0.82)';
ctx.strokeStyle = `rgba(${cs},${isHov ? 0.95 : 0.55})`;
ctx.lineWidth = isHov ? 1.5 : 1;
roundRect(ctx, bx, by, BW, BH, 8); ctx.fill(); ctx.stroke();
// Icon area (left panel with border-right)
ctx.fillStyle = `rgba(${cs},0.12)`;
ctx.strokeStyle = `rgba(${cs},0.3)`;
ctx.lineWidth = 0.5;
roundRectLeft(ctx, bx, by, ICON_W, BH, 8);
ctx.fill(); ctx.stroke();
// Icon
ctx.font = `${BH * 0.44}px serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = `rgba(${cs},0.9)`;
ctx.fillText(node.icon, bx + ICON_W/2, by + BH/2);
// Label
const lines = node.label.split('|');
ctx.font = `700 ${lines.length > 1 ? 11 : 13}px 'Space Grotesk', sans-serif`;
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#fff';
if(lines.length > 1){
ctx.fillText(lines[0], bx + ICON_W + 12, by + BH * 0.32);
ctx.fillText(lines[1], bx + ICON_W + 12, by + BH * 0.58);
} else {
ctx.fillText(lines[0], bx + ICON_W + 12, by + BH * 0.38);
// Sub-label
ctx.font = `400 10px 'Space Grotesk', sans-serif`;
ctx.fillStyle = `rgba(${cs},0.75)`;
ctx.fillText(node.sub, bx + ICON_W + 12, by + BH * 0.66);
}
ctx.restore();
}
// ── Draw L-shaped circuit connector ──────────────────────────────────
function drawConnector(node, alpha){
const lp = loopAnchor(node);
const np = nodePos(node);
const col = node.side === 'pink' ? [255,45,122] : [40,130,255];
const cs = `${col[0]},${col[1]},${col[2]}`;
// Elbow point — go horizontally first then vertically
const ex = lp.x + (node.qx > 0 ? 32 : -32);
const ey = np.y;
// Box edge
const bEdge = np.x + (node.qx < 0 ? BW/2 : -BW/2);
ctx.save();
ctx.globalAlpha = alpha * 0.65;
ctx.strokeStyle = `rgba(${cs},1)`;
ctx.lineWidth = 1;
ctx.setLineDash([5, 5]);
ctx.beginPath();
ctx.moveTo(lp.x, lp.y);
ctx.lineTo(ex, lp.y);
ctx.lineTo(ex, ey);
ctx.lineTo(bEdge, ey);
ctx.stroke();
ctx.setLineDash([]);
// Dot at loop anchor
ctx.globalAlpha = alpha;
ctx.beginPath(); ctx.arc(lp.x, lp.y, 3.5, 0, Math.PI*2);
ctx.fillStyle = `rgba(${cs},0.9)`; ctx.fill();
// Dot at elbow
ctx.beginPath(); ctx.arc(ex, lp.y, 2, 0, Math.PI*2);
ctx.fillStyle = `rgba(${cs},0.5)`; ctx.fill();
ctx.restore();
}
function roundRect(ctx, x, y, w, h, r){
ctx.beginPath();
ctx.moveTo(x+r,y); ctx.lineTo(x+w-r,y); ctx.quadraticCurveTo(x+w,y,x+w,y+r);
ctx.lineTo(x+w,y+h-r); ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);
ctx.lineTo(x+r,y+h); ctx.quadraticCurveTo(x,y+h,x,y+h-r);
ctx.lineTo(x,y+r); ctx.quadraticCurveTo(x,y,x+r,y); ctx.closePath();
}
function roundRectLeft(ctx, x, y, w, h, r){
// Only round left corners
ctx.beginPath();
ctx.moveTo(x+r,y); ctx.lineTo(x+w,y);
ctx.lineTo(x+w,y+h); ctx.lineTo(x+r,y+h);
ctx.quadraticCurveTo(x,y+h,x,y+h-r); ctx.lineTo(x,y+r);
ctx.quadraticCurveTo(x,y,x+r,y); ctx.closePath();
}
// ── Main draw loop ────────────────────────────────────────────────────
let frameN = 0;
function draw(){
ctx.clearRect(0,0,W,H);
frameN++; time += 0.016;
// Ease-in intro (2.5 s)
if(introT < 1) introT = Math.min(1, introT + 0.006);
const ease = introT < 0.5 ? 2*introT*introT : -1+(4-2*introT)*introT;
const Rv = R * ease;
// ── Deep space background ──────────────────────────────────────────
// Base colour
ctx.fillStyle = '#06080f';
ctx.fillRect(0,0,W,H);
// Pink nebula — left
const pn = ctx.createRadialGradient(cx-R*0.55, cy, 0, cx-R*0.55, cy, R*1.1);
pn.addColorStop(0, `rgba(180,15,70,${0.28*ease})`);
pn.addColorStop(0.4, `rgba(120,10,50,${0.12*ease})`);
pn.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = pn; ctx.fillRect(0,0,W,H);
// Blue nebula — right
const bn = ctx.createRadialGradient(cx+R*0.55, cy, 0, cx+R*0.55, cy, R*1.1);
bn.addColorStop(0, `rgba(10,40,180,${0.22*ease})`);
bn.addColorStop(0.4, `rgba(5,20,120,${0.10*ease})`);
bn.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = bn; ctx.fillRect(0,0,W,H);
// Starfield
STARS.forEach(s => {
const tw = Math.sin(time * s.speed * 8 + s.twinkle) * 0.3 + 0.7;
ctx.beginPath(); ctx.arc(s.x*W, s.y*H, s.r*tw, 0, Math.PI*2);
ctx.fillStyle = s.blue
? `rgba(140,180,255,${s.a * tw})`
: `rgba(255,255,255,${s.a * tw})`;
ctx.fill();
});
if(Rv < 2){ requestAnimationFrame(draw); return; }
const pts = pathPts(Rv);
// ── Draw loop — multi-layer neon effect ────────────────────────────
const HALF = Math.floor(STEPS/2);
// Outer wide glow layers
[[22, 0.04], [12, 0.08], [6, 0.18], [2.5, 0.55], [1.2, 0.9]].forEach(([lw, baseA]) => {
// Pink lobe (t: 0 → π, x negative side)
ctx.beginPath();
for(let i = 0; i <= HALF; i++){
const p = pts[i];
i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y);
}
const pg = ctx.createLinearGradient(cx-Rv, cy, cx, cy);
pg.addColorStop(0, `rgba(255,45,122,${baseA*0.6})`);
pg.addColorStop(0.7, `rgba(255,45,122,${baseA})`);
pg.addColorStop(1, `rgba(200,80,180,${baseA*0.7})`);
ctx.strokeStyle = pg; ctx.lineWidth = lw;
ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.stroke();
// Blue lobe (t: π → 2π, x positive side)
ctx.beginPath();
for(let i = HALF; i <= STEPS; i++){
const p = pts[i];
i === HALF ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y);
}
const bg = ctx.createLinearGradient(cx, cy, cx+Rv, cy);
bg.addColorStop(0, `rgba(80,160,255,${baseA*0.7})`);
bg.addColorStop(0.3, `rgba(40,130,255,${baseA})`);
bg.addColorStop(1, `rgba(30,100,220,${baseA*0.6})`);
ctx.strokeStyle = bg; ctx.lineWidth = lw; ctx.stroke();
});
// ── Inner ring detail lines (the tech circle segments in reference) ─
const innerR = Rv * 0.18;
[0, Math.PI*0.5, Math.PI, Math.PI*1.5].forEach((a,i) => {
ctx.beginPath();
ctx.arc(cx, cy, innerR, a, a + Math.PI*0.28);
ctx.strokeStyle = `rgba(255,255,255,${0.12*ease})`;
ctx.lineWidth = 1.5; ctx.stroke();
});
// Small tick marks on blue side inner ring
for(let i = 0; i < 6; i++){
const a = (i/6)*Math.PI + 0.1;
const x1 = cx + (innerR - 4) * Math.cos(a);
const y1 = cy + (innerR - 4) * Math.sin(a);
const x2 = cx + (innerR + 4) * Math.cos(a);
const y2 = cy + (innerR + 4) * Math.sin(a);
ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2);
ctx.strokeStyle = `rgba(80,160,255,${0.4*ease})`;
ctx.lineWidth = 1.5; ctx.stroke();
}
// ── Lobe centre glows ──────────────────────────────────────────────
const lcx = cx - Rv*0.5, rcx = cx + Rv*0.5;
const lg = ctx.createRadialGradient(lcx, cy, 0, lcx, cy, Rv*0.5);
lg.addColorStop(0, `rgba(255,45,122,${0.22*ease})`);
lg.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = lg; ctx.fillRect(0,0,W,H);
const rg = ctx.createRadialGradient(rcx, cy, 0, rcx, cy, Rv*0.5);
rg.addColorStop(0, `rgba(40,130,255,${0.18*ease})`);
rg.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = rg; ctx.fillRect(0,0,W,H);
// Cross-centre glow
const cg = ctx.createRadialGradient(cx, cy, 0, cx, cy, Rv*0.14);
cg.addColorStop(0, `rgba(255,200,255,${0.35*ease})`);
cg.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = cg; ctx.fillRect(0,0,W,H);
// ── Optiim label ───────────────────────────────────────────────────
if(ease > 0.45){
const ta = Math.min(1, (ease-0.45)/0.4);
ctx.save(); ctx.globalAlpha = ta;
const fs = Math.max(18, Math.round(Rv * 0.28));
ctx.font = `700 ${fs}px 'Space Grotesk', sans-serif`;
ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
ctx.fillStyle = '#ffffff';
ctx.shadowColor = 'rgba(255,255,255,0.4)';
ctx.shadowBlur = 12;
ctx.fillText('Optiim', cx, cy);
ctx.shadowBlur = 0;
ctx.font = `500 ${Math.max(9, Math.round(fs*0.38))}px 'Space Grotesk', sans-serif`;
ctx.fillStyle = 'rgba(148,163,184,0.65)';
ctx.fillText('CLOUD. ENGINEERED.', cx, cy + fs*0.82);
ctx.restore();
}
// ── Travelling dots ────────────────────────────────────────────────
if(ease > 0.7){
dotT1 = (dotT1 + 0.018) % (Math.PI*2);
dotT2 = (dotT2 + 0.018) % (Math.PI*2);
[dotT1, dotT2].forEach(t => {
const p = lemnPt(t);
const x = cx + p.x * (Rv/R), y = cy + p.y * (Rv/R);
const isPink = (t < Math.PI);
const col = isPink ? '255,45,122' : '60,140,255';
// Trail
for(let i = 1; i <= 8; i++){
const tt = t - i * 0.04;
const tp = lemnPt(tt);
const tx = cx + tp.x*(Rv/R), ty = cy + tp.y*(Rv/R);
ctx.beginPath(); ctx.arc(tx, ty, 2.5 - i*0.25, 0, Math.PI*2);
ctx.fillStyle = `rgba(${col},${0.5 - i*0.055})`; ctx.fill();
}
// Halo
const dg = ctx.createRadialGradient(x,y,0,x,y,12);
dg.addColorStop(0, `rgba(${col},0.75)`); dg.addColorStop(1,'rgba(0,0,0,0)');
ctx.fillStyle = dg; ctx.beginPath(); ctx.arc(x,y,12,0,Math.PI*2); ctx.fill();
// Core
ctx.beginPath(); ctx.arc(x,y,3.5,0,Math.PI*2);
ctx.fillStyle = `rgba(${col},1)`; ctx.fill();
});
// Sparks at crossover
if(frameN % 20 === 0) addSparks();
}
// Render sparks
for(let i = sparks.length-1; i >= 0; i--){
const sp = sparks[i];
sp.x += sp.vx; sp.y += sp.vy; sp.vy += 0.04; sp.life -= 0.055;
if(sp.life <= 0){ sparks.splice(i,1); continue; }
ctx.beginPath(); ctx.arc(sp.x, sp.y, sp.r, 0, Math.PI*2);
ctx.fillStyle = sp.c==='p' ? `rgba(255,45,122,${sp.life})` : `rgba(80,160,255,${sp.life})`;
ctx.fill();
}
// ── Connectors + Nodes (appear after ~60% intro) ───────────────────
if(ease > 0.55){
const nodeAlpha = Math.min(1, (ease-0.55)/0.35);
NODES.forEach(node => {
drawConnector(node, nodeAlpha);
drawNode(node, nodeAlpha, hovered === node.id);
});
}
requestAnimationFrame(draw);
}
// ── Hit testing ────────────────────────────────────────────────────────
function hitNode(mx, my){
for(const n of NODES){
const p = nodePos(n);
if(mx >= p.x-BW/2 && mx <= p.x+BW/2 && my >= p.y-BH/2 && my <= p.y+BH/2) return n;
}
return null;
}
canvas.addEventListener('mousemove', e => {
const r = canvas.getBoundingClientRect();
const hit = hitNode(e.clientX-r.left, e.clientY-r.top);
hovered = hit ? hit.id : null;
canvas.style.cursor = hit ? 'pointer' : 'default';
});
canvas.addEventListener('click', e => {
const r = canvas.getBoundingClientRect();
const hit = hitNode(e.clientX-r.left, e.clientY-r.top);
if(hit){ document.querySelector(hit.target)?.scrollIntoView({behavior:'smooth'}); }
});
canvas.addEventListener('touchend', e => {
e.preventDefault();
const r = canvas.getBoundingClientRect();
const t = e.changedTouches[0];
const hit = hitNode(t.clientX-r.left, t.clientY-r.top);
if(hit){ document.querySelector(hit.target)?.scrollIntoView({behavior:'smooth'}); }
});
draw();
})();
/* ============================================================
SIGNATURE CANVAS — same but denser, full-width, more intense
============================================================ */
(function(){
const canvas = document.getElementById('sig-canvas');
const ctx = canvas.getContext('2d');
let W, H;
function resize(){
W = canvas.width = canvas.offsetWidth;
H = canvas.height = canvas.offsetHeight;
}
resize();
window.addEventListener('resize', resize);
const VP = { get x(){ return W*0.5; }, get y(){ return H*0.5; } };
const COUNT = 260;
const lines = [];
function mkLine(){
const angle = Math.random()*Math.PI*2;
return {
angle,
r: Math.random() * Math.max(W,H)*0.6,
speed: 1.2 + Math.random()*4,
len: 30 + Math.random()*160,
alpha: 0.18 + Math.random()*0.65,
hue: Math.random()>0.45 ? 'pink' : 'blue',
w: 0.3 + Math.random()*1.1,
};
}
for(let i=0;i<COUNT;i++){
const l = mkLine();
l.r = Math.random()*Math.max(W,H)*0.7;
lines.push(l);
}
// Extra bright dot flares
const FLARES = 40;
const flares = [];
for(let i=0;i<FLARES;i++) flares.push({
angle: Math.random()*Math.PI*2,
r: 40 + Math.random()*Math.max(400,W)*0.5,
size: 0.8 + Math.random()*2.8,
alpha: 0.5 + Math.random()*0.5,
c: Math.random()>0.5 ? 'pink' : 'blue',
sp: 0.8 + Math.random()*2.5,
});
function draw(){
ctx.clearRect(0,0,W,H);
const vx = VP.x, vy = VP.y;
// Deep bg glow — pink left, blue right (matches reference)
const pglow = ctx.createRadialGradient(W*0.28, vy, 0, W*0.28, vy, W*0.55);
pglow.addColorStop(0, 'rgba(180,20,80,0.22)');
pglow.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = pglow; ctx.fillRect(0,0,W,H);
const bglow = ctx.createRadialGradient(W*0.72, vy, 0, W*0.72, vy, W*0.55);
bglow.addColorStop(0, 'rgba(30,60,200,0.16)');
bglow.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = bglow; ctx.fillRect(0,0,W,H);
lines.forEach(l => {
const sx = vx + Math.cos(l.angle)*l.r;
const sy = vy + Math.sin(l.angle)*l.r;
const ex = vx + Math.cos(l.angle)*(l.r+l.len);
const ey = vy + Math.sin(l.angle)*(l.r+l.len);
const g = ctx.createLinearGradient(sx,sy,ex,ey);
if(l.hue==='pink'){
g.addColorStop(0, 'rgba(255,45,122,0)');
g.addColorStop(0.5,`rgba(255,45,122,${l.alpha*0.7})`);
g.addColorStop(1, `rgba(255,80,150,${l.alpha})`);
} else {
g.addColorStop(0, 'rgba(60,120,255,0)');
g.addColorStop(0.5,`rgba(80,150,255,${l.alpha*0.55})`);
g.addColorStop(1, `rgba(140,200,255,${l.alpha})`);
}
ctx.beginPath(); ctx.moveTo(sx,sy); ctx.lineTo(ex,ey);
ctx.strokeStyle=g; ctx.lineWidth=l.w; ctx.stroke();
l.r += l.speed;
if(l.r>Math.max(W,H)*0.85) Object.assign(l, mkLine());
});
flares.forEach(f => {
const x = vx + Math.cos(f.angle)*f.r;
const y = vy + Math.sin(f.angle)*f.r;
ctx.beginPath(); ctx.arc(x,y,f.size,0,Math.PI*2);
ctx.fillStyle = f.c==='pink' ? `rgba(255,45,122,${f.alpha})` : `rgba(100,170,255,${f.alpha})`;
ctx.fill();
const fg = ctx.createRadialGradient(x,y,0,x,y,f.size*5);
fg.addColorStop(0, f.c==='pink'?`rgba(255,45,122,0.3)`:`rgba(100,170,255,0.25)`);
fg.addColorStop(1,'rgba(0,0,0,0)');
ctx.fillStyle=fg; ctx.beginPath(); ctx.arc(x,y,f.size*5,0,Math.PI*2); ctx.fill();
f.r += f.sp;
if(f.r>Math.max(W,H)*0.82){ f.r=20+Math.random()*80; f.angle=Math.random()*Math.PI*2; }
});
requestAnimationFrame(draw);
}
draw();
// Trigger signature word reveal via IntersectionObserver
const sigSection = document.getElementById('signature');
const words = [document.getElementById('sw1'), document.getElementById('sw2'), document.getElementById('sw3')];
const sigObs = new IntersectionObserver(entries => {
if(entries[0].isIntersecting){
words.forEach((w,i) => setTimeout(()=>w.classList.add('visible'), i*140));
sigObs.disconnect();
}
}, { threshold: 0.3 });
sigObs.observe(sigSection);
})();
/* ============================================================
SCROLL REVEALS
============================================================ */
const revealEls = document.querySelectorAll('.reveal, .reveal-stagger');
const revObs = new IntersectionObserver(entries => {
entries.forEach(e => {
if(e.isIntersecting){ e.target.classList.add('visible'); revObs.unobserve(e.target); }
});
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
revealEls.forEach(el => revObs.observe(el));
/* ============================================================
NAV SCROLL
============================================================ */
const nav = document.getElementById('navbar');
window.addEventListener('scroll', () => {
nav.classList.toggle('scrolled', window.scrollY > 50);
}, { passive: true });
</script>
</body>
</html>