/* ─────────────────────────────────────────────────────────────
HayfishAI · Shared Stylesheet
Tokens, atmosphere, navigation, components, sections.
───────────────────────────────────────────────────────────── */
:root{
--bg-0:#000000;
--bg-1:#050505;
--bg-2:#0b0b0c;
--bg-3:#121214;
--bg-4:#1a1a1d;
--line-1:rgba(255,255,255,.06);
--line-2:rgba(255,255,255,.10);
--line-3:rgba(255,255,255,.18);
--ink-1:#fafafa;
--ink-2:#c8c8c8;
--ink-3:#8a8a8a;
--ink-4:#555555;
--ink-5:#2c2c2e;
--lime:#ccff00;
--lime-soft:#e3ff66;
--lime-deep:#9bc400;
--blue:#3b9be8;
--blue-deep:#1d6fb8;
/* All sans — body + UI uses SF Pro Text optical size, headlines use SF Pro Display. The browser picks the right cut automatically based on size on Apple devices. */
--sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
--display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
/* "serif" is kept as an alias mapped to --display so existing var(--serif) calls keep working */
--serif: var(--display);
--mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, monospace;
--r-sm:8px;
--r-md:14px;
--r-lg:22px;
--r-xl:30px;
--ease:cubic-bezier(.2,.7,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-in:cubic-bezier(.7,0,.84,0);
--pad: clamp(20px, 4vw, 64px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
background:var(--bg-0);
color:var(--ink-1);
font-family:var(--sans);
/* SF Pro uses these features; "ss01" enables alternate '6' and '9', "cv11" tabular figures */
font-feature-settings:"ss01","cv11";
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
scroll-behavior:smooth;
}
body{
min-height:100vh;
overflow-x:hidden;
cursor:none;
background:
radial-gradient(900px 600px at 80% -10%, rgba(204,255,0,.06), transparent 60%),
radial-gradient(700px 500px at 0% 30%, rgba(59,155,232,.05), transparent 60%),
var(--bg-0);
}
@media (max-width:760px){ body{ cursor:auto } }
::selection{ background:var(--lime); color:#000 }
a{ color:inherit; text-decoration:none }
img,svg{ display:block; max-width:100% }
/* ── Atmosphere ── */
.atmosphere{
position:fixed; inset:0; pointer-events:none; z-index:1;
background-image:
linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}
.noise{
position:fixed; inset:-50%; pointer-events:none; z-index:2;
opacity:.045; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
.vignette{
position:fixed; inset:0; pointer-events:none; z-index:3;
background: radial-gradient(140% 90% at 50% 50%, transparent 50%, rgba(0,0,0,.6) 100%);
}
/* ── Custom Cursor ── */
.cursor-dot, .cursor-ring{
position:fixed; left:0; top:0; pointer-events:none; z-index:9999;
transform:translate3d(-50%,-50%,0);
mix-blend-mode:difference;
}
.cursor-dot{
width:6px; height:6px; border-radius:50%;
background:#fff;
}
.cursor-ring{
width:36px; height:36px; border-radius:50%;
border:1px solid rgba(255,255,255,.6);
transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cursor-ring.hover{
width:64px; height:64px;
background:rgba(204,255,0,.1);
border-color:var(--lime);
}
@media (max-width:760px){ .cursor-dot,.cursor-ring{display:none} }
/* ─────────────────────────────────────────────────────────────
NAVIGATION
───────────────────────────────────────────────────────────── */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
display:flex; align-items:center; justify-content:space-between;
padding: 18px var(--pad);
transition: backdrop-filter .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(5,5,5,.65);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom:1px solid var(--line-1);
}
.nav-brand{
display:flex; align-items:center; gap:10px;
font-family:var(--serif);
font-size:22px; letter-spacing:-.01em;
}
.nav-brand .mark{
width:28px; height:28px; border-radius:50%;
background:radial-gradient(circle at 35% 30%, #67c0ff, #1d6fb8 65%, #0b3a66);
display:grid; place-items:center;
box-shadow: 0 0 24px rgba(59,155,232,.45), inset 0 0 14px rgba(255,255,255,.18);
}
.nav-brand .mark svg{ width:18px; height:18px }
.nav-brand em{ font-style:italic; font-weight:400; color:var(--lime) }
.nav-links{
display:flex; gap:30px; align-items:center;
font-size:13.5px; color:var(--ink-2); letter-spacing:.01em;
}
.nav-links a{ position:relative; padding:6px 2px; transition:color .25s }
.nav-links a::after{
content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
background:var(--lime); transition: right .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink-1) }
.nav-links a:hover::after, .nav-links a.active::after{ right:0 }
.nav-cta{
display:inline-flex; align-items:center; gap:8px;
padding:10px 18px; border-radius:999px;
background:var(--lime); color:#000;
font-weight:500; font-size:13px; letter-spacing:.01em;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
box-shadow: 0 0 0 0 rgba(204,255,0,0);
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow: 0 10px 40px rgba(204,255,0,.25) }
.nav-cta svg{ width:14px; height:14px }
@media (max-width:860px){
.nav-links{ display:none }
}
/* ─────────────────────────────────────────────────────────────
PAGE HEADER (interior pages)
───────────────────────────────────────────────────────────── */
.page-header{
position:relative; z-index:5;
padding: 180px var(--pad) 80px;
display:flex; flex-direction:column; gap:24px;
border-bottom:1px solid var(--line-1);
overflow:hidden;
}
.page-header::before{
content:""; position:absolute; inset:-20% -10% 0;
background:
radial-gradient(600px 500px at 80% 20%, rgba(204,255,0,.10), transparent 60%),
radial-gradient(500px 400px at 0% 80%, rgba(59,155,232,.06), transparent 60%);
pointer-events:none;
}
.page-eyebrow{
position:relative; z-index:2;
display:inline-flex; align-items:center; gap:10px;
padding:6px 12px 6px 8px; border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid var(--line-2);
font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink-2);
width:max-content;
backdrop-filter: blur(10px);
}
.page-eyebrow .pulse{
width:8px; height:8px; border-radius:50%;
background:var(--lime);
box-shadow: 0 0 0 0 rgba(204,255,0,.6);
animation: pulse 2.4s ease-out infinite;
}
.page-title{
position:relative; z-index:2;
font-family:var(--serif); font-weight:400;
font-size: clamp(48px, 9vw, 140px);
line-height:.92; letter-spacing:-.03em;
margin:0;
max-width: 14ch;
}
.page-title em{
font-style:italic;
background: linear-gradient(180deg, var(--lime) 0%, var(--lime-deep) 100%);
-webkit-background-clip: text; background-clip:text; color:transparent;
}
.page-lede{
position:relative; z-index:2;
font-size: clamp(17px, 1.4vw, 20px);
line-height:1.5; color:var(--ink-2);
max-width: 56ch; font-weight:300;
margin:0;
}
.page-lede em{ font-family:var(--serif); font-style:italic; color:var(--lime); font-size:1.06em }
/* Breadcrumbs */
.crumbs{
position:relative; z-index:2;
display:flex; align-items:center; gap:10px;
font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink-3);
}
.crumbs a{ color:var(--ink-3); transition: color .25s }
.crumbs a:hover{ color:var(--lime) }
.crumbs .sep{ opacity:.4 }
.crumbs .here{ color:var(--ink-1) }
@keyframes pulse{
0%{ box-shadow:0 0 0 0 rgba(204,255,0,.6) }
70%{ box-shadow:0 0 0 12px rgba(204,255,0,0) }
100%{ box-shadow:0 0 0 0 rgba(204,255,0,0) }
}
/* ─────────────────────────────────────────────────────────────
HERO (homepage only)
───────────────────────────────────────────────────────────── */
.hero{
position:relative; z-index:5;
min-height:100vh;
padding: 140px var(--pad) 80px;
display:flex; flex-direction:column; justify-content:center;
overflow:hidden;
}
.hero-glow{
position:absolute; inset:0; pointer-events:none; z-index:0;
--x:50%; --y:40%;
}
.hero-glow::before{
content:""; position:absolute; inset:-20%;
background:
radial-gradient(600px 600px at var(--x) var(--y), rgba(204,255,0,.18), transparent 60%),
radial-gradient(800px 700px at calc(var(--x) - 30%) calc(var(--y) + 20%), rgba(59,155,232,.10), transparent 60%),
radial-gradient(500px 500px at calc(var(--x) + 25%) calc(var(--y) - 15%), rgba(155,196,0,.10), transparent 60%);
filter: blur(20px);
transition: background .2s linear;
}
.hero-glow::after{
content:""; position:absolute; inset:0;
background-image: radial-gradient(circle at center, transparent 0, var(--bg-0) 75%);
}
.hero-eyebrow{
position:relative; z-index:2;
display:inline-flex; align-items:center; gap:10px;
padding:6px 12px 6px 8px; border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid var(--line-2);
font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink-2);
width:max-content;
margin-bottom:36px;
backdrop-filter: blur(10px);
animation: rise .9s var(--ease-out) both;
}
.hero-eyebrow .pulse{
width:8px; height:8px; border-radius:50%;
background:var(--lime);
box-shadow: 0 0 0 0 rgba(204,255,0,.6);
animation: pulse 2.4s ease-out infinite;
}
.hero-headline{
position:relative; z-index:2;
font-family:var(--serif);
font-weight:400;
font-size: clamp(56px, 11vw, 184px);
line-height: .9;
letter-spacing:-.035em;
margin: 0 0 36px;
max-width: 14ch;
}
.hero-headline .it{
font-style:italic;
background: linear-gradient(180deg, var(--lime) 0%, var(--lime-deep) 100%);
-webkit-background-clip: text; background-clip:text; color:transparent;
position:relative;
}
.hero-headline .it::after{
content:""; position:absolute; left:0; right:0; bottom:.06em;
height:.04em; background:linear-gradient(90deg, transparent, var(--lime), transparent);
opacity:.4;
filter: blur(2px);
}
.hero-headline span{
display:inline-block;
animation: rise .9s var(--ease-out) both;
}
.hero-headline span:nth-child(1){ animation-delay:.05s }
.hero-headline span:nth-child(2){ animation-delay:.15s }
.hero-headline span:nth-child(3){ animation-delay:.25s }
.hero-row{
position:relative; z-index:2;
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: 80px;
align-items:end;
}
@media (max-width:960px){
.hero-row{ grid-template-columns:1fr; gap:40px }
}
.hero-sub{
font-size: clamp(16px, 1.4vw, 19px);
line-height:1.5; color:var(--ink-2);
max-width: 44ch;
font-weight:300;
animation: rise .9s var(--ease-out) .35s both;
}
.hero-sub b{ color:var(--ink-1); font-weight:500 }
.hero-sub em{ font-family:var(--serif); font-size:1.08em; color:var(--lime); font-style:italic }
.hero-cta{
display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;
animation: rise .9s var(--ease-out) .45s both;
}
/* ── Buttons ── */
.btn{
display:inline-flex; align-items:center; gap:10px;
padding: 16px 26px; border-radius:999px;
font-family:var(--sans); font-weight:500; font-size:14.5px;
border:1px solid transparent;
transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
cursor:none;
}
@media (max-width:760px){ .btn{ cursor:pointer } }
.btn-primary{
background:var(--lime); color:#000;
box-shadow: 0 0 0 0 rgba(204,255,0,0), inset 0 -1px 0 rgba(0,0,0,.2);
position:relative; overflow:hidden;
}
.btn-primary::before{
content:""; position:absolute; inset:0;
background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform .8s var(--ease);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 50px rgba(204,255,0,.35) }
.btn-primary:hover::before{ transform: translateX(120%) }
.btn-ghost{
background:transparent; color:var(--ink-1);
border-color:var(--line-3);
}
.btn-ghost:hover{ background:rgba(255,255,255,.04); border-color:var(--ink-3) }
.btn svg{ width:14px; height:14px }
/* ── Hero Preview Window ── */
.hero-preview{
position:relative;
border-radius:var(--r-lg);
border:1px solid var(--line-2);
background:linear-gradient(180deg, rgba(20,20,22,.85), rgba(8,8,10,.92));
backdrop-filter: blur(14px);
overflow:hidden;
aspect-ratio: 1.15 / 1;
min-height:380px;
box-shadow:
0 60px 120px -20px rgba(0,0,0,.8),
0 0 0 1px rgba(204,255,0,.04),
0 0 80px -20px rgba(204,255,0,.15);
animation: rise 1.1s var(--ease-out) .6s both;
}
.hero-preview::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 50%);
}
.hp-bar{
display:flex; align-items:center; gap:8px;
padding:14px 18px;
border-bottom:1px solid var(--line-1);
font-family:var(--mono); font-size:11px; color:var(--ink-3);
}
.hp-bar .dots{ display:flex; gap:6px }
.hp-bar .dots i{ width:9px; height:9px; border-radius:50%; background:var(--ink-5) }
.hp-bar .url{ flex:1; text-align:center; opacity:.7 }
.hp-body{ padding:22px; display:grid; grid-template-rows:auto 1fr auto; gap:18px; height:calc(100% - 47px) }
.hp-prompt{
display:flex; align-items:center; gap:10px;
padding:14px 16px;
background:var(--bg-2);
border:1px solid var(--line-2);
border-radius:var(--r-md);
font-family:var(--mono); font-size:12.5px; color:var(--ink-2);
}
.hp-prompt .ic{ width:14px; height:14px; opacity:.6 }
.hp-prompt .typing{ display:inline-block; min-height:1em }
.hp-prompt .typing::after{
content:"▌"; color:var(--lime);
animation: blink 1s steps(1) infinite;
margin-left:2px;
}
@keyframes blink{ 50%{ opacity:0 } }
.hp-canvas{
position:relative; border-radius:var(--r-md); overflow:hidden;
border:1px solid var(--line-1);
background: #050507;
}
.hp-canvas .canvas-img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover;
animation: kenburns 16s ease-in-out infinite alternate;
opacity:0;
transition: opacity .8s var(--ease);
}
.hp-canvas .canvas-img.active{ opacity:1 }
.hp-canvas::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.5), transparent 60%);
}
@keyframes kenburns{
from{ transform: scale(1.04) translate(0,0) }
to{ transform: scale(1.12) translate(-1.5%, -1%) }
}
.hp-canvas .grid-overlay{
position:absolute; inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size:20px 20px;
}
.hp-canvas .scan{
position:absolute; left:0; right:0; height:2px;
background:linear-gradient(90deg, transparent, var(--lime), transparent);
top:0;
animation: scan 4s linear infinite;
opacity:.7;
box-shadow: 0 0 12px var(--lime);
}
@keyframes scan{ 0%{ top:0 } 100%{ top:100% } }
.hp-canvas .badge{
position:absolute; right:14px; top:14px;
padding:5px 10px; border-radius:999px;
background:rgba(0,0,0,.5); backdrop-filter: blur(8px);
border:1px solid var(--line-2);
font-family:var(--mono); font-size:10px; color:var(--lime);
letter-spacing:.1em; text-transform:uppercase;
display:flex; align-items:center; gap:6px;
}
.hp-canvas .badge::before{
content:""; width:6px; height:6px; border-radius:50%; background:var(--lime);
animation: pulse 1.6s ease-out infinite;
}
.hp-controls{ display:flex; gap:8px; flex-wrap:wrap }
.hp-chip{
padding:8px 12px; border-radius:999px;
background:var(--bg-3); border:1px solid var(--line-2);
font-family:var(--mono); font-size:11px; color:var(--ink-2);
display:inline-flex; align-items:center; gap:6px;
}
.hp-chip.active{ background:var(--lime); color:#000; border-color:var(--lime) }
/* ─────────────────────────────────────────────────────────────
MARQUEE
───────────────────────────────────────────────────────────── */
.marquee{
position:relative; z-index:5;
border-block:1px solid var(--line-1);
overflow:hidden;
padding: 26px 0;
background:var(--bg-1);
}
.marquee-track{
display:flex; gap:60px;
animation: scroll 40s linear infinite;
width:max-content;
}
.marquee-item{
display:flex; align-items:center; gap:14px;
font-family:var(--serif); font-size:24px; color:var(--ink-2);
white-space:nowrap;
}
.marquee-item .dot{
width:6px; height:6px; border-radius:50%; background:var(--lime);
}
.marquee-item em{ font-style:italic; color:var(--ink-1) }
@keyframes scroll{ to{ transform: translateX(-50%) } }
/* ─────────────────────────────────────────────────────────────
SECTIONS (shared)
───────────────────────────────────────────────────────────── */
.section{
position:relative; z-index:5;
padding: clamp(80px, 12vw, 180px) var(--pad);
}
.section-head{
display:flex; flex-direction:column; gap:16px;
margin-bottom: 64px;
max-width: 920px;
}
.section-label{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--mono); font-size:11px; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-3);
}
.section-label::before{
content:""; width:24px; height:1px; background:var(--lime);
}
.section-title{
font-family:var(--serif); font-weight:400;
font-size: clamp(40px, 6.5vw, 96px);
line-height:1; letter-spacing:-.025em;
margin:0;
}
.section-title em{
font-style:italic;
background: linear-gradient(180deg, var(--lime), var(--lime-deep));
-webkit-background-clip: text; background-clip:text; color:transparent;
}
.section-body{
font-size:17px; color:var(--ink-2); line-height:1.55;
max-width:60ch; font-weight:300;
}
/* Reveal */
.reveal{ opacity:0; transform:translateY(30px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out) }
.reveal.in{ opacity:1; transform:none }
.reveal-stagger > *{ opacity:0; transform:translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.reveal-stagger.in > *{ opacity:1; transform:none }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.0s }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.07s }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.14s }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.21s }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.28s }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.35s }
.reveal-stagger.in > *:nth-child(7){ transition-delay:.42s }
.reveal-stagger.in > *:nth-child(8){ transition-delay:.49s }
/* ─────────────────────────────────────────────────────────────
FEATURE TEASERS (homepage)
───────────────────────────────────────────────────────────── */
.teasers{
display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
}
@media (max-width:960px){ .teasers{ grid-template-columns:1fr } }
.teaser{
position:relative; overflow:hidden;
border:1px solid var(--line-2);
border-radius:var(--r-lg);
background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
padding:30px;
min-height:280px;
display:flex; flex-direction:column; justify-content:space-between;
transition: border-color .35s var(--ease), transform .5s var(--ease);
text-decoration:none; color:inherit;
}
.teaser::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(204,255,0,.10), transparent 50%);
opacity:0; transition: opacity .4s var(--ease);
}
.teaser:hover{ border-color:rgba(204,255,0,.4); transform:translateY(-4px) }
.teaser:hover::before{ opacity:1 }
.teaser h3{
font-family:var(--serif); font-weight:400;
font-size:34px; line-height:1.05; letter-spacing:-.02em;
margin:0 0 14px;
}
.teaser h3 em{ font-style:italic; color:var(--lime) }
.teaser p{ color:var(--ink-3); font-size:14.5px; line-height:1.55; margin:0 0 24px; font-weight:300 }
.teaser .arrow{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
color:var(--lime);
transition: gap .3s var(--ease);
}
.teaser:hover .arrow{ gap:14px }
.teaser .arrow svg{ width:14px; height:14px }
.teaser .tag{
font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--ink-3);
display:inline-flex; align-items:center; gap:8px;
margin-bottom:12px;
}
.teaser .tag .num{ color:var(--lime) }
/* ─────────────────────────────────────────────────────────────
FEATURES BENTO (features page)
───────────────────────────────────────────────────────────── */
.bento{
display:grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(220px, auto);
gap:14px;
}
.cell{
position:relative; overflow:hidden;
border:1px solid var(--line-2);
border-radius:var(--r-lg);
background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
padding:26px;
transition: border-color .35s var(--ease), transform .5s var(--ease), background .35s var(--ease);
display:flex; flex-direction:column; justify-content:space-between; gap:18px;
}
.cell::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(204,255,0,.10), transparent 50%);
opacity:0; transition: opacity .4s var(--ease);
}
.cell:hover{ border-color:var(--line-3); transform:translateY(-4px) }
.cell:hover::before{ opacity:1 }
.cell h3{
font-family:var(--serif); font-weight:400;
font-size:30px; line-height:1.05; letter-spacing:-.02em;
margin:0;
}
.cell h3 em{ font-style:italic; color:var(--lime) }
.cell p{
font-size:14.5px; line-height:1.55; color:var(--ink-3);
margin:0; max-width:42ch; font-weight:300;
}
.cell .tag{
font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--ink-3);
display:inline-flex; align-items:center; gap:8px;
}
.cell .tag .num{ color:var(--lime) }
.cell .visual{
position:relative; flex:1; min-height:160px; border-radius:var(--r-md); overflow:hidden;
background:var(--bg-2); border:1px solid var(--line-1);
}
.cell .visual.photo{ position:relative }
.cell .visual.photo img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter: saturate(1.05) brightness(.92);
transition: transform .8s var(--ease), filter .6s var(--ease);
}
.cell:hover .visual.photo img{ transform: scale(1.04); filter: saturate(1.15) brightness(1) }
.cell .visual.photo::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.5) 100%);
}
.cell .visual.photo .pin{
position:absolute; left:12px; top:12px; z-index:2;
font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
color:var(--lime);
padding:4px 8px; border-radius:999px;
background:rgba(0,0,0,.55); backdrop-filter: blur(8px);
border:1px solid rgba(204,255,0,.25);
display:inline-flex; align-items:center; gap:6px;
}
.cell .visual.photo .pin::before{
content:""; width:5px; height:5px; border-radius:50%; background:var(--lime);
box-shadow: 0 0 6px var(--lime);
}
.cell.c1{ grid-column: span 7; grid-row: span 2 }
.cell.c2{ grid-column: span 5 }
.cell.c3{ grid-column: span 5 }
.cell.c4{ grid-column: span 4 }
.cell.c5{ grid-column: span 4 }
.cell.c6{ grid-column: span 4 }
.cell.c7{ grid-column: span 6 }
.cell.c8{ grid-column: span 6 }
@media (max-width:960px){
.bento{ grid-template-columns: repeat(6, 1fr) }
.cell.c1{ grid-column: span 6; grid-row:auto }
.cell.c2,.cell.c3,.cell.c4,.cell.c5,.cell.c6,.cell.c7,.cell.c8{ grid-column: span 6 }
}
/* Feature visuals */
.fx{ position:absolute; inset:0 }
.fx-image{
background:
radial-gradient(circle at 25% 30%, rgba(204,255,0,.4), transparent 50%),
radial-gradient(circle at 75% 70%, rgba(59,155,232,.45), transparent 55%),
radial-gradient(circle at 50% 50%, rgba(255,90,180,.25), transparent 60%),
linear-gradient(135deg, #14141a, #0a0a0d);
}
.fx-image::before{
content:""; position:absolute; inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 22px 22px;
}
.fx-image::after{
content:""; position:absolute;
width:120px; height:120px; border:2px dashed rgba(204,255,0,.6); border-radius:50%;
left:50%; top:50%; transform:translate(-50%,-50%);
animation: spin 18s linear infinite;
}
@keyframes spin{ to{ transform: translate(-50%,-50%) rotate(360deg) } }
.fx-video{
background:linear-gradient(135deg, #0d0d11, #050507);
display:grid; place-items:center;
}
.fx-video .frames{ display:flex; gap:6px; align-items:center; padding:0 18px }
.fx-video .frame{
flex:1; height:70px; border-radius:6px; border:1px solid var(--line-2);
background:linear-gradient(135deg, rgba(204,255,0,.2), rgba(59,155,232,.2));
position:relative; overflow:hidden;
}
.fx-video .frame::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
transform:translateX(-100%);
animation: shimmer 3s ease-in-out infinite;
}
.fx-video .frame:nth-child(2)::after{ animation-delay:.5s }
.fx-video .frame:nth-child(3)::after{ animation-delay:1s }
.fx-video .frame:nth-child(4)::after{ animation-delay:1.5s }
.fx-video .frame:nth-child(5)::after{ animation-delay:2s }
@keyframes shimmer{ 50%, 100%{ transform: translateX(100%) } }
.fx-multi{
background:linear-gradient(135deg, #0d0d11, #050507);
display:grid; grid-template-columns: repeat(4,1fr); gap:6px; padding:18px;
}
.fx-multi .tile{
border-radius:6px; border:1px solid var(--line-2);
animation: pop .6s var(--ease-out) both;
}
.fx-multi .tile:nth-child(1){ animation-delay:.1s; background:radial-gradient(circle, rgba(204,255,0,.4), transparent), linear-gradient(135deg, #1a1a1f, #0a0a0d) }
.fx-multi .tile:nth-child(2){ animation-delay:.2s; background:radial-gradient(circle, rgba(59,155,232,.5), transparent), linear-gradient(135deg, #1a1a1f, #0a0a0d) }
.fx-multi .tile:nth-child(3){ animation-delay:.3s; background:radial-gradient(circle, rgba(255,120,200,.4), transparent), linear-gradient(135deg, #1a1a1f, #0a0a0d) }
.fx-multi .tile:nth-child(4){ animation-delay:.4s; background:radial-gradient(circle, rgba(255,200,80,.4), transparent), linear-gradient(135deg, #1a1a1f, #0a0a0d) }
.fx-multi .tile:nth-child(5){ animation-delay:.5s; background:radial-gradient(circle, rgba(180,120,255,.4), transparent), linear-gradient(135deg, #1a1a1f, #0a0a0d) }
.fx-multi .tile:nth-child(6){ animation-delay:.6s; background:radial-gradient(circle, rgba(80,255,200,.4), transparent), linear-gradient(135deg, #1a1a1f, #0a0a0d) }
.fx-multi .tile:nth-child(7){ animation-delay:.7s; background:radial-gradient(circle, rgba(204,255,0,.3), transparent), linear-gradient(135deg, #1a1a1f, #0a0a0d) }
.fx-multi .tile:nth-child(8){ animation-delay:.8s; background:radial-gradient(circle, rgba(59,155,232,.3), transparent), linear-gradient(135deg, #1a1a1f, #0a0a0d) }
@keyframes pop{ from{ opacity:0; transform:scale(.8) } to{ opacity:1; transform:none } }
.fx-cinema{
background:radial-gradient(circle at 50% 60%, rgba(59,155,232,.3), transparent 50%), linear-gradient(180deg, #06060a, #000);
position:relative;
}
.fx-cinema .reel{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:160px; height:160px; border-radius:50%;
border:2px solid var(--line-3);
display:grid; place-items:center;
animation: spin 16s linear infinite;
}
.fx-cinema .reel::before, .fx-cinema .reel::after{
content:""; position:absolute;
width:30px; height:30px; border-radius:50%;
background:var(--bg-0); border:2px solid var(--line-3);
}
.fx-cinema .reel::before{ left:10px; top:50%; transform:translateY(-50%) }
.fx-cinema .reel::after{ right:10px; top:50%; transform:translateY(-50%) }
.fx-cinema .reel .center{
width:30px; height:30px; border-radius:50%;
background:var(--bg-0); border:2px solid var(--lime);
}
.fx-cinema .strip{
position:absolute; left:0; right:0; height:30px;
border-block:2px solid var(--line-3);
background:repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.06) 6px 12px);
}
.fx-cinema .strip.top{ top:30px } .fx-cinema .strip.bot{ bottom:30px }
.fx-local{
background:linear-gradient(135deg, #0a0a0e, #050507);
display:grid; place-items:center; padding:24px;
}
.fx-local .chip{
position:relative;
width:140px; height:140px;
border:1px solid var(--line-3);
border-radius:14px;
background:radial-gradient(circle at 50% 50%, rgba(204,255,0,.2), transparent 60%), linear-gradient(135deg, #14141a, #0a0a0d);
display:grid; place-items:center;
font-family:var(--mono); font-size:11px; color:var(--lime); letter-spacing:.2em;
}
.fx-local .chip::before, .fx-local .chip::after{
content:""; position:absolute; inset:-6px;
border:1px dashed rgba(204,255,0,.4);
border-radius:18px;
animation: spin 20s linear infinite;
}
.fx-local .chip::after{ inset:-14px; animation-direction:reverse; animation-duration:30s; border-color:rgba(59,155,232,.3) }
.fx-local .chip span{ position:relative; z-index:2; padding:6px 12px; background:var(--bg-0); border:1px solid var(--line-2); border-radius:6px }
.fx-board{
background:linear-gradient(135deg, #0a0a0e, #050507);
padding:14px;
display:grid; grid-template-columns: repeat(3,1fr); grid-auto-rows:1fr; gap:8px;
}
.fx-board .card{
border-radius:8px; border:1px solid var(--line-2);
background:linear-gradient(135deg, rgba(204,255,0,.08), rgba(59,155,232,.06));
position:relative; overflow:hidden;
}
.fx-board .card::before{
content:""; position:absolute; left:8px; top:8px;
width:18px; height:18px; border-radius:4px;
background:var(--lime); opacity:.8;
}
.fx-board .card::after{
content:""; position:absolute; left:8px; right:8px; bottom:8px; height:2px;
background:linear-gradient(90deg, var(--lime), transparent);
}
.fx-mood{
background:#000;
display:grid; grid-template-columns: 1fr 1fr; gap:6px; padding:14px;
}
.fx-mood .swatch{
border-radius:8px; min-height:60px;
border:1px solid var(--line-1);
}
.fx-mood .swatch.s1{ background:linear-gradient(135deg, var(--lime), var(--lime-deep)) }
.fx-mood .swatch.s2{ background:linear-gradient(135deg, #ff5cb3, #b21e7a) }
.fx-mood .swatch.s3{ background:linear-gradient(135deg, var(--blue), var(--blue-deep)) }
.fx-mood .swatch.s4{ background:linear-gradient(135deg, #ffb347, #ff6f3c) }
.fx-audio{
background:linear-gradient(135deg, #0a0a0e, #050507);
display:flex; align-items:center; justify-content:center; gap:4px;
padding: 0 24px;
}
.fx-audio .bar{
flex:1; max-width:8px; background:linear-gradient(180deg, var(--lime), var(--lime-deep));
border-radius:4px;
animation: bounce 1.4s ease-in-out infinite;
transform-origin: bottom;
}
.fx-audio .bar:nth-child(1){ animation-delay:0s; height:30% }
.fx-audio .bar:nth-child(2){ animation-delay:.1s; height:50% }
.fx-audio .bar:nth-child(3){ animation-delay:.2s; height:80% }
.fx-audio .bar:nth-child(4){ animation-delay:.3s; height:60% }
.fx-audio .bar:nth-child(5){ animation-delay:.4s; height:90% }
.fx-audio .bar:nth-child(6){ animation-delay:.5s; height:40% }
.fx-audio .bar:nth-child(7){ animation-delay:.6s; height:70% }
.fx-audio .bar:nth-child(8){ animation-delay:.7s; height:55% }
.fx-audio .bar:nth-child(9){ animation-delay:.8s; height:85% }
.fx-audio .bar:nth-child(10){ animation-delay:.9s; height:35% }
.fx-audio .bar:nth-child(11){ animation-delay:1s; height:65% }
.fx-audio .bar:nth-child(12){ animation-delay:1.1s; height:45% }
@keyframes bounce{ 0%,100%{ transform: scaleY(.4) } 50%{ transform: scaleY(1) } }
/* ─────────────────────────────────────────────────────────────
PRIVACY (LOCAL AI)
───────────────────────────────────────────────────────────── */
.privacy-grid{
display:grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items:center;
}
@media (max-width:960px){ .privacy-grid{ grid-template-columns:1fr; gap:50px } }
.privacy-art{ position:relative; aspect-ratio:1/1; display:grid; place-items:center }
.orbit{
position:absolute; inset:0; border:1px solid var(--line-2); border-radius:50%;
animation: spin 40s linear infinite;
}
.orbit.o1{ inset:5% }
.orbit.o2{ inset:18%; animation-duration:30s; animation-direction:reverse }
.orbit.o3{ inset:32%; animation-duration:50s; border-style:dashed; border-color:var(--line-3) }
.orbit i{
position:absolute; width:10px; height:10px; border-radius:50%;
background:var(--lime); box-shadow:0 0 14px var(--lime);
left:50%; top:-5px; transform:translateX(-50%);
}
.orbit.o2 i{ background:var(--blue); box-shadow:0 0 14px var(--blue); top:auto; bottom:-5px }
.orbit.o3 i{ background:#ff5cb3; box-shadow:0 0 14px #ff5cb3; left:-5px; top:50%; transform:translateY(-50%) }
.privacy-core{
position:relative;
width:140px; height:140px; border-radius:50%;
background: radial-gradient(circle at 30% 30%, rgba(204,255,0,.3), rgba(0,0,0,.6));
border:1px solid var(--lime);
box-shadow: 0 0 60px rgba(204,255,0,.4), inset 0 0 40px rgba(204,255,0,.2);
display:grid; place-items:center;
font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--lime);
text-transform:uppercase;
}
.privacy-core::after{
content:""; position:absolute; inset:-2px; border-radius:50%;
border:1px dashed rgba(204,255,0,.3);
animation: spin 12s linear infinite;
}
.privacy-list{ display:grid; gap:24px; margin-top:40px }
.privacy-item{
display:grid; grid-template-columns: auto 1fr; gap:18px; align-items:start;
padding:20px 0;
border-top:1px solid var(--line-1);
}
.privacy-item .num{
font-family:var(--serif); font-size:30px; font-style:italic;
color:var(--lime); line-height:1;
}
.privacy-item h4{ margin:0 0 6px; font-family:var(--sans); font-weight:500; font-size:18px; letter-spacing:-.01em }
.privacy-item p{ margin:0; color:var(--ink-3); font-size:14.5px; line-height:1.5; font-weight:300 }
/* ─────────────────────────────────────────────────────────────
SHOWCASE GALLERY
───────────────────────────────────────────────────────────── */
.gallery{
display:grid; grid-template-columns: repeat(12, 1fr); gap:12px;
height: clamp(400px, 60vw, 720px);
}
.tile{
position:relative; overflow:hidden; border-radius:var(--r-md);
border:1px solid var(--line-2);
transition: transform .5s var(--ease), border-color .35s;
background:#0a0a0c;
}
.tile img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover;
transition: transform .9s var(--ease), filter .6s var(--ease);
filter: saturate(1) brightness(.92);
}
.tile::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 100%),
radial-gradient(140% 80% at 50% 0%, transparent 50%, rgba(0,0,0,.25) 100%);
transition: opacity .4s var(--ease);
}
.tile::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(204,255,0,.18), transparent 50%);
opacity:0; transition: opacity .35s var(--ease);
mix-blend-mode: screen;
}
.tile:hover{ transform:translateY(-4px); border-color:rgba(204,255,0,.4) }
.tile:hover img{ transform:scale(1.06); filter: saturate(1.15) brightness(1) }
.tile:hover::before{ opacity:1 }
.tile .meta{
position:absolute; left:14px; bottom:14px; z-index:3;
font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:#fff;
padding:6px 10px; border-radius:999px;
background:rgba(0,0,0,.55); backdrop-filter: blur(10px);
border:1px solid rgba(255,255,255,.12);
display:inline-flex; align-items:center; gap:8px;
}
.tile .meta::before{
content:""; width:5px; height:5px; border-radius:50%; background:var(--lime);
box-shadow: 0 0 8px var(--lime);
}
.t1{ grid-column: span 5; grid-row: span 2 }
.t2{ grid-column: span 4 }
.t3{ grid-column: span 3 }
.t4{ grid-column: span 4 }
.t5{ grid-column: span 3 }
@media (max-width:760px){
.gallery{ grid-template-columns: repeat(4,1fr); height:auto }
.t1,.t2,.t3,.t4,.t5{ grid-column: span 4; min-height:240px }
.t1{ grid-row:auto }
}
/* Extended gallery for showcase page */
.gallery-extended{
display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:40px;
}
@media (max-width:860px){ .gallery-extended{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .gallery-extended{ grid-template-columns:1fr } }
.gallery-extended .tile{ aspect-ratio: 4/5; min-height:280px }
/* ─────────────────────────────────────────────────────────────
PROCESS / WORKFLOW
───────────────────────────────────────────────────────────── */
.process{ display:grid; grid-template-columns: repeat(3,1fr); gap:30px }
@media (max-width:860px){ .process{ grid-template-columns:1fr } }
.step{
position:relative; padding:40px 0;
border-top:1px solid var(--line-2);
}
.step .step-num{
font-family:var(--serif); font-style:italic; font-weight:400;
font-size: clamp(80px, 10vw, 150px);
line-height:.85; letter-spacing:-.04em;
background: linear-gradient(180deg, var(--lime) 0%, transparent 95%);
-webkit-background-clip: text; background-clip:text; color:transparent;
margin-bottom:20px;
}
.step h3{
font-family:var(--serif); font-weight:400;
font-size:30px; letter-spacing:-.02em; margin:0 0 14px; line-height:1.05;
}
.step p{ color:var(--ink-3); font-size:15px; line-height:1.55; margin:0; max-width:34ch; font-weight:300 }
/* Process detail blocks (workflow page) */
.step-detail{
margin-top:60px; padding-top:60px; border-top:1px solid var(--line-1);
display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;
}
@media (max-width:860px){ .step-detail{ grid-template-columns:1fr; gap:40px } }
.step-detail.reverse{ direction:rtl }
.step-detail.reverse > *{ direction:ltr }
.step-detail-art{
aspect-ratio:1/1; border-radius:var(--r-lg);
border:1px solid var(--line-2);
background:linear-gradient(135deg, var(--bg-3), var(--bg-2));
position:relative; overflow:hidden;
display:grid; place-items:center;
}
.step-detail h4{
font-family:var(--serif); font-weight:400;
font-size:42px; letter-spacing:-.02em; margin:0 0 20px; line-height:1.05;
}
.step-detail h4 em{ font-style:italic; color:var(--lime) }
.step-detail p{ color:var(--ink-2); font-size:16px; line-height:1.55; font-weight:300; margin:0 0 16px }
.step-detail .label{
font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
color:var(--lime); margin-bottom:12px; display:block;
}
/* ─────────────────────────────────────────────────────────────
QUOTE
───────────────────────────────────────────────────────────── */
.quote{
position:relative; z-index:5;
padding: clamp(100px, 14vw, 180px) var(--pad);
text-align:center;
}
.quote q{
display:block;
font-family:var(--serif); font-weight:400;
font-size: clamp(32px, 5vw, 68px);
line-height:1.1; letter-spacing:-.025em;
max-width:22ch; margin:0 auto;
quotes:none;
}
.quote q::before, .quote q::after{ content:none }
.quote q em{ font-style:italic; color:var(--lime) }
.quote .attribution{
margin-top:40px; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--ink-3);
}
/* ─────────────────────────────────────────────────────────────
CTA
───────────────────────────────────────────────────────────── */
.cta-final{
position:relative; z-index:5;
padding: clamp(80px, 12vw, 160px) var(--pad);
border-top:1px solid var(--line-1);
}
.cta-card{
position:relative;
border:1px solid var(--line-2);
border-radius: var(--r-xl);
padding: clamp(50px, 8vw, 100px) clamp(30px, 6vw, 80px);
text-align:center;
background:
radial-gradient(800px 500px at 50% 0%, rgba(204,255,0,.10), transparent 60%),
linear-gradient(180deg, var(--bg-3), var(--bg-1));
overflow:hidden;
}
.cta-card::before{
content:""; position:absolute; inset:-1px;
background:linear-gradient(180deg, rgba(204,255,0,.4), transparent 30%);
border-radius: var(--r-xl); padding:1px;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events:none;
}
.cta-card h2{
font-family:var(--serif); font-weight:400;
font-size: clamp(44px, 7vw, 110px);
line-height:.95; letter-spacing:-.03em;
margin:0 0 28px;
}
.cta-card h2 em{ font-style:italic; color:var(--lime) }
.cta-card p{
color:var(--ink-2); font-size:17px; max-width:48ch; margin:0 auto 40px;
font-weight:300; line-height:1.55;
}
/* ─────────────────────────────────────────────────────────────
FOOTER
───────────────────────────────────────────────────────────── */
.footer{
position:relative; z-index:5;
padding: 60px var(--pad) 40px;
border-top:1px solid var(--line-1);
}
.foot-grid{
display:grid; grid-template-columns: 2fr repeat(3, 1fr); gap:50px;
margin-bottom:60px;
}
@media (max-width:860px){ .foot-grid{ grid-template-columns: 1fr 1fr; gap:30px } }
.foot-brand{
font-family:var(--serif); font-size:34px;
letter-spacing:-.015em; margin:0 0 14px;
}
.foot-brand em{ font-style:italic; color:var(--lime) }
.foot-tag{ color:var(--ink-3); font-size:14px; max-width:34ch; line-height:1.5 }
.foot-col h5{
margin:0 0 16px; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
text-transform:uppercase; color:var(--ink-3); font-weight:500;
}
.foot-col a{
display:block; padding:6px 0; color:var(--ink-2); font-size:14px;
transition: color .25s;
}
.foot-col a:hover{ color:var(--lime) }
.foot-bot{
display:flex; justify-content:space-between; align-items:center; gap:20px;
padding-top:30px; border-top:1px solid var(--line-1);
font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-4);
flex-wrap:wrap;
}
/* ─────────────────────────────────────────────────────────────
ANIMATIONS
───────────────────────────────────────────────────────────── */
@keyframes rise{
from{ opacity:0; transform:translateY(40px) }
to{ opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:.001ms !important;
transition-duration:.001ms !important;
}
}
/* ═══════════════════════════════════════════════════════════════
APPLE TYPOGRAPHY OVERRIDES — kept at end so they win the cascade
═══════════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────
APPLE TYPOGRAPHY SYSTEM
Apple's UI uses different SF variants at different sizes,
with specific tracking values per size band. We mirror that.
──────────────────────────────────────────── */
/* Body sizes use SF Pro Text (loose tracking) */
body, p, li, input, textarea, select, .nav-links, .foot-col a, .hero-sub, .section-body, .page-lede{
font-family: var(--sans);
font-weight: 400;
letter-spacing: -0.005em;
}
/* Large-display Apple style: SF Pro Display, very tight tracking, weight 600 */
h1, h2, h3, .hero-headline, .page-title, .section-title, .cta-card h2, .quote q{
font-family: var(--display);
-webkit-font-smoothing: antialiased;
}
/* Apple's signature tracking: tighter as size goes up */
.hero-headline, .page-title, .cta-card h2, .quote q{
letter-spacing: -0.045em;
font-weight: 600;
}
.section-title{
letter-spacing: -0.04em;
font-weight: 600;
}
/* Subheads (medium scale) — Apple uses semibold here */
.teaser h3, .cell h3, .step h3, .step-detail h4, .value-card h3,
.role-title, .office .city, .faq-item h4, .privacy-item h4, .tenet h3{
letter-spacing: -0.025em;
font-weight: 600;
font-style: normal;
}
/* Eyebrows / labels — Apple uses uppercase tracked-out caps with semibold */
.section-label, .page-eyebrow, .hero-eyebrow, .nav-cta, .crumbs,
.tag, .vt, .role-meta, .form label{
font-weight: 500;
}
/* Buttons — Apple's pill buttons are semibold, slightly tracked */
.btn, .nav-cta{
font-weight: 500;
letter-spacing: -0.005em;
}
/* Body paragraphs — Apple uses regular weight, never light */
.hero-sub, .page-lede, .section-body, .manifesto-prose p,
.cell p, .teaser p, .step p, .value-card p, .perk p{
font-weight: 400;
}
/* APPLE EMPHASIS PATTERN — italic in headlines becomes a lime color shift, not a font shift. This is exactly how apple.com handles "Pro. Beyond." style emphasis. */
.hero-headline em, .page-title em, .section-title em, .cta-card h2 em,
.teaser h3 em, .cell h3 em, .step h3 em, .step-detail h4 em,
.value-card h3 em, .role-title em, .office .city em,
.faq-item h4 em, .quote q em, .tenet h3 em,
.foot-brand em, .nav-brand em{
font-style: normal;
background: linear-gradient(180deg, var(--lime) 0%, var(--lime-deep) 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
font-weight: inherit;
}
/* Body italic — keep as a soft lime color emphasis, not italic */
.hero-sub em, .page-lede em, .section-body em, .manifesto-prose em.lime,
.cell p em, .teaser p em, .privacy-item p em{
font-style: normal;
color: var(--lime);
font-weight: 500;
}
/* Drop the .it gradient class on headline (was the original italic gradient) — already covered above, but re-declare to make sure */
.hero-headline .it{
font-style: normal;
background: linear-gradient(180deg, var(--lime) 0%, var(--lime-deep) 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
font-weight: 600;
}
.hero-headline .it::after{ display: none } /* remove the underline glow that was tied to italics */
/* Marquee items — were italic serif, now Apple-style sentence-case display */
.marquee-item{
font-family: var(--display);
font-style: normal;
font-weight: 500;
letter-spacing: -0.02em;
}
.marquee-item em{
font-style: normal;
color: var(--lime);
}
/* Quote — was big italic serif, now Apple display semibold with lime emphasis */
.quote q{ font-style: normal }
/* Manifesto drop-cap — was italic serif, now Apple display heavy */
.manifesto-prose p:first-of-type::first-letter{
font-family: var(--display);
font-style: normal;
font-weight: 700;
}
/* Step numbers — were italic serif, now display heavy with the gradient */
.step .step-num, .stat .num, .privacy-item .num, .tenet .tn, .office .city{
font-family: var(--display);
font-style: normal;
font-weight: 700;
}
/* Signature on manifesto — make it less "handwritten serif" and more Apple */
.signature .sig{
font-family: var(--display);
font-style: normal;
font-weight: 600;
letter-spacing: -0.02em;
}
/* ═══════════════════════════════════════════════════════════════
MEANINGFUL VISUALS — replacing decorative motion with actual UI.
These illustrate what each studio does, not just "AI is happening."
═══════════════════════════════════════════════════════════════ */
/* ── PRIVACY DIAGRAM: data flow inside the device ────────────── */
.privacy-art{
/* override the centered grid layout */
display: block !important;
position: relative;
aspect-ratio: 1/1.05;
}
.device-frame{
position: absolute;
inset: 0;
border: 1px solid var(--line-3);
border-radius: 22px;
background: linear-gradient(180deg, rgba(20,20,22,.9), rgba(8,8,10,.95));
box-shadow:
0 40px 80px -20px rgba(0,0,0,.6),
0 0 60px -10px rgba(204,255,0,.12),
inset 0 1px 0 rgba(255,255,255,.04);
overflow: hidden;
}
.device-bezel{
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--line-1);
}
.device-bezel .dot-row{ display: inline-flex; gap: 6px }
.device-bezel .dot-row i{ width: 8px; height: 8px; border-radius: 50%; background: var(--ink-5) }
.device-bezel .device-label{
flex: 1;
font-family: var(--mono); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-3); text-align: center;
}
.device-screen{
padding: 28px 22px;
display: grid;
gap: 0;
}
.dev-step{
position: relative;
display: grid;
grid-template-columns: 38px 1fr;
gap: 14px;
align-items: center;
padding: 14px 16px;
border: 1px solid var(--line-2);
border-radius: 12px;
background: var(--bg-2);
transition: border-color .4s var(--ease), background .4s var(--ease);
}
.dev-step-icon{
width: 38px; height: 38px;
border-radius: 10px;
display: grid; place-items: center;
background: rgba(204,255,0,.08);
border: 1px solid rgba(204,255,0,.2);
color: var(--lime);
}
.dev-step-icon svg{ width: 18px; height: 18px }
.dev-step-label{
grid-column: 2; grid-row: 1;
font-family: var(--display); font-weight: 600; font-size: 14px;
color: var(--ink-1); letter-spacing: -.005em;
}
.dev-step-meta{
grid-column: 2; grid-row: 2;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
color: var(--ink-3); margin-top: 2px;
}
.dev-step.model{
border-color: rgba(204,255,0,.35);
background: linear-gradient(135deg, rgba(204,255,0,.06), rgba(204,255,0,.02));
}
.dev-step.model .dev-step-pulse{
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
width: 8px; height: 8px; border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0 0 rgba(204,255,0,.6);
animation: devPulse 1.8s ease-out infinite;
}
@keyframes devPulse{
0%{ box-shadow: 0 0 0 0 rgba(204,255,0,.6) }
70%{ box-shadow: 0 0 0 10px rgba(204,255,0,0) }
100%{ box-shadow: 0 0 0 0 rgba(204,255,0,0) }
}
.dev-pipe{
display: block;
width: 2px; height: 24px;
margin: 4px 0 4px 33px;
background: linear-gradient(180deg, var(--lime), rgba(204,255,0,.2));
border-radius: 1px;
position: relative;
overflow: hidden;
}
.dev-pipe::after{
content: ""; position: absolute; left: -1px; right: -1px;
height: 8px; top: -8px;
background: linear-gradient(180deg, transparent, var(--lime));
animation: devFlow 2s linear infinite;
border-radius: 1px;
}
@keyframes devFlow{
0%{ top: -8px } 100%{ top: 100% }
}
/* The "blocked cloud" floating off to the side */
.dev-cloud-block{
position: absolute;
right: -8%; top: 38%;
display: flex; align-items: center; gap: 0;
pointer-events: none;
}
.block-line{
width: 36px; height: 1px;
background: repeating-linear-gradient(90deg, var(--ink-4) 0 4px, transparent 4px 8px);
}
.block-cloud{
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 14px; border-radius: 999px;
background: rgba(15,15,18,.85); backdrop-filter: blur(8px);
border: 1px solid var(--line-2);
color: var(--ink-3);
font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase;
position: relative;
}
.block-cloud svg{ width: 16px; height: 16px }
.block-x{
position: absolute;
right: -6px; top: -6px;
width: 28px; height: 28px;
background: rgba(255,40,80,.12);
border: 1px solid rgba(255,80,100,.4);
color: #ff5566;
border-radius: 50%;
display: grid; place-items: center;
}
.block-x svg{ width: 14px; height: 14px }
.block-x span{ display: none }
@media (max-width: 720px){
.dev-cloud-block{ display: none }
}
/* ── FEATURES: realistic UI mockups for each studio ─────────── */
/* Multi-Shot: shows 4 variants of "the same prompt" with selected indicator */
.fx-multi{
background: linear-gradient(135deg, #0d0d11, #050507);
display: grid !important;
grid-template-columns: repeat(2,1fr) !important;
grid-template-rows: repeat(2,1fr) !important;
gap: 6px !important;
padding: 18px !important;
}
.fx-multi .ms-card{
position: relative;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line-2);
background-size: cover;
background-position: center;
animation: pop .6s var(--ease-out) both;
transition: border-color .3s var(--ease);
}
.fx-multi .ms-card:nth-child(1){ animation-delay: .1s; background-image: url("https://images.unsplash.com/photo-1760800185531-2b1da99d7538?fm=jpg&q=80&w=400&auto=format&fit=crop") }
.fx-multi .ms-card:nth-child(2){ animation-delay: .2s; background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=400&auto=format&fit=crop") }
.fx-multi .ms-card:nth-child(3){ animation-delay: .3s; background-image: url("https://images.unsplash.com/photo-1518735881707-1a53be861a5f?fm=jpg&q=80&w=400&auto=format&fit=crop") }
.fx-multi .ms-card:nth-child(4){ animation-delay: .4s; background-image: url("https://images.unsplash.com/photo-1761775132162-944e2bcd1a3b?fm=jpg&q=80&w=400&auto=format&fit=crop") }
.fx-multi .ms-card .label{
position: absolute; left: 8px; top: 8px;
font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
text-transform: uppercase; color: #fff;
padding: 3px 8px; border-radius: 999px;
background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.1);
}
.fx-multi .ms-card.selected{ border-color: var(--lime); box-shadow: 0 0 0 2px rgba(204,255,0,.25) }
.fx-multi .ms-card.selected .label{
background: var(--lime); color: #000;
border-color: var(--lime);
}
/* Local AI: shows actual data path with on-device verification badge */
.fx-local{
background: linear-gradient(135deg, #0a0a0e, #050507) !important;
display: grid !important;
place-items: stretch !important;
padding: 20px !important;
gap: 10px !important;
}
.fx-local .lai-row{
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border: 1px solid var(--line-2);
border-radius: 8px;
background: var(--bg-2);
font-family: var(--mono); font-size: 11px;
color: var(--ink-2);
}
.fx-local .lai-row.ok{ border-color: rgba(204,255,0,.3) }
.fx-local .lai-row.ok .ico{ color: var(--lime) }
.fx-local .lai-row .ico{
width: 14px; height: 14px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-3);
}
.fx-local .lai-row .ico svg{ width: 14px; height: 14px }
.fx-local .lai-row .lai-text{ flex: 1; letter-spacing: .02em }
.fx-local .lai-row .lai-status{
font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
color: var(--lime);
}
/* Storyboard: actual frame thumbnails with shot numbers and notes */
.fx-board{
background: linear-gradient(135deg, #0a0a0e, #050507) !important;
padding: 14px !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
grid-template-rows: 1fr !important;
gap: 8px !important;
}
.fx-board .sb-frame{
position: relative;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line-2);
background-size: cover;
background-position: center;
}
.fx-board .sb-frame:nth-child(1){ background-image: url("https://images.unsplash.com/photo-1518735881707-1a53be861a5f?fm=jpg&q=80&w=300&auto=format&fit=crop") }
.fx-board .sb-frame:nth-child(2){ background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=300&auto=format&fit=crop") }
.fx-board .sb-frame:nth-child(3){ background-image: url("https://images.unsplash.com/photo-1566052356702-c255c7af3521?fm=jpg&q=80&w=300&auto=format&fit=crop") }
.fx-board .sb-frame .num{
position: absolute; left: 6px; top: 6px;
font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
color: var(--lime);
padding: 3px 6px; border-radius: 4px;
background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
}
.fx-board .sb-frame .desc{
position: absolute; left: 6px; right: 6px; bottom: 6px;
font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em;
color: #fff;
padding: 4px 6px; border-radius: 4px;
background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
line-height: 1.3;
}
/* Mood/Boards: actual moodboard with palette + reference combo */
.fx-mood{
background: #000 !important;
display: grid !important;
grid-template-columns: 1.4fr 1fr !important;
grid-template-rows: 1fr 1fr !important;
gap: 4px !important;
padding: 8px !important;
}
.fx-mood .mood-img{
background-size: cover; background-position: center;
border-radius: 4px;
border: 1px solid var(--line-1);
position: relative;
}
.fx-mood .mood-img.m1{ grid-row: span 2; background-image: url("https://images.unsplash.com/photo-1760800185531-2b1da99d7538?fm=jpg&q=80&w=400&auto=format&fit=crop") }
.fx-mood .mood-img.m2{ background-image: url("https://images.unsplash.com/photo-1631034564300-974a2302d82d?fm=jpg&q=80&w=300&auto=format&fit=crop") }
.fx-mood .mood-palette{
display: flex; gap: 3px;
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--line-1);
}
.fx-mood .mood-palette span{ flex: 1 }
.fx-mood .mood-palette .c1{ background: #d63a5e }
.fx-mood .mood-palette .c2{ background: #1b1b3a }
.fx-mood .mood-palette .c3{ background: #ccff00 }
.fx-mood .mood-palette .c4{ background: #efe9da }
/* Click-to-Ad: actual platform mockups (Instagram/TikTok/YouTube) at proper aspect */
.fx-ad-export{
background: linear-gradient(135deg, #0a0a0e, #050507) !important;
display: grid !important;
grid-template-columns: 0.62fr 1fr 1.78fr !important;
gap: 10px !important;
padding: 18px !important;
align-items: end !important;
}
.fx-ad-export .ad-card{
position: relative;
border: 1px solid var(--line-2);
border-radius: 8px;
overflow: hidden;
background-size: cover;
background-position: center;
background-color: var(--bg-3);
aspect-ratio: var(--ratio);
}
.fx-ad-export .ad-card.r916{ --ratio: 9/16; background-image: url("https://images.unsplash.com/photo-1761775132162-944e2bcd1a3b?fm=jpg&q=80&w=400&auto=format&fit=crop") }
.fx-ad-export .ad-card.r11{ --ratio: 1/1; background-image: url("https://images.unsplash.com/photo-1760800185531-2b1da99d7538?fm=jpg&q=80&w=400&auto=format&fit=crop") }
.fx-ad-export .ad-card.r169{ --ratio: 16/9; background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=600&auto=format&fit=crop") }
.fx-ad-export .ad-card .platform{
position: absolute; left: 8px; top: 8px;
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
text-transform: uppercase; color: #fff;
padding: 3px 7px; border-radius: 999px;
background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.1);
}
.fx-ad-export .ad-card .ratio-tag{
position: absolute; right: 8px; bottom: 8px;
font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
color: var(--lime);
padding: 3px 7px; border-radius: 4px;
background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
}
@media (max-width: 760px){
.fx-ad-export{ grid-template-columns: 0.62fr 1fr 1.4fr !important }
}
/* Video: actual frame strip with timeline scrubber */
.fx-video{
background: linear-gradient(135deg, #0d0d11, #050507) !important;
display: grid !important;
grid-template-rows: 1fr auto !important;
gap: 0 !important;
padding: 0 !important;
place-items: stretch !important;
}
.fx-video .vid-preview{
position: relative;
background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=600&auto=format&fit=crop");
background-size: cover;
background-position: center;
border-bottom: 1px solid var(--line-1);
display: grid; place-items: center;
}
.fx-video .vid-preview::after{
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.5), transparent 60%);
}
.fx-video .vid-play{
position: relative;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.2);
display: grid; place-items: center;
z-index: 2;
}
.fx-video .vid-play::before{
content: ""; width: 0; height: 0;
border-left: 12px solid var(--lime);
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
margin-left: 3px;
}
.fx-video .vid-time{
position: absolute; right: 10px; top: 10px;
font-family: var(--mono); font-size: 10px;
color: #fff; padding: 3px 7px; border-radius: 4px;
background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
letter-spacing: .04em;
z-index: 2;
}
.fx-video .vid-strip{
display: grid;
grid-template-columns: repeat(8,1fr);
gap: 2px;
padding: 8px;
background: var(--bg-2);
}
.fx-video .vid-strip span{
height: 26px;
border-radius: 2px;
background-size: cover;
background-position: center;
position: relative;
}
.fx-video .vid-strip span:nth-child(1){ background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=120&auto=format&fit=crop") }
.fx-video .vid-strip span:nth-child(2){ background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=120&auto=format&fit=crop&sat=-20") }
.fx-video .vid-strip span:nth-child(3){ background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=120&auto=format&fit=crop") }
.fx-video .vid-strip span:nth-child(4).cur{
outline: 2px solid var(--lime);
outline-offset: 1px;
background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=120&auto=format&fit=crop");
}
.fx-video .vid-strip span:nth-child(5){ background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=120&auto=format&fit=crop") }
.fx-video .vid-strip span:nth-child(6){ background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=120&auto=format&fit=crop") }
.fx-video .vid-strip span:nth-child(7){ background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=120&auto=format&fit=crop") }
.fx-video .vid-strip span:nth-child(8){ background-image: url("https://images.unsplash.com/photo-1672872476232-da16b45c9001?fm=jpg&q=80&w=120&auto=format&fit=crop") }
/* Workflow step art: real screens, not gradient placeholders */
.step-detail-art{
aspect-ratio: 1.1/1 !important;
border-radius: var(--r-lg) !important;
border: 1px solid var(--line-2);
background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
position: relative; overflow: hidden;
display: block !important; padding: 0;
}
.step-detail-art .sd-img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(1.05) brightness(.92);
}
.step-detail-art .sd-overlay{
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.65) 100%);
pointer-events: none;
}
.step-detail-art .sd-ui{
position: absolute;
left: 18px; right: 18px; bottom: 18px;
z-index: 2;
}
.step-detail-art .sd-prompt{
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-radius: 10px;
background: rgba(15,15,18,.78); backdrop-filter: blur(12px);
border: 1px solid var(--line-2);
font-family: var(--mono); font-size: 11.5px;
color: var(--ink-1); letter-spacing: .02em;
}
.step-detail-art .sd-prompt .lime-dot{
width: 8px; height: 8px; border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 8px var(--lime);
}
.step-detail-art .sd-prompt .typing-cursor{
color: var(--lime);
animation: blink 1s steps(1) infinite;
}
.step-detail-art .sd-controls{
display: flex; gap: 6px; margin-top: 10px;
flex-wrap: wrap;
}
.step-detail-art .sd-chip{
padding: 6px 10px; border-radius: 999px;
background: rgba(15,15,18,.78); backdrop-filter: blur(8px);
border: 1px solid var(--line-2);
font-family: var(--mono); font-size: 10px;
color: var(--ink-2); letter-spacing: .06em;
}
.step-detail-art .sd-chip.active{
background: var(--lime); color: #000; border-color: var(--lime);
}
.step-detail-art .sd-aspects{
position: absolute; left: 0; right: 0; top: 0; bottom: 0;
display: grid;
grid-template-columns: 0.62fr 1fr 1.78fr;
gap: 14px;
padding: 30px;
align-items: end;
}
.step-detail-art .sd-aspects .ad{
position: relative;
border-radius: 8px;
border: 1px solid var(--line-2);
background-size: cover; background-position: center;
aspect-ratio: var(--r);
overflow: hidden;
}
.step-detail-art .sd-aspects .ad::after{
content: attr(data-ratio);
position: absolute; left: 8px; bottom: 8px;
font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
color: var(--lime);
padding: 3px 7px; border-radius: 4px;
background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
}
.step-detail-art .sd-aspects .ad-1{ --r: 9/16 }
.step-detail-art .sd-aspects .ad-2{ --r: 1/1 }
.step-detail-art .sd-aspects .ad-3{ --r: 16/9 }
/* ═══════════════════════════════════════════════════════════════
INTERACTIVE STEP-DETAIL VISUALS (workflow page)
═══════════════════════════════════════════════════════════════ */
/* Step 02: Soul ID — same character, different scenes ─────────── */
.step-detail-art.soul-id{
aspect-ratio: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 0;
padding: 0 !important;
min-height: 520px;
height: auto !important;
background: transparent !important;
border: 0 !important;
overflow: visible !important;
}
.soul-stage{
position: relative;
flex: 1 1 auto;
min-height: 420px;
overflow: hidden;
border-radius: var(--r-lg) var(--r-lg) 0 0;
border: 1px solid var(--line-2);
border-bottom: 0;
background: #050507;
}
.soul-shot{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .9s var(--ease);
filter: saturate(1.05) brightness(.92);
}
.soul-shot.active{
opacity: 1;
animation: soulZoom 12s ease-in-out infinite alternate;
}
@keyframes soulZoom{
from{ transform: scale(1.04) }
to{ transform: scale(1.12) }
}
.soul-stage::after{
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 30%, transparent 60%, rgba(0,0,0,.65) 100%),
radial-gradient(140% 90% at 50% 50%, transparent 50%, rgba(0,0,0,.3) 100%);
}
.soul-lock{
position: absolute;
left: 18px; top: 18px; z-index: 3;
display: flex; align-items: center; gap: 12px;
padding: 10px 16px 10px 10px;
border-radius: 999px;
background: rgba(15,15,18,.72); backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(204,255,0,.3);
}
.soul-face{
position: relative;
width: 36px; height: 36px;
border-radius: 50%;
overflow: hidden;
}
.soul-face img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.soul-face .soul-ring{
position: absolute; inset: -3px;
border: 1.5px solid var(--lime);
border-radius: 50%;
animation: soulPulse 2s ease-out infinite;
}
@keyframes soulPulse{
0%{ box-shadow: 0 0 0 0 rgba(204,255,0,.5) }
70%{ box-shadow: 0 0 0 8px rgba(204,255,0,0) }
100%{ box-shadow: 0 0 0 0 rgba(204,255,0,0) }
}
.soul-meta{
display: flex; flex-direction: column; gap: 2px;
}
.soul-name{
font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--lime);
}
.soul-id{
font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
color: var(--ink-1);
}
.soul-scene-label{
position: absolute;
right: 18px; bottom: 18px; z-index: 3;
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.ssl-eyebrow{
font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink-3);
}
.ssl-name{
font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
color: #fff;
padding: 6px 12px; border-radius: 8px;
background: rgba(15,15,18,.78); backdrop-filter: blur(10px);
border: 1px solid var(--line-2);
transition: opacity .3s var(--ease);
}
.soul-controls{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line-1);
border: 1px solid var(--line-2);
border-top: 0;
border-radius: 0 0 var(--r-lg) var(--r-lg);
overflow: hidden;
}
@media (max-width: 540px){
.soul-controls{ grid-template-columns: 1fr 1fr }
}
.soul-chip{
display: flex; align-items: center; gap: 8px;
padding: 14px 14px;
background: var(--bg-2);
border: 0;
font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
color: var(--ink-2);
cursor: none;
transition: background .3s var(--ease), color .3s var(--ease);
}
@media (max-width: 760px){ .soul-chip{ cursor: pointer } }
.soul-chip:hover{ background: var(--bg-3); color: var(--ink-1) }
.soul-chip.active{
background: var(--lime); color: #000;
}
.soul-chip.active .sc-num{ color: rgba(0,0,0,.55) }
.sc-num{
font-size: 10px; letter-spacing: .14em;
color: var(--lime);
font-weight: 600;
}
/* Step 03: Ship — interactive export tool ────────────────────── */
.step-detail-art.ship{
aspect-ratio: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 0;
padding: 0 !important;
min-height: 540px;
height: auto !important;
background: var(--bg-2) !important;
border: 1px solid var(--line-2) !important;
overflow: visible !important;
}
.ship-stage{
position: relative;
flex: 1 1 auto;
min-height: 320px;
display: grid; place-items: center;
background:
radial-gradient(600px 400px at 50% 30%, rgba(204,255,0,.04), transparent 60%),
linear-gradient(180deg, var(--bg-3), #050507);
padding: 30px 30px 50px;
overflow: hidden;
border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.ship-stage::before{
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 20px 20px;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
pointer-events: none;
}
.ship-canvas{
position: relative;
width: 240px;
aspect-ratio: 1/1;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(204,255,0,.4);
box-shadow:
0 30px 60px -15px rgba(0,0,0,.6),
0 0 60px -10px rgba(204,255,0,.2);
transition: width .6s var(--ease-out), aspect-ratio .6s var(--ease-out);
}
.ship-canvas[data-current="reels"], .ship-canvas[data-current="story"]{
width: 180px; aspect-ratio: 9/16;
}
.ship-canvas[data-current="square"]{
width: 240px; aspect-ratio: 1/1;
}
.ship-canvas[data-current="youtube"]{
width: 360px; aspect-ratio: 16/9;
}
.ship-img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(1.05) brightness(.95);
}
.ship-frame{
position: absolute; inset: 0;
pointer-events: none;
}
.ship-corner{
position: absolute;
width: 14px; height: 14px;
border-color: var(--lime);
border-style: solid;
border-width: 0;
}
.ship-corner.tl{ top: 8px; left: 8px; border-top-width: 1.5px; border-left-width: 1.5px }
.ship-corner.tr{ top: 8px; right: 8px; border-top-width: 1.5px; border-right-width: 1.5px }
.ship-corner.bl{ bottom: 8px; left: 8px; border-bottom-width: 1.5px; border-left-width: 1.5px }
.ship-corner.br{ bottom: 8px; right: 8px; border-bottom-width: 1.5px; border-right-width: 1.5px }
.ship-tag{
position: absolute; left: 50%; bottom: -38px; transform: translateX(-50%);
display: flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 999px;
background: rgba(15,15,18,.85); backdrop-filter: blur(10px);
border: 1px solid var(--line-2);
white-space: nowrap;
}
.ship-ratio{
font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
color: var(--lime); font-weight: 600;
}
.ship-platform{
font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
color: var(--ink-1);
}
.ship-progress{
position: absolute; left: 0; right: 0; bottom: 0;
height: 3px;
background: rgba(204,255,0,.15);
overflow: hidden;
}
.ship-progress .sp-fill{
position: absolute; left: 0; top: 0; bottom: 0;
width: 0;
background: var(--lime);
box-shadow: 0 0 12px var(--lime);
transition: width 1.4s linear;
}
.ship-progress.run .sp-fill{ width: 100% }
.ship-platforms{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line-1);
border-block: 1px solid var(--line-2);
margin-top: 50px;
}
.ship-btn{
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 18px 10px;
background: var(--bg-2);
border: 0;
cursor: none;
transition: background .25s var(--ease);
color: var(--ink-2);
}
@media (max-width: 760px){ .ship-btn{ cursor: pointer } }
.ship-btn:hover{ background: var(--bg-3); color: var(--ink-1) }
.ship-btn.active{
background: rgba(204,255,0,.06);
color: var(--lime);
}
.ship-btn.active .sb-icon{ border-color: var(--lime); background: rgba(204,255,0,.1) }
.sb-icon{
width: 38px; height: 38px;
border-radius: 10px;
border: 1px solid var(--line-2);
display: grid; place-items: center;
transition: border-color .25s var(--ease), background .25s var(--ease);
}
.sb-icon svg{ width: 18px; height: 18px }
.sb-label{
font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sb-r{ font-size: 9px; opacity: .6; letter-spacing: .12em }
.ship-actions{
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 18px 20px;
background: var(--bg-2);
border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.ship-export{
position: relative;
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 22px; border-radius: 999px;
background: var(--lime); color: #000;
border: 0;
font-family: var(--sans); font-weight: 600; font-size: 13.5px;
letter-spacing: -.005em;
cursor: none;
overflow: hidden;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (max-width: 760px){ .ship-export{ cursor: pointer } }
.ship-export:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(204,255,0,.35) }
.ship-export .se-icon{ width: 14px; height: 14px }
.ship-export .se-check{
width: 16px; height: 16px;
position: absolute; right: 22px;
opacity: 0; transform: scale(.5);
transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.ship-export .se-progress{
position: absolute;
left: 0; bottom: 0; height: 2px;
width: 0;
background: rgba(0,0,0,.4);
transition: width 1.2s linear;
}
.ship-export.exporting .se-progress{ width: 100% }
.ship-export.done .se-icon{ opacity: 0; transform: scale(.5) }
.ship-export.done .se-check{ opacity: 1; transform: scale(1) }
.ship-export.done .se-text::after{ content: "ed" }
.ship-hint{
font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-3);
display: flex; align-items: center; gap: 6px;
animation: shipHintBob 2s ease-in-out infinite;
}
@keyframes shipHintBob{
0%, 100%{ transform: translateY(0); opacity: .85 }
50%{ transform: translateY(-3px); opacity: 1 }
}
.step-detail-art.ship.touched .ship-hint{ display: none }
/* ═══════════════════════════════════════════════════════════════
INTERACTIVE FEATURES BENTO — clickable cards
═══════════════════════════════════════════════════════════════ */
/* Multi-Shot: clicking a variant changes the selected one */
.fx-multi .ms-card{
cursor: none;
transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
@media (max-width: 760px){ .fx-multi .ms-card{ cursor: pointer } }
.fx-multi .ms-card:hover{ transform: scale(1.02) }
.fx-multi .ms-card .label{ pointer-events: none }
.fx-multi .ms-card .label.with-check::after{ content: " ✓"; }
/* Storyboard: clicking a frame "scrubs" to it */
.fx-board .sb-frame{
cursor: none;
transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
@media (max-width: 760px){ .fx-board .sb-frame{ cursor: pointer } }
.fx-board .sb-frame.active{
border-color: var(--lime);
box-shadow: 0 0 0 2px rgba(204,255,0,.25);
}
.fx-board .sb-frame.active .num{
background: var(--lime); color: #000;
}
/* Click-to-Ad: clicking a ratio promotes it to "primary" */
.fx-ad-export .ad-card{
cursor: none;
transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .3s var(--ease);
}
@media (max-width: 760px){ .fx-ad-export .ad-card{ cursor: pointer } }
.fx-ad-export .ad-card:hover{ transform: translateY(-3px) }
.fx-ad-export .ad-card.primary{
border-color: var(--lime);
box-shadow: 0 0 0 2px rgba(204,255,0,.25), 0 12px 30px -10px rgba(204,255,0,.2);
}
.fx-ad-export .ad-card.primary .ratio-tag{
background: var(--lime); color: #000;
}
/* ═══════════════════════════════════════════════════════════════
INTERACTIVE PRIVACY DIAGRAM
═══════════════════════════════════════════════════════════════ */
.privacy-art{ aspect-ratio: 1/1.1 !important }
.dev-step{
cursor: none;
transition: border-color .4s var(--ease), background .4s var(--ease);
}
@media (max-width: 760px){ .dev-step{ cursor: pointer } }
.dev-trigger-row{
display: flex; gap: 8px;
padding: 16px 22px 0;
flex-wrap: wrap;
}
.dev-trigger{
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 999px;
background: var(--bg-2); border: 1px solid var(--line-2);
font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
color: var(--ink-2);
cursor: none;
transition: all .3s var(--ease);
}
@media (max-width: 760px){ .dev-trigger{ cursor: pointer } }
.dev-trigger:hover{ border-color: var(--line-3); color: var(--ink-1) }
.dev-trigger.lime{
background: var(--lime); color: #000; border-color: var(--lime);
}
.dev-trigger.lime:hover{ box-shadow: 0 6px 20px rgba(204,255,0,.3); transform: translateY(-1px) }
.dev-trigger .dt-key{ font-size: 9px; opacity: .6; letter-spacing: .14em }
/* Packet animation */
@keyframes packetTravel{
0%{ top: 0%; opacity: 0 }
10%{ opacity: 1 }
90%{ opacity: 1 }
100%{ top: 100%; opacity: 0 }
}
.dev-pipe.firing::before{
content: "";
position: absolute; left: -3px; right: -3px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 10px var(--lime);
animation: packetTravel 1.2s ease-in-out;
}
.dev-step.firing{
border-color: var(--lime);
background: linear-gradient(135deg, rgba(204,255,0,.18), rgba(204,255,0,.04));
}
.dev-step.firing .dev-step-icon{
background: var(--lime); color: #000;
}
/* When user clicks "try cloud", show the X bigger and pulse the block */
.dev-cloud-block.alarming .block-x{
animation: cloudShake .5s ease-in-out 3;
}
.dev-cloud-block.alarming .block-cloud{
border-color: rgba(255,80,100,.5);
color: #ff5566;
}
@keyframes cloudShake{
0%, 100%{ transform: rotate(0) }
25%{ transform: rotate(-8deg) }
75%{ transform: rotate(8deg) }
}
/* ═══════════════════════════════════════════════════════════════
SHOWCASE TILE LIGHTBOX (inline detail panel)
═══════════════════════════════════════════════════════════════ */
.lightbox{
position: fixed; inset: 0; z-index: 1000;
display: grid; place-items: center;
background: rgba(0,0,0,.85); backdrop-filter: blur(20px);
opacity: 0; pointer-events: none;
transition: opacity .4s var(--ease);
padding: var(--pad);
}
.lightbox.open{ opacity: 1; pointer-events: auto }
.lightbox-card{
width: min(900px, 100%);
max-height: 90vh;
display: grid;
grid-template-columns: 1.4fr 1fr;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: var(--r-xl);
overflow: hidden;
transform: scale(.96);
transition: transform .5s var(--ease-out);
}
.lightbox.open .lightbox-card{ transform: scale(1) }
@media (max-width: 760px){
.lightbox-card{ grid-template-columns: 1fr; max-height: 85vh; overflow-y: auto }
}
.lightbox-img{
position: relative; min-height: 320px;
background: #050507;
overflow: hidden;
}
.lightbox-img img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.lightbox-info{
padding: 36px 32px;
display: flex; flex-direction: column; gap: 20px;
overflow-y: auto;
}
.lightbox-eyebrow{
font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--lime);
}
.lightbox-info h3{
font-family: var(--display); font-weight: 600;
font-size: 28px; letter-spacing: -.025em;
margin: 0; line-height: 1.1;
}
.lightbox-meta{
display: grid; gap: 10px;
}
.lightbox-meta dt{
font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-3);
margin-bottom: 2px;
}
.lightbox-meta dd{
font-family: var(--mono); font-size: 12.5px; color: var(--ink-1);
margin: 0 0 12px;
line-height: 1.5;
}
.lightbox-meta dd.prompt{
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--line-2);
border-radius: 8px;
color: var(--ink-2);
}
.lightbox-actions{
display: flex; gap: 10px; flex-wrap: wrap;
margin-top: auto;
}
.lightbox-actions .btn{ padding: 12px 20px; font-size: 13px }
.lightbox-close{
position: absolute; right: 16px; top: 16px;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(0,0,0,.5); backdrop-filter: blur(10px);
border: 1px solid var(--line-2);
display: grid; place-items: center;
cursor: none;
z-index: 2;
color: var(--ink-1);
transition: background .3s var(--ease), border-color .3s var(--ease);
}
@media (max-width: 760px){ .lightbox-close{ cursor: pointer } }
.lightbox-close:hover{ background: rgba(204,255,0,.15); border-color: var(--lime); color: var(--lime) }
.lightbox-close svg{ width: 16px; height: 16px }
/* Showcase tiles get hover affordance hint */
.tile{ cursor: none }
@media (max-width: 760px){ .tile{ cursor: pointer } }
/* ═══════════════════════════════════════════════════════════════
MANIFESTO — expandable tenets
═══════════════════════════════════════════════════════════════ */
.tenet{
cursor: none;
transition: background .3s var(--ease);
padding: 30px 0 !important;
}
@media (max-width: 760px){ .tenet{ cursor: pointer } }
.tenet:hover{ background: rgba(204,255,0,.015) }
.tenet .extra{
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .5s var(--ease), opacity .35s var(--ease), margin-top .4s var(--ease);
}
.tenet.open .extra{
max-height: 300px;
opacity: 1;
margin-top: 16px;
}
.tenet .extra p{
color: var(--ink-2);
font-size: 14.5px; line-height: 1.6;
font-weight: 400;
border-left: 1px solid var(--lime);
padding-left: 18px;
margin: 0;
}
.tenet .toggle-hint{
display: inline-flex; align-items: center; gap: 6px;
margin-top: 12px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-4);
transition: color .3s var(--ease);
}
.tenet:hover .toggle-hint{ color: var(--lime) }
.tenet .toggle-hint .arrow{
display: inline-block;
transition: transform .3s var(--ease);
}
.tenet.open .toggle-hint .arrow{ transform: rotate(180deg) }
.tenet.open .toggle-hint .lbl::after{ content: "less" }
.tenet:not(.open) .toggle-hint .lbl::after{ content: "more" }
.tenet .toggle-hint .lbl::before{ content: "Read " }
/* ═══════════════════════════════════════════════════════════════
CAREERS — expandable role rows
═══════════════════════════════════════════════════════════════ */
.role{ cursor: none }
@media (max-width: 760px){ .role{ cursor: pointer } }
.role-detail{
grid-column: 1/-1;
max-height: 0; overflow: hidden;
opacity: 0;
transition: max-height .5s var(--ease), opacity .3s var(--ease), margin-top .4s var(--ease);
}
.role.open .role-detail{
max-height: 240px; opacity: 1; margin-top: 18px;
}
.role-detail-inner{
padding-top: 18px;
border-top: 1px solid var(--line-1);
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 30px;
}
@media (max-width: 760px){ .role-detail-inner{ grid-template-columns: 1fr } }
.role-detail h5{
font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--lime);
margin: 0 0 8px;
}
.role-detail p{
font-size: 14px; line-height: 1.55; color: var(--ink-2);
margin: 0; font-weight: 400;
}
.role-detail ul{
margin: 0; padding: 0; list-style: none;
display: grid; gap: 6px;
}
.role-detail li{
font-family: var(--mono); font-size: 12px; color: var(--ink-2);
padding-left: 16px; position: relative; line-height: 1.5;
}
.role-detail li::before{
content: "→"; position: absolute; left: 0; color: var(--lime);
}
/* ═══════════════════════════════════════════════════════════════
CONTACT — character counter, validation states
═══════════════════════════════════════════════════════════════ */
.form .char-counter{
font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-4);
text-align: right;
margin-top: 4px;
}
.form .char-counter.warn{ color: #ffb347 }
.form .char-counter.full{ color: var(--lime) }
.form input.invalid, .form textarea.invalid, .form select.invalid{
border-color: rgba(255,80,100,.4);
}
/* ═══════════════════════════════════════════════════════════════
HERO PREVIEW — clickable mode chips
═══════════════════════════════════════════════════════════════ */
.hp-chip{ cursor: none; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease) }
@media (max-width: 760px){ .hp-chip{ cursor: pointer } }
.hp-chip:not(.active):hover{ background: var(--bg-4); border-color: var(--line-3) }