diff --git a/sites/shkor-com/README.md b/sites/shkor-com/README.md index a8c9eb9..3055a89 100644 --- a/sites/shkor-com/README.md +++ b/sites/shkor-com/README.md @@ -6,5 +6,6 @@ Static page (`index.html`, `styles.css`, `assets/`) + email capture `subscribe.p - Video `assets/simbiot-harness-enterprise-en.mp4` is copied from `out/` at deploy (not committed here) - Emails: `systemd shkor-subscribe` on 127.0.0.1:8097 → `/var/lib/shkor-subscribe/subs.db` export: `sqlite3 /var/lib/shkor-subscribe/subs.db "select email,source,created_at from subs"` -- Update: `cp -r index.html styles.css assets /var/www/shkor-com/` +- v2 (labs + autopilot concept): `v2/` → https://new.shkor.com/v2/ ; design direction from ui-ux-pro-max (Dark OLED + Bento + HUD, Space Grotesk) +- Update: `cp -r index.html styles.css assets /var/www/shkor-com/` (v2: `cp -r v2/* /var/www/shkor-com/v2/`) - Apex shkor.com still points at 204.168.138.138 (old site) — switch A record after review. diff --git a/sites/shkor-com/v2/assets/film-poster.jpg b/sites/shkor-com/v2/assets/film-poster.jpg new file mode 100644 index 0000000..5f053f6 Binary files /dev/null and b/sites/shkor-com/v2/assets/film-poster.jpg differ diff --git a/sites/shkor-com/v2/assets/inter-400-latin.woff2 b/sites/shkor-com/v2/assets/inter-400-latin.woff2 new file mode 100644 index 0000000..f15b025 Binary files /dev/null and b/sites/shkor-com/v2/assets/inter-400-latin.woff2 differ diff --git a/sites/shkor-com/v2/assets/inter-600-latin.woff2 b/sites/shkor-com/v2/assets/inter-600-latin.woff2 new file mode 100644 index 0000000..d189794 Binary files /dev/null and b/sites/shkor-com/v2/assets/inter-600-latin.woff2 differ diff --git a/sites/shkor-com/v2/assets/jetbrains-mono-400-latin.woff2 b/sites/shkor-com/v2/assets/jetbrains-mono-400-latin.woff2 new file mode 100644 index 0000000..5858873 Binary files /dev/null and b/sites/shkor-com/v2/assets/jetbrains-mono-400-latin.woff2 differ diff --git a/sites/shkor-com/v2/assets/space-grotesk-latin.woff2 b/sites/shkor-com/v2/assets/space-grotesk-latin.woff2 new file mode 100644 index 0000000..0f3474e Binary files /dev/null and b/sites/shkor-com/v2/assets/space-grotesk-latin.woff2 differ diff --git a/sites/shkor-com/v2/index.html b/sites/shkor-com/v2/index.html new file mode 100644 index 0000000..813a2fe --- /dev/null +++ b/sites/shkor-com/v2/index.html @@ -0,0 +1,350 @@ + + + + + +Shkor Labs — Autopilots for business, built in our own labs + + + + + + + + + + + + + + + + + +
+ + +
+ +
+
+

Shkor Labs · R&D for autonomous business

+

Autopilot
for any business.

+

We mirror a company into a living twin, rehearse decisions on it, and hand the routine to an AI agent that runs on a rhythm — every second, minute, hour and day. Everything we ship is proven first in our own labs: real businesses, real money, real people.

+ +
+ + + + + +

+
+

What we learn running AI-operated businesses. Rare, honest, one-click unsubscribe.

+
+ + +
+
1 sec · reflex
+
1 min · triage
+
1 hour · execute
+
1 day · plan
+
AutopilotSimbiot core
+ + + +
+
+ +
+
+ SimbiotReelsUpAvatarMainbeamMalyarKaVybiraiGroupSignWalletChainDEIPDomostroyLAIve SportsProbityTotemYorio + +
+
+
+ + +
+
+
+

01 — Method

+

Mirror. Rehearse. Autopilot.

+

A digital twin isn't a dashboard someone draws once. It's the company's own history, captured as it happens — and that's exactly what our agents run on.

+
+ +
    +
  1. + 01 + +

    Mirror

    +

    Messages, tasks, calls, payments and decisions become signed events in one append-only log. Replay it and you get the company — its structure, its people, its habits — as a living model.

    +
  2. +
  3. + 02 + +

    Rehearse

    +

    Before a change touches a customer, it's tried against the twin and the real history behind it. Where the agent isn't sure, it doesn't guess — it escalates to a person with full context.

    +
  4. +
  5. + 03 + +

    Autopilot

    +

    The routine goes to an agent that lives by ticks: triage, execution, digests, plans — on schedule, with real tools. Every action it takes feeds back into the twin, so it gets sharper with time.

    +
  6. +
+
+
+ + +
+
+
+

02 — The autopilot

+

Not a chatbot. A heartbeat.

+
+ +
+
+

Four rhythms, one agent

+

Each level sees deeper and acts bigger. Busy levels skip a beat instead of piling up; only digests travel upward.

+
    +
  • 1sReflexestelemetry, alerts — no LLM
  • +
  • 1mTriageinbox, quick fixes, routing
  • +
  • 1hExecutiontasks end-to-end + hourly digest
  • +
  • 1dPlanninglarger work + daily manifest
  • +
+
+ +
+ +

Signed, every step

+

ed25519 signatures, hash-chained. One command checks that nothing was altered.

+
$ simbiot verify
+✓ chain intact
+
+ +
+ +

Knows its limits

+

What it can't decide safely goes up the ladder — to a human — with the full story attached.

+
+ +
+

LLM only where it matters

+

Reflexes and skipped beats cost nothing. Models are used for judgment, with a hard cap on steps per cycle.

+
+ +
+

Real tools, not suggestions

+
shellfilesknowledge searchmailcallspaymentsMCPREST
+
+
+
+
+ + +
+ +
+ + +
+
+
+

04 — In 86 seconds

+

The autopilot, for business.

+
+
+ +
+
+
+ + +
+
+
+

05 — Work with us

+

Two ways in.

+
+
+
+

For companies

+

Put your business on autopilot

+

Your own Simbiot — the same system our labs run in production, not a cut-down demo. Deployment and onboarding within the month you join; LLM access through the cooperative's router included.

+

$100/month

+

One price for everyone. 10 presale seats.

+ Reserve a seat +
+
+

For founders

+

Start a lab

+

Bring a business idea or an existing one. You get the autopilot, shared infrastructure, a site, payments and a community of founders running the same playbook. The lab shares a part of its revenue with the cooperative — that's the whole deal.

+ Join Cooperative 42 +
+
+
+
+ + +
+ +
+

Lab notes

+

Watch AI-run businesses
from the inside.

+

Real digests, real failures, real numbers from the labs — and first access when new seats open.

+
+ + + + + +

+
+

We keep your email only to send lab notes. No sharing, no selling.

+
+
+ +
+ + + + + + diff --git a/sites/shkor-com/v2/styles.css b/sites/shkor-com/v2/styles.css new file mode 100644 index 0000000..73e65d0 --- /dev/null +++ b/sites/shkor-com/v2/styles.css @@ -0,0 +1,266 @@ +/* Shkor Labs v2 — Dark OLED + Bento + restrained HUD (design direction via ui-ux-pro-max) */ +@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url(assets/space-grotesk-latin.woff2) format("woff2"); } +@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(assets/inter-400-latin.woff2) format("woff2"); } +@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(assets/inter-600-latin.woff2) format("woff2"); } +@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(assets/jetbrains-mono-400-latin.woff2) format("woff2"); } + +:root { + --bg: #050506; + --bg-1: #0b0c0f; + --bg-2: #111318; + --line: rgba(255,255,255,.08); + --line-2: rgba(255,255,255,.14); + --fg: #f2f3f5; + --fg-2: #b4b8c2; + --fg-3: #80869a; + --acid: #c6ff4d; /* signal / primary accent */ + --acid-dim: rgba(198,255,77,.12); + --cyan: #5ce1e6; /* HUD secondary */ + --r: 20px; + --ease: cubic-bezier(.2,.7,.2,1); + --display: "Space Grotesk", system-ui, sans-serif; + --body: "Inter", system-ui, -apple-system, sans-serif; + --mono: "JetBrains Mono", ui-monospace, monospace; +} + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +html { scroll-behavior: smooth; scroll-padding-top: 80px; } +body { background: var(--bg); color: var(--fg-2); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } +body::after { /* film grain */ + content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); +} +a { color: inherit; } +::selection { background: var(--acid); color: #000; } +:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; border-radius: 8px; } +.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } +.hp { position: absolute; left: -9999px; } +.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--acid); color: #000; padding: 10px 14px; border-radius: 8px; font-weight: 600; } +.skip:focus { top: 12px; } + +.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } + +h1, h2, h3 { color: var(--fg); font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; } +h1 { font-size: clamp(48px, 8.4vw, 112px); } +h1 em { font-style: normal; color: var(--acid); position: relative; } +h2 { font-size: clamp(34px, 5vw, 64px); max-width: 16ch; text-wrap: balance; } +h3 { font-size: 22px; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 10px; } +.hl { color: var(--acid); } +.lead { font-size: clamp(17px, 1.5vw, 20px); max-width: 58ch; margin-top: 24px; color: var(--fg-2); text-wrap: pretty; } +.kicker, .tag, .lab-tag, .path-k { font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acid); } +.kicker { margin-bottom: 20px; } +.fine, .muted { font-size: 14px; color: var(--fg-3); } +.fine { margin-top: 14px; } +code { font-family: var(--mono); } + +/* ---------- nav ---------- */ +.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s var(--ease), border-color .3s; border-bottom: 1px solid transparent; } +.nav-in { display: flex; align-items: center; justify-content: space-between; height: 72px; } +.nav { background: rgba(5,5,6,.6); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); } +.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); font: 500 19px var(--display); letter-spacing: -.02em; } +.brand b { font-weight: 700; color: var(--acid); margin-left: 2px; } +.brand svg { width: 28px; height: 28px; color: var(--acid); animation: spin 18s linear infinite; } +.nav nav { display: flex; align-items: center; gap: 30px; font-size: 15px; } +.nav nav a:not(.btn) { text-decoration: none; color: var(--fg-3); transition: color .2s; } +.nav nav a:not(.btn):hover { color: var(--fg); } + +/* ---------- buttons ---------- */ +.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer; + background: var(--acid); color: #0a0d02; font: 600 16px var(--body); text-decoration: none; white-space: nowrap; + transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; } +.btn svg { width: 18px; height: 18px; transition: transform .2s var(--ease); } +.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(198,255,77,.28); } +.btn:hover svg { transform: translateX(3px); } +.btn:active { transform: translateY(0); } +.btn:disabled { opacity: .6; cursor: progress; } +.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; } +.btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); } +.btn-ghost:hover { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--acid); } + +/* ---------- form ---------- */ +.sub { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; max-width: 540px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s; } +.sub:focus-within { box-shadow: inset 0 0 0 1px var(--acid), 0 0 0 6px var(--acid-dim); } +.sub input[type=email] { flex: 1 1 200px; min-width: 0; background: transparent; border: 0; color: var(--fg); font: 16px var(--body); padding: 0 18px; min-height: 52px; } +.sub input[type=email]:focus { outline: none; } +.sub input[type=email]::placeholder { color: #6a7083; } +.sub-msg { position: absolute; margin-top: 70px; font-size: 15px; } +.sub { position: relative; } +.sub-msg.ok { color: var(--acid); } +.sub-msg.err { color: #ff8f7f; } + +/* ---------- hero ---------- */ +.hero { position: relative; min-height: 100svh; padding: 140px 0 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; + background: radial-gradient(800px 600px at 78% 40%, rgba(198,255,77,.08), transparent 65%), radial-gradient(700px 500px at 10% 0%, rgba(92,225,230,.06), transparent 60%); } +.grid-bg { position: absolute; inset: 0; pointer-events: none; + background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); + background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); } +.hero-in { position: relative; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } +@media (min-width: 1000px) { .hero-in { grid-template-columns: 1.1fr .9fr; } } +.tag { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); margin-bottom: 28px; } +.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 0 rgba(198,255,77,.6); animation: ping 2s var(--ease) infinite; } + +/* orbit */ +.orbit { position: relative; aspect-ratio: 1; width: min(100%, 520px); margin: 0 auto; } +.ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255,255,255,.12); animation: spin linear infinite; } +.ring i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 16px 2px rgba(198,255,77,.7); } +.ring span { position: absolute; top: -10px; left: 50%; transform: translate(14px, -50%); font: 11px var(--mono); letter-spacing: .08em; color: var(--fg-3); white-space: nowrap; } +.r1 { inset: 34%; animation-duration: 6s; border-color: rgba(198,255,77,.35); } +.r2 { inset: 24%; animation-duration: 16s; animation-direction: reverse; } +.r3 { inset: 13%; animation-duration: 34s; } +.r3 i { background: var(--cyan); box-shadow: 0 0 16px 2px rgba(92,225,230,.7); } +.r4 { inset: 2%; animation-duration: 70s; animation-direction: reverse; border-style: solid; border-color: rgba(255,255,255,.06); } +.r4 i { background: var(--fg); box-shadow: 0 0 14px rgba(255,255,255,.6); } +.core { position: absolute; inset: 41%; border-radius: 50%; display: grid; place-content: center; text-align: center; + background: radial-gradient(circle at 35% 30%, #e6ff9e, var(--acid) 45%, #6f9a12); color: #0a0d02; box-shadow: 0 0 80px rgba(198,255,77,.35), inset 0 -6px 20px rgba(0,0,0,.25); + animation: beat 2s var(--ease) infinite; } +.core b { font: 700 clamp(12px, 1.4vw, 15px)/1 var(--display); letter-spacing: -.01em; } +.core small { font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: 4px; } +.hud { position: absolute; width: 22px; height: 22px; border-color: rgba(198,255,77,.5); border-style: solid; border-width: 0; } +.c-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; } +.c-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; } +.c-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; } +.c-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; } +.log { position: absolute; right: -8px; bottom: -6px; width: min(300px, 70%); padding: 14px 16px; border-radius: 14px; background: rgba(11,12,15,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 60px rgba(0,0,0,.5); } +.log-h { display: block; font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; } +.log ol { list-style: none; display: grid; gap: 6px; font: 12px/1.3 var(--mono); } +.log li { display: grid; grid-template-columns: 26px 70px 1fr; gap: 6px; color: var(--fg-3); animation: slide .4s var(--ease); } +.log li:first-child { color: var(--fg); } +.log li code { color: var(--acid); } +.log li b { font-weight: 400; color: var(--cyan); overflow: hidden; text-overflow: ellipsis; } +.log li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + +/* marquee */ +.marquee { position: relative; margin-top: 80px; border-block: 1px solid var(--line); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } +.track { display: flex; width: max-content; animation: marquee 50s linear infinite; } +.track span { font: 500 22px var(--display); color: var(--fg-3); padding: 22px 28px; white-space: nowrap; letter-spacing: -.01em; } +.track span::after { content: "✳"; color: var(--acid); margin-left: 56px; font-size: 14px; vertical-align: middle; } + +/* ---------- sections ---------- */ +.sec { padding: 140px 0; position: relative; } +.sec-alt { background: var(--bg-1); border-block: 1px solid var(--line); } +.sec-h { margin-bottom: 64px; } + +/* steps */ +.steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 1px var(--line); } +@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } } +.step { position: relative; background: var(--bg); padding: 40px 32px 44px; transition: background .3s var(--ease); } +.step:hover { background: var(--bg-1); } +.step .num { position: absolute; top: 28px; right: 28px; font: 700 64px/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.12); letter-spacing: -.04em; } +.step:hover .num { -webkit-text-stroke-color: var(--acid); } +.ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--acid); background: var(--acid-dim); margin-bottom: 28px; } +.step h3 { font-size: 30px; } +.step p { color: var(--fg-3); font-size: 16px; } + +/* bento */ +.bento { display: grid; gap: 16px; grid-template-columns: 1fr; } +@media (min-width: 900px) { + .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); } + .t-ladder { grid-column: span 4; grid-row: span 2; } + .t-sign { grid-column: span 2; grid-row: span 2; } + .t-esc { grid-column: span 2; } + .t-cost { grid-column: span 2; } + .t-tools { grid-column: span 2; } +} +.tile { position: relative; padding: 32px; border-radius: var(--r); background: linear-gradient(180deg, var(--bg-2), var(--bg)); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); } +.tile:hover { box-shadow: inset 0 0 0 1px rgba(198,255,77,.35); transform: translateY(-3px); } +.tile p { color: var(--fg-3); font-size: 16px; } +.tile .ico { margin-bottom: 20px; } +.t-ladder { background: radial-gradient(600px 300px at 100% 0%, rgba(198,255,77,.08), transparent 70%), linear-gradient(180deg, var(--bg-2), var(--bg)); } +.t-ladder h3 { font-size: 32px; } +.ladder { list-style: none; margin-top: 32px; display: grid; gap: 10px; } +.ladder li { display: grid; grid-template-columns: 56px 130px 1fr; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--line); } +.ladder code { font-size: 14px; color: #0a0d02; background: var(--acid); border-radius: 8px; text-align: center; padding: 4px 0; } +.ladder li:nth-child(2) code { opacity: .85; } .ladder li:nth-child(3) code { opacity: .7; } .ladder li:nth-child(4) code { opacity: .55; } +.ladder b { color: var(--fg); font: 600 16px var(--body); } +.ladder span { color: var(--fg-3); font-size: 15px; } +@media (max-width: 560px) { .ladder li { grid-template-columns: 48px 1fr; } .ladder span { grid-column: 2; } } +.term { margin-top: 28px; padding: 18px 20px; border-radius: 12px; background: #000; box-shadow: inset 0 0 0 1px var(--line); font: 14px/1.7 var(--mono); color: var(--fg); white-space: pre; overflow-x: auto; } +.term .p { color: var(--fg-3); } .term .ok { color: var(--acid); } +.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } +.chips span { font: 13px var(--mono); padding: 7px 12px; border-radius: 999px; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); } + +/* labs */ +.labs { display: grid; gap: 16px; grid-template-columns: 1fr; } +@media (min-width: 700px) { .labs { grid-template-columns: repeat(2, 1fr); } } +@media (min-width: 1000px) { .labs { grid-template-columns: repeat(4, 1fr); } .lab-xl { grid-column: span 2; grid-row: span 2; } .lab-more { grid-column: span 2; } } +.lab { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--r); text-decoration: none; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease), transform .3s var(--ease), background .3s; min-height: 220px; } +a.lab { cursor: pointer; } +a.lab:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(198,255,77,.45), 0 24px 60px rgba(0,0,0,.4); background: var(--bg-2); } +.lab-tag { margin-bottom: auto; padding-bottom: 32px; color: var(--fg-3); } +a.lab:hover .lab-tag { color: var(--acid); } +.lab h3 { font-size: 24px; } +.lab p { color: var(--fg-3); font-size: 15px; } +.lab-xl { padding: 40px; background: radial-gradient(500px 400px at 0% 100%, rgba(198,255,77,.14), transparent 70%), var(--bg-1); } +.lab-xl h3 { font-size: clamp(40px, 5vw, 64px); } +.lab-xl p { font-size: 17px; max-width: 42ch; color: var(--fg-2); } +.lab-go { position: absolute; top: 36px; right: 36px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #0a0d02; background: var(--acid); transition: transform .3s var(--ease); } +.lab-xl:hover .lab-go { transform: rotate(-45deg); } +.lab-more { background: transparent; box-shadow: inset 0 0 0 1px var(--line); border: 0; } +.lab-more .big { font: 700 36px var(--display); color: var(--fg); margin-bottom: auto; padding-bottom: 24px; letter-spacing: -.03em; } + +/* film */ +.film { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 1px var(--line-2), 0 40px 120px rgba(198,255,77,.08); } +.film video { width: 100%; height: 100%; display: block; } + +/* paths */ +.paths { display: grid; gap: 16px; grid-template-columns: 1fr; } +@media (min-width: 900px) { .paths { grid-template-columns: 1fr 1fr; } } +.path { display: flex; flex-direction: column; align-items: flex-start; padding: 44px; border-radius: var(--r); background: linear-gradient(180deg, rgba(198,255,77,.07), transparent 60%), var(--bg-1); box-shadow: inset 0 0 0 1px rgba(198,255,77,.25); } +.path-alt { background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); } +.path-k { margin-bottom: 20px; } +.path h3 { font-size: 34px; margin-bottom: 16px; } +.path > p { color: var(--fg-2); } +.path .price { font: 700 64px/1 var(--display); color: var(--fg); letter-spacing: -.04em; margin: 36px 0 8px; } +.path .price span { font: 400 18px var(--body); color: var(--fg-3); letter-spacing: 0; margin-left: 6px; } +.path .muted { margin-bottom: 28px; } +.path-alt .btn { margin-top: auto; } +.path-alt > p { margin-bottom: 36px; } + +/* cta */ +.cta { position: relative; padding: 160px 0; text-align: center; overflow: hidden; border-top: 1px solid var(--line); + background: radial-gradient(700px 400px at 50% 100%, rgba(198,255,77,.12), transparent 70%); } +.cta .grid-bg { mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, #000 20%, transparent 70%); } +.cta-in { position: relative; display: flex; flex-direction: column; align-items: center; } +.cta h2 { max-width: none; } +.cta .lead { margin-left: auto; margin-right: auto; } +.cta .sub { width: 100%; } +.cta .sub-msg { left: 0; right: 0; } + +/* footer */ +.foot { border-top: 1px solid var(--line); padding: 36px 0; font-size: 14px; color: var(--fg-3); } +.foot-in { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; } +.foot nav { display: flex; flex-wrap: wrap; gap: 28px; } +.foot a { text-decoration: none; transition: color .2s; } +.foot a:hover { color: var(--acid); } + +/* reveal */ +.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); } +.reveal.in { opacity: 1; transform: none; } + +@keyframes spin { to { transform: rotate(360deg); } } +@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.06); } 24% { transform: scale(1); } 36% { transform: scale(1.03); } } +@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(198,255,77,.6); } 100% { box-shadow: 0 0 0 10px rgba(198,255,77,0); } } +@keyframes slide { from { opacity: 0; transform: translateY(-6px); } } +@keyframes marquee { to { transform: translateX(-50%); } } + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { animation: none !important; transition: none !important; } + .reveal { opacity: 1; transform: none; } + html { scroll-behavior: auto; } +} + +@media (max-width: 860px) { + .nav nav a:not(.btn) { display: none; } + .sec { padding: 96px 0; } + .hero { padding-top: 112px; } + .ring span { display: none; } + .log { right: 0; left: 0; bottom: auto; top: calc(100% + 20px); width: auto; } + .orbit { margin-bottom: 200px; } + .tag { letter-spacing: .08em; font-size: 11px; } + .path, .lab-xl { padding: 32px; } +} +@media (max-width: 520px) { + .sub { border-radius: 20px; } + .sub .btn { width: 100%; } + .sub-msg { margin-top: 128px; } +}