/* DOCKK site — frosted glass over the Horizon field.
   One stylesheet, no scripts, no inline styles (octolabo.app's CSP forbids
   them). Every path is relative so the folder works at octolabo.app/dockk/
   and at the root of its own domain. */

@font-face {
  font-family: "Funnel Display";
  src: url("fonts/FunnelDisplay.ttf") format("truetype");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f2f0ea;
  --ink-2: #c9c6cf;
  --ink-3: #a19ea9;
  --ground: #0b0d12;
  --signal: #ff4d06;
  --signal-ink: #160800;
  --chip: #efe36a;
  --blue: #3470d4;
  --frost-bg: rgba(22, 24, 32, .52);
  --frost-hi: rgba(255, 255, 255, .12);
  --frost-edge: rgba(255, 255, 255, .08);
  --frost-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  --display: "Funnel Display", -apple-system, "Helvetica Neue", sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --r-tile: 24px;
  --r-card: 18px;
}

* { box-sizing: border-box; }
html { background: var(--ground); scroll-padding-top: 24px; }
body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased;
  /* Horizon: near-black sky, a blue band, steel and ochre, orange at the
     foot of the hero; grain over everything. */
  background:
    url("img/grain.png"),
    linear-gradient(180deg, #0b0d12 0, #0c0f15 380px, #13284d 560px, #3470d4 760px,
      #5a86b0 900px, #7e8a8c 990px, #a97b45 1080px, #e05a26 1200px, #2a1408 1520px, #0b0d12 1900px);
  background-repeat: repeat, no-repeat;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #ffb27d; }
a:hover { color: #ffd2b3; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

.shell { max-width: 1120px; margin: 0 auto; padding: 0 20px 72px; display: grid; gap: 88px; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 16px; padding: 20px 0 0; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 500 18px/1 var(--display); letter-spacing: -.01em; }
.wordmark img { width: 28px; height: 28px; border-radius: 7px; }
.wordmark a { display: inline-flex; color: inherit; text-decoration: none; }
.wordmark .studio img { outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
.topbar .spacer { flex: 1; }
.topbar a.quiet { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.topbar a.quiet:hover { color: var(--ink); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 8vw, 88px); line-height: 1; letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.06; }
h3 { font-size: 21px; line-height: 1.2; }
p { margin: 0; }
.eyebrow { font: 600 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); max-width: 60ch; }
.copy { color: var(--ink-2); max-width: 62ch; }

/* ---------- pieces ---------- */
.frost {
  border-radius: var(--r-tile);
  background: var(--frost-bg);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--frost-hi), inset 0 0 0 1px var(--frost-edge), var(--frost-shadow);
}
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 999px; font: 600 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.pill.lit { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); background: linear-gradient(120deg, rgba(194,60,8,.92), rgba(150,48,127,.9) 60%, rgba(91,69,232,.9)); }
.pill.lit .dot { background: #fff; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--chip); color: #1a1a10; font: 700 11px/1 var(--mono); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; font: 600 15px/1 var(--ui); text-decoration: none; background: var(--signal); color: var(--signal-ink); }
.button:hover { background: #ff6a2e; color: var(--signal-ink); }
.button.ghost { background: rgba(255,255,255,.08); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.button.ghost:hover { background: rgba(255,255,255,.14); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- hero ---------- */
.hero { display: grid; gap: 28px; padding-top: 48px; }
.hero-head { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.hero-head .icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.hero-head .titles { display: grid; gap: 12px; justify-items: start; }
.shot { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 100px rgba(0,0,0,.55); }
.hero .shot { margin-top: 12px; }

/* ---------- sections ---------- */
.section { display: grid; gap: 22px; }
.section > header { display: grid; gap: 12px; }

/* translate */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.tile { padding: 24px; display: grid; gap: 10px; align-content: start; }
.tile h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tile p { color: var(--ink-2); font-size: 15px; }
.tile.lit { color: #fff; background: linear-gradient(135deg, rgba(194,60,8,.88), rgba(150,48,127,.86) 58%, rgba(74,55,201,.86)); }
.tile.lit p { color: rgba(255,255,255,.9); }
.kbd { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; font: 600 12px/1 var(--mono); background: rgba(255,255,255,.14); color: #fff; }
.engines { display: grid; gap: 8px; margin-top: 4px; }
.engine { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 14px; }
.engine b { font-weight: 600; min-width: 110px; }
.engine span { color: var(--ink-2); }

/* bento */
.bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.bento .tile { min-height: 190px; align-content: space-between; }
.big { font: 300 56px/1 var(--display); letter-spacing: -.04em; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; }
.gallery figure { margin: 0; display: grid; gap: 10px; }
.gallery figcaption { color: var(--ink-3); font-size: 14px; }

/* pricing */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.price { padding: 24px; display: grid; gap: 6px; }
.price .amount { font: 400 40px/1.05 var(--display); letter-spacing: -.03em; }
.price p { color: var(--ink-2); font-size: 15px; }
.price.lit { background: rgba(255, 94, 32, .9); color: var(--signal-ink); box-shadow: inset 0 1px 0 rgba(255,210,180,.9), var(--frost-shadow); }
.price.lit .eyebrow, .price.lit p { color: #3a1606; }

/* faq */
.faq { display: grid; gap: 10px; }
.faq details { padding: 4px 22px; border-radius: var(--r-card); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--display); color: var(--ink-3); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); padding-bottom: 18px; }

/* support / contact */
.cta { padding: 32px; display: grid; gap: 16px; justify-items: start; }

/* prose pages */
.prose { max-width: 720px; display: grid; gap: 14px; padding: 32px; }
.prose h1 { font-size: clamp(36px, 6vw, 56px); }
.prose h2 { font-size: 24px; margin-top: 18px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.meta { font: 500 13px/1.3 var(--mono); color: var(--ink-3); }

/* footer */
.footer { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; color: var(--ink-3); font-size: 14px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; }
.footer .spacer { flex: 1; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .shell { gap: 64px; }
  .hero-head .icon { width: 84px; height: 84px; border-radius: 20px; }
  .tile, .price, .cta, .prose { padding: 20px; }
  .engine { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-transparency: reduce) {
  .frost { -webkit-backdrop-filter: none; backdrop-filter: none; background: #171922; }
}

/* ======================================================================
   Scroll story (1.1). Static first: without scroll-driven animation the
   page reads top to bottom with nothing hidden. The motion block at the
   end is CSS only (octolabo.app's CSP allows no scripts).
   ====================================================================== */

/* statement line */
.statement { padding: 40px 0 8px; }
.statement p { font: 500 clamp(40px, 7.4vw, 104px)/1.02 var(--display); letter-spacing: -.04em; max-width: 14ch; }

/* pinned feature story */
.story { position: relative; margin: 72px 0; }
.story-stage {
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: minmax(280px, 0.9fr) 1.6fr; gap: 40px; align-items: center;
}
.story-copy { display: grid; gap: 18px; }
.story-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: step; }
.story-steps li { counter-increment: step; padding: 14px 16px 14px 52px; position: relative; border-radius: 16px;
  color: var(--ink-2); font-size: 15px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.story-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 16px; top: 15px;
  font: 600 12px/1.4 var(--mono); color: var(--ink-3); }
.story-steps b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }
.story-media { position: relative; aspect-ratio: 16 / 10; }
.story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 100px rgba(0,0,0,.55); }
.story-media img.tall { width: auto; left: 50%; right: auto; translate: -50% 0; }
.story-media img:not(.m1) { visibility: hidden; }   /* static: show the first only */
/* each step's own screenshot: phones only, where it sits right under its text */
.story-steps .shot { display: none; }

/* backgrounds strip: the same fields as the app (DOCKK for Windows colours) */
.bg-strip { overflow: hidden; padding: 8px 0 24px; margin-top: -48px; }
.bg-row { display: flex; gap: 14px; width: max-content; padding: 0 20px; }
.bgt { width: clamp(180px, 22vw, 280px); aspect-ratio: 16 / 10; border-radius: 18px; flex: none;
  display: flex; align-items: flex-end; padding: 12px 14px; font: 600 12px/1 var(--mono); letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.bg-frosted { background: radial-gradient(38% 46% at 10% 92%, #4a37c9 0%, transparent 70%), radial-gradient(30% 38% at 52% 8%, #c23c08 0%, transparent 70%), radial-gradient(34% 44% at 96% 70%, #7a2a7a 0%, transparent 72%), #0d0c12; }
.bg-sunrise { background: radial-gradient(38% 46% at 10% 92%, #3b2c86 0%, transparent 70%), radial-gradient(30% 38% at 52% 8%, #e0841a 0%, transparent 70%), radial-gradient(34% 44% at 96% 70%, #b8326a 0%, transparent 72%), #120c12; }
.bg-midday { background: radial-gradient(38% 46% at 10% 92%, #1f63b8 0%, transparent 70%), radial-gradient(30% 38% at 52% 8%, #b08a10 0%, transparent 70%), radial-gradient(34% 44% at 96% 70%, #0f7f78 0%, transparent 72%), #0a0f16; }
.bg-sunset { background: radial-gradient(38% 46% at 10% 92%, #6a2bb0 0%, transparent 70%), radial-gradient(30% 38% at 52% 8%, #f05a12 0%, transparent 70%), radial-gradient(34% 44% at 96% 70%, #b0206a 0%, transparent 72%), #0f0910; }
.bg-aurora { background: radial-gradient(38% 46% at 10% 92%, #0f8a6a 0%, transparent 70%), radial-gradient(30% 38% at 52% 8%, #1b5fbf 0%, transparent 70%), radial-gradient(34% 44% at 96% 70%, #7a2fb0 0%, transparent 72%), #070d10; }
.bg-glass { background: radial-gradient(38% 46% at 10% 92%, #343a48 0%, transparent 70%), radial-gradient(30% 38% at 52% 8%, #4a4f5e 0%, transparent 70%), radial-gradient(34% 44% at 96% 70%, #262a35 0%, transparent 72%), #0f1014; }
.bg-lines { background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px), radial-gradient(38% 46% at 10% 92%, #4a37c9 0%, transparent 70%), radial-gradient(30% 38% at 52% 8%, #c23c08 0%, transparent 70%), radial-gradient(34% 44% at 96% 70%, #7a2a7a 0%, transparent 72%), #0d0c12; }
.bg-horizon { background: url("img/grain.png"), linear-gradient(180deg, #0b0d12 0%, #0c0f15 38%, #13284d 48%, #3470d4 60%, #5a86b0 72%, #7e8a8c 80%, #a97b45 88%, #e05a26 100%); }
.bg-plain { background: #0d0c12; }

@media (max-width: 860px) {
  .story-stage { grid-template-columns: 1fr; gap: 20px; }
  .story-steps li { font-size: 14px; }
  /* no room to pin five steps and a picture on one screen: each step
     carries its screenshot instead, and the shared stage goes */
  .story-media { display: none; }
  .story-steps .shot { display: block; width: calc(100% + 36px); max-width: none; height: auto; margin: 14px 0 2px -36px;
    border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 18px 40px rgba(0,0,0,.45); }
  .story-steps .shot.tall { width: auto; max-width: calc(100% + 36px); max-height: min(440px, 56vh); margin-inline: auto; translate: -18px 0; }
}

/* ---------------------------------------------------------------------- */
/* Motion: scroll-driven, CSS only. Safari 26+, Chrome 115+.              */
@media (prefers-reduced-motion: no-preference) {

  /* first paint: the hero rises in */
  .intro { animation: intro .8s cubic-bezier(.22, .8, .22, 1) both; }
  .intro-2 { animation-delay: .08s; }
  .intro-3 { animation-delay: .16s; }
  .intro-4 { animation-delay: .24s; }
  @keyframes intro { from { opacity: 0; transform: translateY(18px); } }

  @supports (animation-timeline: view()) {
    /* hero shot: tilted back and dim, straightens and lights as you start scrolling */
    .hero-shot {
      transform-origin: 50% 0;
      animation: hero-tilt linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 520px;
    }
    @keyframes hero-tilt {
      from { transform: perspective(1800px) rotateX(18deg) scale(.9); filter: brightness(.6) saturate(.8); }
      to { transform: none; filter: none; }
    }

    /* anything marked .reveal rises in as it arrives */
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .bento .reveal:nth-child(3n+2), .split .reveal:nth-child(2), .prices .reveal:nth-child(2) { animation-range: entry 8% cover 32%; }
    .bento .reveal:nth-child(3n), .split .reveal:nth-child(3), .prices .reveal:nth-child(3) { animation-range: entry 16% cover 36%; }
    @keyframes rise { from { opacity: 0; transform: translateY(48px) scale(.97); } to { opacity: 1; transform: none; } }

    /* big frames: dim at the edges of the screen, full in the middle */
    .frame { animation: spotlight linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes spotlight {
      0% { filter: brightness(.3); transform: scale(.94); }
      38%, 62% { filter: none; transform: none; }
      100% { filter: brightness(.3); transform: scale(.97); }
    }

    /* statement: words fill in one by one */
    .statement { view-timeline-name: --statement; }
    .statement span { opacity: .12; animation: word linear both; animation-timeline: --statement; }
    .statement span:nth-child(1) { animation-range: cover 18% cover 28%; }
    .statement span:nth-child(2) { animation-range: cover 24% cover 34%; }
    .statement span:nth-child(3) { animation-range: cover 30% cover 40%; }
    .statement span:nth-child(4) { animation-range: cover 36% cover 46%; }
    .statement span:nth-child(5) { animation-range: cover 42% cover 52%; }
    .statement span:nth-child(6) { animation-range: cover 48% cover 58%; }
    @keyframes word { to { opacity: 1; } }

    /* the story: pinned for five screens; each step lights its line and
       swaps the picture */
    .story { height: 520vh; view-timeline-name: --story; margin: 0; }
    .story-stage { position: sticky; top: 0; height: 100vh; }
    .story-media img:not(.m1) { visibility: visible; }
    .story-media img { opacity: 0; animation: shot linear both; animation-timeline: --story; }
    .story-steps li { opacity: .38; animation: step linear both; animation-timeline: --story; }
    /* neighbouring steps overlap by 4%, so each picture cross-fades into
       the next instead of leaving a gap between them */
    .story-media .m1, .story-steps li:nth-child(1) { animation-range: contain 0% contain 22%; }
    .story-media .m2, .story-steps li:nth-child(2) { animation-range: contain 18% contain 42%; }
    .story-media .m3, .story-steps li:nth-child(3) { animation-range: contain 38% contain 62%; }
    .story-media .m4, .story-steps li:nth-child(4) { animation-range: contain 58% contain 82%; }
    .story-media .m5, .story-steps li:nth-child(5) { animation-range: contain 78% contain 100%; }
    .story-media .m1 { animation-name: shot-first; }
    .story-media .m5 { animation-name: shot-last; }
    .story-steps li:nth-child(1) { animation-name: step-first; }
    .story-steps li:nth-child(5) { animation-name: step-last; }
    @keyframes shot {
      0% { opacity: 0; transform: translateY(40px) scale(.96); }
      17%, 83% { opacity: 1; transform: none; }
      100% { opacity: 0; transform: translateY(-40px) scale(.96); }
    }
    @keyframes shot-first { 0%, 83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-40px) scale(.96); } }
    @keyframes shot-last { 0% { opacity: 0; transform: translateY(40px) scale(.96); } 17%, 100% { opacity: 1; transform: none; } }
    @keyframes step {
      0% { opacity: .38; }
      17%, 83% { opacity: 1; background: rgba(255, 77, 6, .14); box-shadow: inset 0 0 0 1px rgba(255, 120, 60, .55); }
      100% { opacity: .38; }
    }
    @keyframes step-first { 0%, 83% { opacity: 1; background: rgba(255, 77, 6, .14); box-shadow: inset 0 0 0 1px rgba(255, 120, 60, .55); } 100% { opacity: .38; } }
    @keyframes step-last { 0% { opacity: .38; } 17%, 100% { opacity: 1; background: rgba(255, 77, 6, .14); box-shadow: inset 0 0 0 1px rgba(255, 120, 60, .55); } }

    /* backgrounds glide sideways as the strip passes */
    .bg-row { animation: glide linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes glide { from { transform: translateX(6%); } to { transform: translateX(-38%); } }
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* phones: the story scrolls as plain cards, not pinned */
    .story { height: auto; margin: 72px 0; }
    .story-stage { position: static; height: auto; }
    .story-steps li { opacity: 1; animation: none; }
  }
}