/* Concept E, "Orbit". The page reads as a descent: it opens in orbit
   looking down at the planet, lands in daylight for the substance, and
   passes over the night side, where the problems we fix show up as lights.
   Airglow green is ours (our products, our links, the one highlighted
   phrase): it's the thin green line the atmosphere makes when you see the
   planet's night side from orbit. Sky blue is only ever atmosphere. */
:root {
    --space: #070B16;
    --space-2: #0E1528;
    --on-dark: #EEF1F6;
    --on-dark-2: #A7B0C2;
    --paper: #F6F7F5;
    --card: #FFFFFF;
    --ink: #12151F;
    --ink2: #535A69;
    --rule: rgba(18, 21, 31, 0.12);
    --rule-dark: rgba(238, 241, 246, 0.12);
    --glow: #8DF0B0;
    --glow-ink: #17734A;
    --sky: #7FB2E5;
    --display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'Martian Mono', ui-monospace, monospace;
    --gutter: clamp(16px, 4.5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--space); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.1875rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--glow); color: var(--space); }
.wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-weight: 300; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.skip { position: absolute; left: -999px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { left: var(--gutter); top: 1rem; z-index: 30; background: var(--paper); color: var(--ink); padding: .5rem 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Orbit: the hero ---------- */
.orbit { position: relative; background: var(--space); color: var(--on-dark); overflow: hidden; isolation: isolate; }
.orbit canvas.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.5rem; }
.name { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.name svg { width: 26px; height: 26px; flex: none; }
.bar ul { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; list-style: none; margin: 0; padding: 0; }
.bar ul a { text-decoration: none; color: var(--on-dark-2); }
.bar ul a:hover { color: var(--glow); }
@media (max-width: 36rem) { .bar li:not(:last-child) { display: none; } }

.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) 0; }
.hero h1 { font-size: clamp(2.7rem, 1rem + 6.2vw, 6.6rem); line-height: .98; letter-spacing: -0.04em; max-width: 13ch; }
.hero h1 span { color: var(--glow); }
.hero p { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 36rem; color: var(--on-dark-2); font-size: clamp(1.15rem, 1rem + .45vw, 1.35rem); line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 2rem; }
.btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .7rem 1.3rem; border-radius: 999px; text-decoration: none; font-weight: 600; transition: transform .15s, background-color .15s, color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--glow); color: var(--space); }
.btn-ghost { border: 1px solid var(--rule-dark); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--glow); color: var(--glow); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* The scene under the words: horizon, orbit and our products in it. */
.scene { position: relative; height: clamp(240px, 34vw, 430px); }
/* Wide screens: the planet rises behind the right-hand side instead of
   sitting under the words, so it's in the first frame. */
@media (min-width: 900px) {
    .orbit { min-height: min(100svh, 58rem); display: flex; flex-direction: column; }
    .orbit .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 1rem 6rem; }
    .scene { position: static; height: 0; }
    .hero .wrap { width: 100%; }
    .hero h1 { max-width: 12ch; font-size: clamp(3rem, 1rem + 5.2vw, 6.2rem); }
    .hero p { max-width: 32rem; }
}
.sat { z-index: 2; }
.sat { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; text-decoration: none; color: var(--on-dark); font-weight: 600; font-size: .98rem; padding: .35rem .5rem; will-change: transform; }
.sat small { font-family: var(--mono); font-weight: 300; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.sat:hover, .sat:focus-visible { color: var(--glow); }
.coords { position: absolute; right: var(--gutter); bottom: 1rem; z-index: 2; color: var(--on-dark-2); opacity: .8; }

/* ---------- Daylight sections ---------- */
.day { background: var(--paper); }
.section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.section + .section { border-top: 1px solid var(--rule); }
.head { display: grid; gap: 1.25rem 4rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
@media (min-width: 60rem) { .head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; } }
.head h2 { font-size: clamp(2rem, 1.1rem + 3vw, 3.6rem); line-height: 1.02; max-width: 16ch; }
.head p { color: var(--ink2); max-width: 34rem; }
.lead-big { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 1rem + 2.1vw, 2.6rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 30ch; text-wrap: pretty; }
.lead-big em { font-style: normal; color: var(--glow-ink); }
.two { display: grid; gap: 1.25rem 4rem; margin-top: clamp(2rem, 4vw, 3rem); color: var(--ink2); }
@media (min-width: 52rem) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Products: the portfolio grid */
.products { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.co { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 1.6rem; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
a.co:hover, .co:has(.go):hover { border-color: var(--glow-ink); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(18, 21, 31, .35); }
@media (prefers-reduced-motion: reduce) { a.co:hover, .co:has(.go):hover { transform: none; } }
.co-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mark { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--space); }
.mark svg { width: 30px; height: 30px; }
.status { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink2); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink2); }
.status.live { color: var(--ink); }
.status.live::before { background: var(--glow-ink); border-color: var(--glow-ink); }
.co h3 { font-size: 1.7rem; line-height: 1.05; }
.co .tag { font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--ink); margin-top: .2rem; letter-spacing: -0.01em; }
.co p { color: var(--ink2); font-size: 1.02rem; }
.fixes { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.fixes li { font-size: .85rem; color: var(--ink2); border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .65rem; text-decoration: line-through; text-decoration-color: var(--glow-ink); }
.go { font-weight: 600; color: var(--glow-ink); }
/* App cards hold two links, so the website link stretches over the whole
   card and the Play badge sits above it. The badge image carries Google's
   own clear space, so it's pulled out by that much to line up with the text. */
.co-links { display: grid; justify-items: start; gap: .35rem; }
.co .go { text-decoration: none; }
.co .go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.co .play { position: relative; z-index: 1; display: block; margin: -12px 0 -12px -12px; border-radius: 10px; }
.co .play img { display: block; width: auto; height: 72px; }
.co.next { background: transparent; border-style: dashed; }
.co.next .mark { background: transparent; border: 1.5px dashed var(--ink2); width: 56px; height: 56px; border-radius: 14px; }
.icon { width: 56px; height: 56px; border-radius: 14px; display: block; }

/* ---------- Night side: the map of what we fix ---------- */
.night { background: var(--space); color: var(--on-dark); padding-block: clamp(4.5rem, 10vw, 8rem); }
.night .head p { color: var(--on-dark-2); }
.field { position: relative; display: block;
    --dot: #1E2A42; --accent: #8DF0B0; --ink: #EEF1F6; --ink2: #A7B0C2; --strike: #3FA86E; }
.field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.field-links { position: absolute; inset: 0; }
.field-links a.left { text-align: right; }
.field.is-narrow .fix-link { max-width: none; white-space: nowrap !important; }
.field-links a { position: absolute; transform: translateY(-50%); white-space: nowrap; text-decoration: none; padding: .3rem .1rem; line-height: 1.2; transition: color .2s, opacity .2s; }
.app-link { font-weight: 600; font-size: 1.05rem; color: var(--ink); padding-left: .35rem !important; }
.fix-link { font-size: .95rem; color: var(--ink2); white-space: normal !important; text-wrap: balance; line-height: 1.3 !important; text-decoration: line-through !important; text-decoration-color: var(--strike) !important; text-decoration-thickness: 1.5px !important; }
.field-links a:hover, .field-links a:focus-visible { color: var(--accent); }
.field.is-focus .field-links a { opacity: .35; }
.field.focus-0 .field-links a:nth-child(-n+7), .field.focus-1 .field-links a:nth-child(n+8) { opacity: 1; }
.field.focus-0 .fix-link:nth-child(-n+7), .field.focus-1 .fix-link:nth-child(n+8) { color: var(--ink); }

/* ---------- Rules ---------- */
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 44rem) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rules li { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.2rem); display: grid; gap: .6rem; align-content: start; }
.rules .n { color: var(--glow-ink); }
.rules h3 { font-size: 1.5rem; line-height: 1.1; }
.rules p { color: var(--ink2); }


/* ---------- Contact ---------- */
.contact { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact > div { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.4rem); display: grid; gap: .9rem; align-content: start; }
.contact h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.1; }
.contact p { color: var(--ink2); }
.email { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, .9rem + .9vw, 1.5rem); color: var(--glow-ink); overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.foot { background: var(--space); color: var(--on-dark-2); padding-block: 2.5rem 3rem; font-size: .95rem; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; }

/* 404 */
.lost { min-height: 80svh; display: grid; align-content: center; gap: 1.25rem; padding-block: 4rem; }
.lost h1 { font-size: clamp(2.6rem, 1rem + 5vw, 5.4rem); line-height: 1; letter-spacing: -0.035em; max-width: 14ch; }
.lost h1 span { color: var(--glow-ink); }
.lost p { color: var(--ink2); max-width: 34rem; }