:root {
--bg: #0B0712;
--aqua: #00E5FF;
--violet: #9B6BFF;
--pink: #FF2E88;
--coral: #FF7A59;
--text: #F4EEFF;
--text-2: #B7AACB;
--lariat: #FF8A3D;
--rule: #2E2440;
--rec: #FF3B3B;
--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
--sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
--bar: 56px;
--gutter: clamp(16px, 5vw, 56px);
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 2px; }
img { display: block; }
.bar {
position: sticky; top: 0; z-index: 10;
height: var(--bar); padding: 0 var(--gutter);
display: flex; align-items: center; justify-content: space-between; gap: 16px;
background: var(--bg); border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-logo { height: 30px; width: auto; }
.brand-name { font-size: 13px; font-weight: 600; letter-spacing: 0.24em; white-space: nowrap; }
nav { display: flex; gap: clamp(14px, 3vw, 32px); font-size: 15px; }
nav a { text-decoration: none; color: var(--text); white-space: nowrap; }
nav a:hover { color: var(--aqua); }
nav a.pink { color: var(--pink); }
nav a.pink:hover { color: var(--text); }
.hero {
--h: clamp(520px, min(calc(100vh - var(--bar)), 165vw), 980px);
--h: clamp(520px, min(calc(100svh - var(--bar)), 165vw), 980px);
--hz: calc(var(--h) * 0.64);
--d: min(64vw, calc(var(--h) * 0.48), 470px);
--cy: calc(var(--hz) - var(--d) * 0.25);
position: relative; height: 640px; height: var(--h); overflow: hidden; isolation: isolate;
background: var(--bg);
}
.sky {
position: absolute; left: 0; right: 0; top: 0; height: var(--hz); overflow: hidden;
background: linear-gradient(to bottom, #0B0712 0%, #1C0A36 20%, #3D1068 42%, #8A1C82 66%, #D2307E 86%, #FF7A59 100%);
}
.sun {
position: absolute; left: 50%; top: var(--cy);
width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2); margin-top: calc(var(--d) / -2);
border-radius: 50%;
background: linear-gradient(to bottom, #FFE07A 0%, #FFB05E 28%, var(--coral) 52%, var(--pink) 82%);
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 46%, transparent 47.6%, #000 47.6%, #000 53%,
transparent 53%, transparent 55.6%, #000 55.6%, #000 60%, transparent 60%, transparent 63.2%, #000 63.2%, #000 66.6%,
transparent 66.6%, transparent 70.6%, #000 70.6%);
mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 46%, transparent 47.6%, #000 47.6%, #000 53%,
transparent 53%, transparent 55.6%, #000 55.6%, #000 60%, transparent 60%, transparent 63.2%, #000 63.2%, #000 66.6%,
transparent 66.6%, transparent 70.6%, #000 70.6%);
filter: drop-shadow(0 0 calc(var(--d) * 0.08) #FF2E8880);
}
.floor {
position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0; overflow: hidden;
background: linear-gradient(to bottom, #4A1260 0%, #1E0A33 30%, var(--bg) 100%);
}
.grid { position: absolute; inset: 0; width: 100%; height: 100%;
-webkit-mask-image: linear-gradient(to bottom, #0000 0%, #0008 8%, #000 30%); mask-image: linear-gradient(to bottom, #0000 0%, #0008 8%, #000 30%); }
.grid line { stroke: var(--pink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.haze { position: absolute; inset: 0; background: linear-gradient(to bottom, #FF2E8840 0%, #FF2E8800 22%); }
.horizon {
position: absolute; left: 0; right: 0; top: calc(var(--hz) - 1px); height: 2px;
background: var(--aqua); box-shadow: 0 0 10px var(--aqua), 0 0 26px #00E5FF80;
}
.palm {
position: absolute; top: calc(var(--hz) - var(--ph)); height: var(--ph); width: calc(var(--ph) * 260 / 420);
--ph: min(calc(var(--hz) * 0.66), 560px);
fill: #07040C; transform-origin: 44% 100%;
}
.palm .rings, .palm use { stroke: none; }
.palm-left { left: calc(var(--ph) * -0.12); }
.palm-right { right: calc(var(--ph) * -0.12); transform: scaleX(-1); }
@media (max-width: 600px) {
.palm-left { left: calc(var(--ph) * -0.3); }
.palm-right { right: calc(var(--ph) * -0.3); }
.palm { --ph: min(calc(var(--hz) * 0.6), 420px); }
}
@media (prefers-reduced-motion: no-preference) {
.palm-left { animation: sway 7s ease-in-out infinite alternate; }
.palm-right { animation: sway-r 8.5s ease-in-out infinite alternate; }
}
@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes sway-r { from { transform: scaleX(-1) rotate(-1.2deg); } to { transform: scaleX(-1) rotate(1.6deg); } }
.mark {
position: absolute; left: 50%; top: var(--cy); transform: translate(-50%, -50%);
width: min(calc(var(--d) * 1.14), calc(100vw - 2 * var(--gutter) - 8px), 560px);
z-index: 2;
}
.logo { width: 100%; height: auto; aspect-ratio: 914 / 398; filter: drop-shadow(0 0 14px #FF2E8866); }
@media (prefers-reduced-motion: no-preference) {
.logo { animation: flicker 13s linear infinite; }
}
@keyframes flicker {
0%, 88%, 100% { opacity: 1; }
88.6% { opacity: 0.62; } 89.2% { opacity: 1; } 89.9% { opacity: 0.78; } 90.4% { opacity: 1; }
}
.viewfinder { position: absolute; inset: clamp(14px, 3vw, 30px); z-index: 3; pointer-events: none; }
.corner { position: absolute; width: clamp(20px, 3vw, 34px); height: clamp(20px, 3vw, 34px); border: 0 solid #FFFFFF; }
.corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.vf {
position: absolute; font: 600 clamp(11px, 1.3vw, 14px)/1 var(--mono); letter-spacing: 0.06em; color: #FFFFFF;
text-shadow: 0 1px 3px #000000CC; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.vf.rec { top: clamp(12px, 2vw, 18px); left: clamp(14px, 2.4vw, 22px); }
.vf.tc { top: clamp(12px, 2vw, 18px); right: clamp(14px, 2.4vw, 22px); }
.vf.cam { bottom: clamp(12px, 2vw, 18px); left: clamp(14px, 2.4vw, 22px); }
.vf.slate { bottom: clamp(12px, 2vw, 18px); right: clamp(14px, 2.4vw, 22px); }
.rec-dot { color: var(--rec); }
@media (prefers-reduced-motion: no-preference) {
.rec-dot { animation: blink 1s steps(1, end) infinite; }
}
@keyframes blink { 50% { opacity: 0; } }
.intro, .services, .contact { padding: 0 var(--gutter); scroll-margin-top: var(--bar); }
.eyebrow { margin: 0 0 18px; font: 600 13px/1.3 var(--mono); letter-spacing: 0.16em; color: var(--aqua); }
.intro { padding-top: clamp(64px, 10vw, 128px); padding-bottom: clamp(48px, 7vw, 88px); max-width: calc(620px + 2 * var(--gutter)); }
.intro h1 { margin: 0 0 22px; font-size: clamp(30px, 5.2vw, 48px); line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; }
.lede { margin: 0; color: var(--text-2); font-size: clamp(17px, 2vw, 19px); }
.credit { margin: 18px 0 0; color: var(--text-2); font-size: 15px; }
.services { max-width: calc(960px + 2 * var(--gutter)); padding-bottom: clamp(72px, 10vw, 128px); }
.services > ol { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.services > ol > li {
display: grid; grid-template-columns: clamp(44px, 8vw, 96px) 1fr; gap: 0 12px;
padding: clamp(26px, 4vw, 40px) 0; border-top: 1px solid var(--rule);
}
.num { font: 600 15px/1.9 var(--mono); color: var(--pink); letter-spacing: 0.04em; }
.services h2 { margin: 0 0 8px; font-size: clamp(21px, 2.6vw, 26px); line-height: 1.25; font-weight: 650; letter-spacing: -0.005em; }
.services p { margin: 0; color: var(--text-2); max-width: 620px; }
.tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2);
border: 1px solid var(--rule); border-radius: 3px; padding: 7px 9px;
}
.product { margin-top: 20px; display: grid; grid-template-columns: 44px auto auto; justify-content: start; align-items: center; gap: 4px 16px; }
.product img { width: 44px; height: 44px; }
.product-name { font-weight: 600; }
.product-link { color: var(--lariat); text-decoration: none; font-weight: 600; }
.product-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(88px, 12vw, 160px); }
.email {
display: inline-block; font-size: clamp(27px, 7vw, 68px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
color: var(--text); text-decoration: underline; text-decoration-color: var(--pink);
text-decoration-thickness: clamp(3px, 0.5vw, 5px); text-underline-offset: clamp(6px, 1vw, 12px);
overflow-wrap: anywhere;
}
.email:hover { color: var(--pink); }
footer { padding: 28px var(--gutter) 40px; border-top: 1px solid var(--rule); }
footer p { margin: 0; color: var(--text-2); font-size: 14px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 420px) {
.brand-name { font-size: 11.5px; letter-spacing: 0.16em; }
.brand-logo { display: none; }
nav { font-size: 14px; gap: 14px; }
}
@media (max-width: 560px) {
.product { grid-template-columns: 44px auto; }
.product img { grid-row: span 2; }
}
@media (max-width: 360px) {
.brand-name { font-size: 10.5px; letter-spacing: 0.16em; line-height: 1.25; white-space: normal; width: min-content; }
nav { font-size: 13px; gap: 10px; }
.vf { font-size: 10px; letter-spacing: 0.02em; }
}